首页 > 其他分享 >JQuery&Ajax基础知识

JQuery&Ajax基础知识

时间：2023-08-14 17:46:48浏览次数：32  
标签：JQuery console log 对象 标签 基础知识 Ajax var 选择器

JQuery&Ajax基础知识

1、Jquery简介

   Query是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
   jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

2、Jquery下载和引入

1、Jquery下载地址：https://jquery.com/
2、Jquery引入方式(一般放在head标签中)： 
   一、本地下载jquery文件标签引入
   <script type="text/javascript" src="jquery.js"></script>
   二、在线CDN引入
   <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>

3、Jquery包装集对象和JqueryDom对象的区别

Jquery包装集对象是初始化一个函数，传入选择器初始化。
DOM对象是一个打印标签文本的字符串。
Jquery包装集对象与jsDom树的互转：
Jquery---》DOM：$("选择器")[索引]
DOM--》jQuery： $(document.getElementById("id选择器"))；
对象的遍历：
$("选择器").each(function(){
  var t=$(this)  //this代表这个对象的所有元素
});
  • 测试代码
var app =document.getElementById("app");
		  console.log(app);
		  //dom对象转为jquery包装集对象
		var app_$=$(app);
		console.log(app_$);
		//如果js原生获取对象不存在显示null  jquery获取对象不存在显示空对象:jQuery.fn.init(0)
		var f1 =document.getElementById("f1");
		console.log(f1);//null
		var f1_$=$("f1"); 
		console.log(f1_$);//jQuery.fn.init(0)
		//jquery获取DOM对象 两种方式
		var app1=jQuery("#app");//注意Jquery单词大小写。
		console.log(app1);
		var app2=$("#app");
		console.log(app2);//jQuery.fn.init [div#app]
		
			//jquery获取JQueryDOM对象 两种方式
		var app1=jQuery("#app");//注意Jquery单词大小写。
		var dom1=app1[0];//JQuery对象转化为DOM对象
		//遍历
		app1.each(function(){
			var j=$(this);
        console.log(j);  //jQuery.fn.init [prevObject: jQuery.fn.init(1)]和jQuery.fn.init [div#app]对象
		})

4、基础选择器

//获取基础选择器对象
		//可以通过id选择器、class选择器、标签选择器、属性值、通用选择器获取对象 
		//id选择器上面已经介绍过了
		console.log("************************************************");
		var info=$(".info");//类选择器  可能获取多个
		console.log(info);
		var p_=$("p");  //可能获取多个标签选择器  返回一个数组
		// console.log(p_);
		//通过属性获取对象  也可能获取多个对象
		var attr=$("[src]");
		// console.log(attr);
		//获取具体属性值的标签
		var attr_v=$("[href='javascript:void(0);']");//这里获取超链接对象
		console.log(attr_v);
		//获取通用选择器  获取所有的标签对象
		var common=$("*");
		console.log(common);
		console.log(common[5].innerHTML);  //打印body标签内的所有html代码。
		console.log(common[5].innerText);  //打印body标签内的所有文本不包括html标签。

5、层次选择器

获取层次选择器对象:
后代选择器  标签名 标签名  获取所有的后代对象
子代选择器  标签名>标签名 获取所有的第一代子标签对象
相邻兄弟选择器  标签名+标签名 只会向下获取第一个同级标签对象，若是不存在则返回null
普通兄弟选择器  标签名~标签名  向下获取所有同级兄弟选择器对象
  • 测试代码
        //后代选择器  获取所有li子标签
		var son_=$("#parent li")
		console.log(son_);
		//子代选择器
		var son_1=$("#parent>li");  //只有两个li
		console.log(son_1);
		//相邻兄弟选择器
		var son_2=$("#parent+a");
		console.log(son_2);//空对象
		var son_3=$("#parent+p");
		console.log(son_3);//有一个p标签对象
		//普通兄弟选择器
		var son_4=$("#parent~p");
		console.log(son_4);//有一个p标签对象

6、表单选择器

image-20230814095620963

<form id='myform' name="myform" action="http://www.baidu.com">
		姓名:<input type="text" id="uname" name="uname"/><br />
		密码:<input type="password" id="upwd" name="upwd" /><br />
		年龄:<input type="radio" name="uage"  value="0" checked="checked"/>小屁孩
		      <input type="radio" name="uage" value="1"/>你懂得 <br />
		爱好:<input type="checkbox"  name="ufav"  value="篮球"/>篮球
		      <input type="checkbox" name="ufav" value="爬床"/>爬床
		      <input type="checkbox" name="ufav" value="代码"/>代码<br />
		来自:<select id="ufrom" name="ufrom">
		          <option value="-1"selected="selected">请选择</option>
		          <option value="0">北京</option>
		          <option value="1">上海</option>
		      </select><br />
			  <!-- 信息提示框-->
		      <div id="validate" style="color: red;">
		      </div>
		      <button type="submit" onclick="return checkForm();">提交</button>
		      <button type="reset" onclick="resetForm();">重置</button>
		</form>
		
	</body>
	<script type="text/javascript">
		//表单选择器
		var inpu=$(":input");  //获取所有表单对象  包括input select textarea button
		console.log(inpu);
		//获取单个表单对象
		var inpu_1=$("input");  
		console.log(inpu_1);
		//获取下拉菜单对象
		var select_=$("select");
		console.log(select_);
		//获取button按钮对象
		var button_=$("button");
		console.log(button_);
</script>

7、JQuery操作DOM属性

  • 操作属性
基本语法:
		1、Jquery对象.attr("属性名") 获取属性值
		2、Jquery对象.attr("属性名","值") 设置属性名
		3、 jquery对象.prop("属性名","值") 设置属性名
		2、Jquery对象.prop("属性名") 获取属性值
		
		固有属性：标签内置的属性名。  比如：name、id、class、style
		布尔属性：属性值为true、false 比如：selected、checked 
		自定义属性：用户自己设置的属性
		attr prop的区别？
		attr对于固有和自定义属性都可以使用，布尔属性不能使用。
		prop对于固有属性可以使用，对boolean属性返回true、false,自定义属性不能使用。
		总结：布尔属性使用prop()方法  固有属性和自定义属性使用attr()方法
  • 测试代码
//测试自定义属性
		var v=$("#test").attr("abc");
		console.log(v);
		$("#test").attr("abcd","efg");
		//测试固有属性
		var name=$("#test").attr("name");
		console.log(name);
		$("#test").attr("class","red");
		//测试布尔属性 不能操作布尔属性
		$("test").attr("checked");
		$("test").attr("checked","checked");
		console.log("**************************************************************");
		//prop方法获取布尔属性  如果设置了布尔属性返回true 没有设置布尔属性返回false。
		var check=$("#test").prop("checked");  
		console.log(check);
		var check=$("#test1").prop("checked","checked");  //可以设置布尔属性
		var name1=$("#test").prop("name");//获取固有属性值
		console.log(name1);
		$("#test1").prop("class","red");//设置固有属性
		var abc=$("#test").prop("abc");  //获取自定义属性  不能获取自定义属性
		console.log(abc);
		$("#test").prop("abcd","A");  //不能设置自定义属性
  • 使用class、addclass、css方法
前提：先设置好相关类选择器样式。
$('选择器').attr('class',值)：设置calss属性，添加类选择器样式。
$('选择器').addclass("多个类选择器"):添加多个类选择器样式。
$('选择器').css('属性','值')：添加单个具体样式。
$('选择器').css({'属性':'值','属性':'值','属性':'值',……})：添加多个具体样式。
  • 测试代码
<style>
			.red{
				color: red;
			}
			.green{
				color: green;
			}
			.large{
				font-size: 30px;
			}
			
		</style>

		
		<div id="contain">
		      <p> 你好*******************************</p>
		</div>

	<script>
		 //前提要设置好类选择器样式
		//增加类选择器样
		$("#contain").addClass("red large");
		$("p").attr("class","green");  //标签设置添加类选择器
		//设置具体样式 css('','')
		$("p").css("font-family","楷体"); //设置单个样式
		//设置多个具体样式  css({'':'','':''})
		$("p").css({"border-color":"red","border-size":"1px","border-style":"solid"});
	</script>
  • 使用html()、text()、val()方法
image-20230814140617351 
html()和text()区别？
html()可以识别html标签和文本，进行渲染，而text()不能识别html标签，只能识别文本。
html()和text()都可以打印出标签和文本字符串。
value()可以设置和获取标签value的值。
  • 测试代码
//测试代码
		var h=$("#contain").html();
		console.log(h);
		//设置html标签  相当于innerHTML=""
		var h=$("#app").html("<img src='static/image-20230713201709926.png' alt='图片' title='点击看看'>");
		var text=$("#contain").text();  //获取标签内的文本文字
		console.log(text);
		$("#app").text("你好YAYA1");  //在标签中设置文本文字
		
		var val=$("[name='username']").val();  //获取输入框文的value值
		console.log(val);
		$("[name='username']").val("好好爱后悔哦啊好哦");//设置输入框文本的value值
  • 创建接节点、添加节点、删除节点
image-20230814105114033 
创建节点：把要创建的标签文本作为参数传入$()转成jQuery节点对象。
添加节点可分为四大类：在子标签对象前后添加节点，在同级对象前台添加节点。
在子标签前添加节点的方法有两个：
$("父节点对象").prepend("添加的节点对象");
$("添加的节点对象").prependTo("父节点对象");
在子标签后添加节点的方法有两个：
$("父节点对象").append("添加的节点对象");
$("添加的节点对象").appendTo("父节点对象");
在同级节点前添加节点
$("父节点对象").before("添加的节点对象");
在同级节点后添加节点
$("父节点对象").after("添加的节点对象");
删除节点：$("要删除的节点").remove();
清空文本文字：$("要删除的节点").empty();
  • 测试代码
 //在子元素最前面添加节点
		var t="<p>添加的元素前…………………………</p>";
		var w="<p>添加的元素后…………………………</p>"
		$("#contain").prepend($(t));
		$(t).prependTo($("#contain"));
		//在子节点最后面添加节点
		$("#contain").append($(w));
		$(w).appendTo($("#contain"));
		var c="<ul>"+
		"<li>茄子</li>"+
		"<li>菠菜</li>"+
		"<li>白菜</li>"+
		"<li>青菜</li>"+
		"</ul>";
		//在同级元素前添加元素
		$("#contain").before($(c));
		//在同级元素后添加元素
		$("#contain").after($(c));
		//删除和清空文本元素
		$("#contain").remove();  //只能删除代码中写好的标签对象
		$("#contain").empty();  //清空标签内的文本文字

8、JQuery事件监听

  • ready事件
如果script在head标签中，要加载body标签内的节点对象，要引入ready(function(){}),等HTML中所有的节点加载完毕后，再载入对象，防止在HTML加载完之前无法加载对象，相当于原生javascript中onload事件。可以编写多个ready()，从上到下依次执行。
  • 测试代码
			 //有两种引用ready()方式
			 //第一种写法 全名写
			 $(document).ready(function(){
				console.log($("p")); 
			 });
			 //第二种写法
			 $(function(){
				 	console.log($("p")); 
			 });
  • 事件绑定
1、常用的事件：
blur：鼠标失去焦点事件
focus：鼠标聚集焦点事件
mouseover：鼠标悬浮事件
mouseout：鼠标离开事件
keyup：键盘弹起事件
keydown：键盘按下事件
click:鼠标点击事件
dbclick：鼠标双击事件
2、事件绑定方式有两种
$('选择器').bind('事件名',function(){

});(绑定单个事件)
绑定多个事件
$('选择器').bind("{'事件名1':function(){},'事件名2:function(){},……}")
//常用方式：
$('选择器').事件名(function(){

});(绑定单个事件)
绑定多个事件
$('选择器').事件名1(function(){

}).事件名2(function(){

}).事件名3(function(){

});
  • 测试代码
<body>
          <p id="info" style="color: aqua;font-family: 宋体;font-size: 50px;"></p>
		  
		  <button type="button" id="btn">点击一下试一试！</button>
		  <input type="text" name="username" id="tex"/>
		  
	</body>
	<script type="text/javascript">
		$("#btn").bind('click',function(){
			$("#info").text("世上无难事！，只怕有心人！");
		});
		//绑定多个事件件  （常用）
		$("#tex").mouseout(function(){
			$(this).val("鼠标离开了！要注意哦！");
		}).mouseover(function(){
			$(this).val(" ");
		});
	</script>

9、JQuery异步通信方法(ajax)

image-20230814152400856 
ajax是一种异步通信机制，向服务端请求数据，得到服务端响应，获取服务端的json字符串，然后转化成js对象，通过操作js对象，把数据渲染到页面上展示。
json字符串必须要用双引号,单引号会报错！ajax会自动将json字符串转为js对象。
常用的方法有四种：
$.ajax({
     url:'',
     type:'get',
     data:{},
     dataType:'json',
     async:true,
     success:function(data){},
     error:function(data){}
});
$.get('url'，{请求数据}，function(data){});
$.post('url'，{请求数据}，function(data){});
$.getjson('url'，{请求数据}，function(data){}); 只能得到json字符串数据转化为JSON对象。
  • 测试代码
//ajax方式请求响应！
$.ajax(
   {
			    url:'data/test.text',
       //这个属性会自动把json文本文件转换为js对象，如果是json文件可以不设置也会自动转
				dataType:'json',  
				type:'get',
				success:function(data){
					var str="";
					console.log(data);  //自动转为js对象
					for(var i=0;i<data.length;i++){
						 str+="<li>"+data[i].username+"</li><li>"+data[i].age+"</li><li>"+data[i].address+"</li>";
					}
					$("#app").append($(str));
				},
				error:function(err){
					 console.log(err);
				}
			});

//$.get()方式请求数据
/*             @data:响应数据 
			   @status：响应状态
			   @xhr:响应对象
			   如果请求的是json文件，响应数据会自动转化为js对象
			 如果请求的是文本文件，响应数据是json字符串或者普通字符串。
			*/
			$.get('data/test.json',{},function(data,status,xhr){
				console.log(data);
				console.log(status=='success'?'数据获取成功！':'数据获取失败！');
				console.log(xhr);
			});

//$.post()方式请求数据
/* @data:响应数据
			   @status：响应状态
			   @xhr:响应对象
			   如果请求的是json文件，响应数据会自动转化为js对象
			   如果请求的是文本文件，响应数据是json字符串。
			*/
			$.post('data/test.json',{},function(data,status,xhr){
				console.log(data);
				console.log(status);
				console.log(xhr);
			});
		});

//$.getJSON()方式请求数据
          /**@data:响应数据
		   @status：响应状态
		   @xhr:响应对象
		   不管请求的数据是json字符串文本文件还是JSON文件都会自动转成js对象
		   但是普通字符串文件，不会响应数据，如果出现没有响应数据说明请求的文件不是json字符格    式。
		 **/
		$.getJSON('data/test.text',{},function(data,status,xhr){
			    console.log(data);
				console.log(status);
				console.log(xhr);
		});
		});

标签：JQuery,console,log,对象,标签,基础知识,Ajax,var,选择器
From： https://www.cnblogs.com/smallzengstudy/p/17629290.html

相关文章

  • JavaScript基础知识
    JavaScript基础知识1、简介1、javascript是一面向对象的解释型语言，是实现动态前端页面的，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。它的主要目的是，验证发往服务器端的数据、增加Web互动、加强用户体验度。2、javascript体系由ECMAScript、DOM、BOM组成。2、......
  • Oracle基础知识
    Oracle基础知识1、Oracle安装安装oracle注意事项：1、关闭杀毒软件以及电脑管家。2、电脑主机名为英文。3、安装路径不要出现中文或者中文符号。4、如果没有正常安装成功，安装程序也是卸载程序，直接卸载，重装。卸载后重启电脑后再重新安装。测试：cmd--->sqlplus-->用户名、密码......
  • １信息安全基础知识
    信息安全包括５个基本要素：机密性：“不泄露”完整性“不能进行更改”可用性“合法许可用防护能够及时获取信息或服务的特性”可控性“控制授权范围内的i信息流向及行为方式可审查性出现安全问题提供调查的依据和手段信息安全范围包括设备安全、数据安全、内容安全和......
  • jQuery FormData使用方法
    FormData的主要用途将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。异步上传文件注：FormData对象的字段类型可以是Blob,File,或者string，如果它的字段类型不是Blob也不是File，则会被转换成字符串   //通过FormData......
  • 【JavaScript40】jquery发送jsonp
    jquery中也提供了jsonp请求服务器端fromflaskimportFlask,render_template,request,make_responseapp=Flask(__name__)@app.route("/")deffunc0():news="这是一个完整的html页面"returnrender_template("index.html",......
  • jquery 特效专辑
     提示框弹窗类FaceboxFacebox是一个基于jQuery，Facebook-style的lightbox。能够展示示images，divs或者整个远程页面。FaceboxSimpleModalSimpleModal是一个轻量级jQuery插件提供了一个简单的接口来创建模式对话框。SimpleModaljTipjTip一个利用jQuery开发的提示......
  • QueryPath, php上的jQuery
      红得发紫的jQuery框架是专门用于页面Javascript程序设计的，它通过一种优雅的方式让我们轻松自如地操作页面的所有元素而无须担心浏览器版本以及兼容性等问题。受到jQuery的启发，一种试图让Web开发者在PHP中直接采用jQuery方式操纵和生成HTML/XML元素的QueryPath计划开始了，库的......
  • jQuery 操作select
    jQuery取得select选中的值   本来以为jQuery("#select1").val();是取得选中的值，       那么jQuery("#select1").text();就是取得的文本。       这是不正确的，正确做法是：       jQuery("#select1 option:selected").text();jQuery取得select选择......
  • jQuery隐式迭代
      ......
  • DOM对象和jquery对象互换
      ......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99