JavaWeb——jQuery总结

一：主要内容

1.1.下载

下载官网：<https://jquery.com/>，下载最新版本，我们一般选择开发版本

1.2.安装

将下载好的jQuery文件添加到我们项目的JS代码文件处即可

然后在页面中引入即可

<script src="js/jquery-3.6.0.js" type="text/javascript" ></script>

1.3.优点

提供了强大的功能函数
解决浏览器兼容性问题
实现了丰富的UI和插件
纠正错误的脚本知识

.......

1.4.Jquery核心

$符号在jQuery中代表对jQuery对象的引入，"jQuery"是核心对象。通过该对象可以获取JQuery对象，调用JQuery提供的方法等。只有jQuery对象才能调用jQuery提供的方法。

$ <==> jQuery

1.5.Dom对象与jQuery包装集对象

原始的DOM对象只有DOM接口提供的方法和属性，通过原生js代码获取的对象都是dom对象；而通过jQuery获取的对象是jQuery包装集对象，简称jQuery对象，只有JQuery对象才能调用JQuery提供的方法。

1.5.1.Dom对象

JavaScript中获取到的对象都是Dom对象，Dom只有有限的属性和方法。

var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");
//.....

1.5.2.jQuery包装集对象

可以说是Dom对象是扩充在jQuery的世界中所有的对象，无论是一个还是一组，都封装成一个jQuery包装集，比如获取包含一个的jQuery包装集（集合）：

var jQueryObject = $("#testDiv");

注：如果没引入jQuery文件会报错: $ is not defined

1.5.3.Dom对象转jQuery对象

Dom对象转为jQuery对象，只需要利用$()方法进行包装即可

var domDiv = document.getElementById("mydiv");  //获取Dom对象
mydiv = $(domDiv);

1.5.4.jQuery对象转Dom对象

jQuery对象转Dom对象，只需要取数组中的元素即可。

// 第一种方式 获取jQuery对象
var jqueryDiv = jQuery('#mydiv')
// 第二种方式 获取jQuery对象
jqueryDiv = $('#mydiv')
var dom = jqueryDiv[0]; // 将获取的jQuery对象转为Dom对象

通过遍历jQuery对象数组得到的对象是Dom对象，可以通过$()转为jQuery对象

$('#mydiv').each(function(){//遍历
		var jquery = $(this);
});

二：jQuery选择器

和使用JS操作Dom一样，获取文档中的节点对象是一个很频繁的操作，在jQuery中提供了简便的方式供我们查找|定位元素，称为jQuery选择器，选择器可以说是一个最考验人jQuery功力的地方，通俗的讲，Selector选择器就是"一个表示特殊语意的字符串"。只要把选择器字符串传入上面的方法中就能够选择不同的Dom对象并且以jQuery包装集的形式返回。

jQuery选择器按照功能主要分为"选择"和"过滤"。并且是配合使用的，具体分类如下。基础选择掌握即可，其它用到在查阅。

2.1.基础选择器

前三个重点：

选择器	名称	格式
id选择器	#id	$("#id属性值") \| 选择id为指定值的元素对象（如果有多个同名id，则以第一个为准） \| $("#testDiv")选择id为testDiv的元素
元素名称(标签)选择器	element	$("标签名/元素名") \| 选择所有指定标签的元素对象 \| $("div")选择所有div元素
类选择器	.class	$(".class属性值") \| 选择class为指定值的元素对象 \| $(".blue")选择所有class=blue的元素
选择所有元素	*	$("") \| 选择页面所有的元素对象 \| $("")选择页面所有元素
组合选择器	selector1,selector2,...	$("选择器1，选择器2,选择器3....") \| 选择指定选择器选中的对象 \| $("#testDiv,span,.blue")同时选中多个选择器匹配的元素

【参考代码】

<body>
		
		<div id="mydiv1">id选择器1<span>span中的内容</span></div>
		<div id="mydiv1" class="blue">元素选择器</div>
		<span class="blue">样式选择器</span>
			
	</body>
	
		<script src="js/jquery-3.6.0.js" type="text/javascript" ></script>
	<script type="text/javascript">
		// id选择器
		var mydiv = $("#mydiv1");
		console.log(mydiv);
		
		//类选择器
		var clas = $(".blue");
		console.log(clas);
		
		//元素选择器
		var spans = $("span");
		console.log(spans);
		
		//所有元素选择器
		var all = $("*");
		console.log(all);
		
		//组合选择器
		var group = $("#mydiv1,div,.blue");
		console.log(group);
		
 	</script>

2.2.层次选择器

前两个使用最多

选择器	名称	格式
后代选择器	ancestor descendant	$("父元素指定元素") \| 选择父元素的所有指定元素（包含第一代、第二代等） \| $("#parent div")选择id为parent的元素的所有div元素
子代选择器	parent > child	$("父元素 > 指定元素") \| 选择父元素的所有第一代指定元素 \| $("#parent>div")选择id为parent的直接div子元素
相邻选择器	prev + next	$("元素 + 指定元素") \| 选择元素的下一个指定元素（只会查找下一个挨着的同级元素，如果元素不存在，则获取不到） \| $(".blue+img")选择class类为blue的下一个img元素
同辈选择器	prev ~ sibling	$("元素 ~ 指定元素") \| 选择元素的下面的所有指定元素 \| $(".blue~img")选择class类为blue的之后的img元素

2.3.表单选择器

Forms	名称	描述
表单选择器	:input	查找所有input元素：$(":input"); 会匹配所有的input、textarea、select、和button元素
文本框选择器	:text	查找所有文本框：$(":text")
密码框选择器	:passward	查找所有密码框：$(":passward")
单选按钮选择器	:radio	查找所有单选按钮：$(":radio")
复选框选择器	:checkbox	查找所有复选框：$(":checkbox")
提交按钮选择器	:submit	查找所有提交按钮：$(":submit")
图像域选择器	:image	查找所有图像域：$(":image")
重置按钮选择器	:reset	查找所有重置按钮：$(":reset")
按钮选择器	:button	查找所有按钮：$(":button")
文件域选择器	:file	查找所有文件域：$(":file")

三：jQuery Dom操作

jQuery也提供了对HTML节点的操作，而且在原生js的基础上进行了优化，使用起来更加的方便。

常用的从几个方面来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的值以及属性；添加节点；删除节点；删除、添加、修改、设定节点的css样式等。

注：以下的操作方式只是用于jQuery对象。

3.1.操作元素的属性

attr()和prop()区别：

如果是固有属性，attr()和prop()方法均可操作
如果是自定义属性，attr()可操作prop()不可操作
如果返回值是boolean的属性
- 若设置了属性，attr()返回具体的值，prop()返回true
- 若未设置属性，attr()返回undefined，prop()返回false

3.1.1.获取属性

属性的分类：

固有属性：元素本身就有的属性（id、name、class、style...）
返回值是boolean的属性：checked、selected、disabled
自定义属性：用户自己定义的属性

方法	说明	举例
attr(属性名称)	获取指定的属性值，操作checkbook时，选中返回checked，没有选中返回undefined。	attr('checked') attr('name')
prop(属性名称)	获取具有true和false两个属性的属性值	prop('checked')

【参考代码】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<input type="checkbox" name="ch" id="aa" checked="checked" abc="aabbcc" />aa
		<input type="checkbox" name="ch" id="bb" />bb
		
	</body>
	
	<script src="js/jquery-3.6.0.js" type="text/javascript" ></script>
	<script type="text/javascript">
		/*获取属性*/
		//固有属性
		var name = $("#aa").attr("name");
		console.log(name);
		var name2 = $("#aa").prop("name");
		console.log(name2);
		
		//返回值是boolean的属性(元素设置了属性)
		var ck1 = $("#aa").attr("checked");
		console.log(ck1)//checked
		var ck2 = $("#aa").prop("checked");
		console.log(ck2)//true
		//返回值是boolean的属性(元素未设置属性)
		var ck1 = $("#bb").attr("checked");
		console.log(ck1)//undefined
		var ck2 = $("#bb").prop("checked");
		console.log(ck2)//false
		
		//自定义属性
		var abc1 = $("#aa").attr("abc");
		console.log(abc1);//aabbcc
		var abc2 = $("#aa").prop("abc");
		console.log(abc2);//undefined
	
	</script>
</html>

3.1.2.设置属性

attr("属性名"，"属性值")
prop("属性名"，"属性值")

【参考代码】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<input type="checkbox" name="ch" id="aa" checked="checked" abc="aabbcc" />aa
		<input type="checkbox" name="ch" id="bb" />bb
		
	</body>


<script src="js/jquery-3.6.0.js" type="text/javascript" ></script>
	<script type="text/javascript">
    	/*设置属性*/
		//固有属性
		$("#aa").attr("value","1");
		$("#bb").prop("value","2");
		
		//返回值是boolean的属性
		$("#bb").attr("checked","checked");
		$("#bb").prop("checked",false);		
		
		//自定义属性
		$("#aa").attr("uname","张三");
		$("#aa").prop("uage","18");//不能获取
		
	</script>
</html>

3.1.3.删除属性

removeAttr("属性名")

【参考代码】

		/*移除属性*/
		$("#aa").removeAttr("checked");

3.1.4.总结：

如果属性的类型是boolean（checked、selected、disabled），则使用prop()方法；否则使用attr()方法！

3.2.操作元素的样式

对于元素的样式，也是一种属性，由于样式用的特别多，所以对于样式除了当做属性处理外还可以有专门的方法进行处理。平时我们很少这样操作，一般我们直接在css样式中进行相关操作即可。

方法	说明
attr("class")	获取元素的class属性的值，即获取样式名称
attr("class","样式名")	修改class属性的值，修改样式
addClass("样式名")	添加样式
css()	添加具体样式
removeClass("样式名")	移除样式

增加元素的具体样式，格式：

css({ '样式名' : '样式值' , '样式名2' : '样式值2' })

例：$("#conRed").css({"font-family":"楷体","color":"green"});

css("样式名" , "样式值")

例：$("#conRed").css("font-size","100px");

【参考代码】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
				div {
					padding: 8px;
					width: 180px;
				}
				.bule {
					background-color: blue;
				}
				.larger {
					font-size: 30px;
				}
				.green {
					background-color: green;
				}	
				.pink{
					background-color: pink;
				}
				
		</style>
	</head>
	<body>
		
		<h3>css()方法设置元素样式</h3>
		<div id="conBlue" class="bule larger">天蓝色</div>
		<div id="conRed">大红色</div>
		<div id="remove" class="bule larger">天蓝色</div>
	</body>
	
	<script src="js/jquery-3.6.0.js" type="text/javascript" ></script>
	<script type="text/javascript">
		
		//attr("class")获取元素的class属性的值，即获取样式名称
		var cla = $("#conBlue").attr("class");
		console.log(cla);
		//attr("class","样式名")修改class属性的值，添加样式
		$("#conBlue").attr("class","green");
		
		//addClass("样式名")在原来的样式基础上添加样式，原本样式会保留；如果出现相同样式，则以样式中后定义的为准
		$("#conBlue").addClass("larger");
		$("#conBlue").addClass("pink");
		
		//css() 添加行内样式
		$("#conRed").css("font-size","100px");
		$("#conRed").css({"font-family":"楷体","color":"green"});
		
		//removeClass() 移除样式
		$("#remove").removeClass("larger");
	</script>
</html>

3.3.操作元素的内容(**)

对于元素还可以操作其中的内容，例如文本，值，甚至是html。常用html()方法和val()方法操作元素的内容.=。

方法	说明
html()	获取元素的内容，包含html标签（非表单元素）
html("内容")	设定元素的内容，包含html标签（非表单元素）
text()	获取元素的纯文本内容，不识别html标签（非表单元素）
text("text,内容")	设置元素的纯文本内容，不识别html标签（非表单元素）
val()	获取元素的value值（表单元素）
val("值")	设置元素的value值（表单元素）

表单元素：

文本框text、密码框password、单选框radio、复选框checkbox、隐藏域hidden、文本域textarea、下拉框select

非表单元素：

div、span、h1~h6、p、table、tr、td....

【参考代码】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作元素</title>
	</head>
	<body>	
		<h3><span>html()和text()方法设置元素内容</span></h3>
		<div id="html"></div>
		<div id="html2"></div>
		<div id="text"></div>
		<div id="text2"></div>
		<input type="text" name="uname" id="op" value="oop" />		
	</body>
	
	<script src="js/jquery-3.6.0.js" type="text/javascript" ></script>
	<script type="text/javascript">
		
	//html("内容") 	设定元素的html内容  
	$("#html").html("<h2>上海</h2>");
	$("#html2").html("上海");
	// html() 			获取元素的html内容 
	var html = $("#html").html();
	var html2 = $("#html2").html();
	console.log(html);//<h2>上海</h2>（标签）
	console.log(html2);//上海
	
	
	//text("内容")	设置元素的文本内容，不包含html
	$("#text").text("北京");
	$("#text2").text("<h2>hello</h2>");	// 字符串而不是标签内容
	
	//text()    	获取元素的文本内容，不包含html
	var txt = $("#text").text();
	var txt2 = $("#text2").text();
	console.log(txt);//北京
	console.log(txt2);//<h2>hello</h2>（字符串）
	
	//val()获取元素的value值（表单元素）
	var val = $("#op").val();
	console.log(val);
	//val("值")设置元素的value值（表单元素）
	$("#op").val("hello");
	
	</script>
</html>

3.4.创建元素

在jQuery中创建元素（jQuery对象）很简单，直接使用核心函数即可。

$('元素内容');

$('<p>this is a paragraph !!!</p>');

3.5.添加元素

前追加子元素
- 指定元素.prepend(内容)：在指定元素内部的最前面追加内容，内容可以是字符串、html元素或jQuery对象
- $(内容).prependTo(指定元素)：把内容追加到指定元素内部的最前面，内容可以是字符串、html元素或jQuery对象
后追加子元素
- 指定元素.append(内容)：在指定元素内部的最后面追加内容，内容可以是字符串、html元素或jQuery对象
- $(内容).appendTo(指定元素)：把内容追加到指定元素内部的最后面，内容可以是字符串、html元素或jQuery对象
前追加同级元素
- before()：在指定元素的前面追加内容
后追加同级元素
- after()：在指定元素的后面追加内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				margin: 10px 0px;
			}
			
			span {
				color: white;
				padding: 8px;
			}
			.red {
				background-color: red;
			}
			.blue {
				background-color: blue;
			}
			.green {
				background-color: green;
			}
			.pink {
				background-color: pink;
			}
			.black {
				background-color: black;
			}
			
			
		</style>
	</head>
	
	<body>
		<span class="red">篮球</span>
		<span class="blue">足球</span>
		<div class="green">
			<span>小明</span>
		</div>
	</body>
	<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	/*前追加子元素*/
	//创建元素
	var span1 = "<span>小红</span>";
	//得到指定元素，并在元素的内部最前面追加内容
	$(".green").prepend(span1);
	var span2 = "<span>小蓝</span>";
	$(span2).prependTo($(".green"));
	
	/*后追加子元素*/
	var span3 = "<span>哈哈</span>";
	var span4 = "<span>呵呵</span>";
	$(".green").append(span3);
	$(span4).appendTo($(".green"));	
	
	//将已存在内容追加到指定元素中
	$(".green").append($(".red"));
	
	/*前追加同级元素*/
	var span5 = "<span class='pink'>气排球</span>"
	$(".blue").before(span5);
	/*后追加同级元素*/
	var span6 = "<span class='black'>乒乓球</span>"
	$(".blue").after(span6);
	</script>

</html>

注：

在添加元素时，如果元素本身不存在（新建的元素）此时会将元素追加到指定位置；

如果元素本身已经存在（已有元素）此时会将原来的元素直接剪切到指定位置；

3.6.删除元素

方法	格式	说明
remove()	指定元素.remove()	删除元素及其指定的子元素，包括整个标签和内部
empty()	指定元素.empty()	清空所选元素的内容

3.7.遍历元素

each()

$(selector).each(function(index,element))：遍历元素

参数function为遍历时的回调函数

index为遍历元素的序列号，从0开始

element是当前元素，此时是dom元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			span {
				color: white;
				padding: 8px;
				margin: 5px;
				float: left;
			}
			.green {
				background-color: green;
			}
		</style>
	</head>
	<body>
		
		<h3>遍历元素each()</h3>
		<span class="green">小红</span>
		<span class="green">小明</span>
		<span class="green">小蓝</span>
		<span class="green">小绿</span>
	</body>
	<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//获取指定元素 并遍历
		$(".green").each(function(index,element){
			console.log(index);
			console.log(element);
			console.log(this);
			console.log($(this));//jquery对象
		});
	</script>
</html>

四：jQuery事件

4.1.ready加载事件

ready加载事件（预加载事件）当页面dom结构加载完毕后执行，类似于JS中的onLoad()事件

ready()可以写多个，按顺序执行

$(document).ready(function(){})等价于$(function(){})

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//console.log($("#p1")); 此时里面是空的（代码执行顺序 上到下）
			$(document).ready(function(){
				console.log($("#p1"));//当页面dom结构加载完毕后执行
			});
			
			$(function(){
				console.log("ready加载事件...");//当页面dom结构加载完毕后执行
			})
		</script>
	</head>
	
	<body>
		
		<p id="p1">嘿嘿嘿</p>
		
	</body>
</html>

注：一般我们都是将JS代码写在后面

4.2.绑定事件

为被选元素，添加一个或多个事件处理程序，并规定事件发生时运行的函数。

$(selector).bind(eventType[,evenData],handler(eventobject));

eventType：是一个字符串类型的事件类型，就是你所需要绑定的事件。这类类型包括：

blur,focus,focusin,focusout,load,resize,scroll,unload,click,dblclick

mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter

mouseleave,change,select,submit,keydown,keypress,keyup,error

[,evenData]：传递的参数，格式：{名:值 , 名2:值2}

handler(eventobject)：该事件触发执行的函数

【步骤】

确定为那些元素绑定事件——获取元素
绑定什么事件（事件类型）——第一个参数：事件的类型
相应事件触发的，执行的操作——第二个参数：函数

重点：掌握直接绑定的方式，单个或多个事件绑定！

4.2.1.绑定单个事件

格式：

bind()绑定：
	$("元素").bind("事件类型",function(){

    });
    
直接绑定：
	$("元素").事件名(function(){
	
	});

【参考代码】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<h3>bind()方法简单绑定事件</h3>
		<!-- style="cursor:pointer" 设置鼠标图标 -->
		<div id="test" style="cursor:pointer">点击查看名言</div>
		<input type="button" id="btntest" value="点击就不可用了" />
		
	</body>
	<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	
		// 绑定单个事件
		$("#test").bind("click",function(){
			console.log("天助自助者");
		});
/*	
		// 原生js绑定事件
		document.getElementById("test").onclick = function(){
			console.log("天助自助者....");
		}
*/	
		// 直接绑定
		$("#btntest").click(function(){
			//禁用按钮
			console.log(this);
			$(this).prop("disabled",true);
		});	
	</script>
</html>

4.2.2.绑定多个事件

格式：

		bind绑定
			1.同时为多个事件绑定同一个函数
			指定元素.bind("事件类型1 事件类型2 ...",function(){
				
			});
			2.为元素绑定多个事件，并设置对应的函数
			指定元素.bind("事件类型",function(){
				
			}).bind("事件类型",function(){
				
			});
			3.为元素绑定多个事件，并设置对应的函数
			指定元素.bind({
				"事件类型":function(){
					
				},
				"事件类型":function(){
					
				}				
							
			});
		直接绑定
			指定元素.事件名(function(){
				
			}).事件名(function(){
				
			});

【参考代码】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<button type="button"id="btn1">按钮1</button>
		<button type="button"id="btn2">按钮2</button>
		<button type="button"id="btn3">按钮3</button>
		<button type="button"id="btn4">按钮4</button>
		
	</body>
	<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//1.同时为多个事件绑定同一个函数
		$("#btn1").bind("click mouseout",function(){
			console.log("按钮1...");
		});
		//2.为元素绑定多个事件，并设置对应的函数
		
		$("#btn2").bind("click",function(){
			console.log("按钮2点击了...")
		}).bind("mouseout",function(){
			console.log("按钮2移开了...")
		});
		//3.为元素绑定多个事件，并设置对应的函数
		$("#btn3").bind({
			"click":function(){
				console.log("按钮3点击了...")
			},
			"mouseout":function(){
				console.log("按钮3移开了...")
			}				
		});
		//直接绑定
		$("#btn4").click(function(){
			console.log("按钮4点击了...")
		}).mouseout(function(){
			console.log("按钮4移开了...")
		});

	</script>
</html>

五：jQuery Ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。是一种异步无刷新技术，常结合dom进行

5.1.$.ajax

jQuery调用ajax方法：

格式：$.ajax({});

参数：

type：请求方式GET/POST

url：请求地址url

async：是否异步，默认是true表示异步

data：发送到服务器的数据

dataType：预期服务器返回的数据类型

contentType：设置请求头

success：请求成功时调用此函数

error：请求失败时调用此函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>$.ajax</title>
	</head>
	<body>
		
		<button type="button"id="btn">查询数据</button>
		
	</body>
	<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$.ajax({
			
			type:"get",
			url:"js/data.txt",
			data:{// 请求数据 json对象
				uname:"zhangsan"// 如果没有参数，则不需要设置
			},
			// 请求成功时调用的函数
			success:function(data){// data形参名，代表的是返回的数据
				console.log(data);// 字符串
				//将字符串转成json对象
				var obj = JSON.parse(data);
				console.log(obj);// 如果是json文件就不用再转了
				
			}	
		});
		/**
		 * 点击按钮，发送Ajax请求，将数据显示到页面中
		 */
		$("#btn").click(function(){
			$.ajax({
				
				type:"get",
				url:"js/data.txt",
				data:{// 请求数据 json对象
					uname:"zhangsan"// 如果没有参数，则不需要设置
				},
				//为了明确转不转我们可以使用dataType:"json"
				dataType:"json",//预期返回的数据类型，如果是json格式，在接收到返回的值时会自动封装成json对象
				// 请求成功时调用的函数
				success:function(data){// data形参名，代表的是返回的数据
					console.log(data);
					//将字符串转成json对象
					//var obj = JSON.parse(data);
					//console.log(obj);
					
					//dom操作
					//创建ul
					var ul = $("<ul></ul>");
					// 遍历返回的数据数组
					for(var i = 0; i < data.length; i++){
						//得到数组中的每一个元素
						var user = data[i];
						//将数组中的每一个元素放到li中
						//创建Li
						var li = "<li>"+ user.userName+"</li>";
						//将 li 放到ul中
						ul.append(li);
					}
					// 将ul 设置到body中
					$("body").append(ul);
				}	
			});
		});

	</script>
</html>

5.2.$.get

这是一个简单的GET请求功能以取代复杂的$.ajax。用法跟跟$.ajax一样，简化了语法而已

请求成功时可调用回调函数，如果需要在出错时执行函数，请使用$.ajax。

$.get();

语法：

$.get("请求地址" , "请求参数" , function(形参){

})

//	请求json文件        传递参数               拿到返回值	
	$.get("js/data.json",{name:"tom",age:100},function(data){
			console.log(data);
	});

5.3.$.post

这是一个简单的POST请求功能以取代复杂的$.ajax。

$.post();

语法：

$.post("请求地址" , "请求参数" , function(形参){

})

5.3.$.getJSON

表示请求返回的数据类型必须是JSON格式的ajax请求

$.getJSON();

语法：

$.getJSON("请求地址" , "请求参数" , function(形参){

})

注：getJSON方式要求返回的数据类型必须是json格式（json字符串）,如果返回的数据不是json格式，则无法获取。

	$.getJSON("js/data.json",{name:"tom",age:100},function(data){
			console.log(data); // 要求返回的数据格式是JSON格式
	});

posted @ 2021-08-25 16:44 时间最考验人阅读(83) 评论(0) 编辑收藏举报

刷新页面返回顶部

时间最考验人

JavaWeb——jQuery总结

一：主要内容

1.1.下载

1.2.安装

1.3.优点

1.4.Jquery核心

1.5.Dom对象与jQuery包装集对象

1.5.1.Dom对象

1.5.2.jQuery包装集对象

1.5.3.Dom对象转jQuery对象

1.5.4.jQuery对象转Dom对象

二：jQuery选择器

2.1.基础选择器

2.2.层次选择器

2.3.表单选择器

三：jQuery Dom操作

3.1.操作元素的属性

3.1.1.获取属性

3.1.2.设置属性

3.1.3.删除属性

3.1.4.总结：

3.2.操作元素的样式

3.3.操作元素的内容(**)

3.4.创建元素

3.5.添加元素

3.6.删除元素

3.7.遍历元素

四：jQuery事件

4.1.ready加载事件

4.2.绑定事件

4.2.1.绑定单个事件

4.2.2.绑定多个事件

五：jQuery Ajax

5.1.$.ajax

5.2.$.get

5.3.$.post

5.3.$.getJSON

公告