JQuery框架保姆级介绍

窗户上的玻璃

已于 2024-01-30 23:27:49 修改

阅读量803

点赞数 19

分类专栏：前端文章标签： jquery 前端 javascript

于 2024-01-30 23:24:52 首次发布

本文链接：https://blog.csdn.net/qq_57931698/article/details/135943545

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

介绍

jQuery是由美国人John Resig于2006年创建的一个开源项目，如今已发展成为集JavaScript、CSS、DOM、Ajax于一体的强大框架体系，它的主旨是：以更少的代码，实现更多的功能（Write less，do more）。

基本功能

访问和操作DOM元素
控制页面样式
对页面事件的处理
与Ajax技术的完美结合
大量插件在页面中的运用

开发环境

jQuery其实就是一个JavaScript文件，因此，搭建jQuery开发环境十分简单，只需准备一个jQuery文件jquery-1.8.2.js，使用的时候导入即可

基本语句

jQuery的页面加载事件：所有的HTML标签全部加载完毕后触发的事件
注意：jQuery的页面加载事件不会覆盖

//写法一
$(document).ready(function(){
	alert("HelloWorld...1");
	console.log("HelloWorld...1");
})

//写法二
$(function(){
	alert("HelloWorld...1");
	console.log("HelloWorld...1");
})

javascript的页面加载事件：所有的HTML标签和图片资源全部加载完毕后触发的事件

注意：JS的页面加载事件会覆盖

window.onload = function(){
	console.log("HelloWorld...1");
}

jQuery选择器

在页面中为某个元素添加样式或事件时，必须先准确地找到该元素——在jQuery库中，可以通过选择器实现这一重要的核心功能。

jQuery选择器的分类

基本选择器、层次选择器、过滤选择器（表单选择器）

基本选择器

基本选择器是jQuery中使用最频繁的选择器，它由元素ID、Class、标签名、多个选择符组成，通过基本选择器可以实现大多数页面元素的查找

选择器	名称	功能描述
$(“*”)	通配符选择器	匹配所有元素
$(“div”)	标签选择器	根据给定的元素名匹配所有元素
$(“.myClass”)	class选择器	根据给定的类匹配元素。
$(“#myId”)	ID选择器	根据给定的ID匹配一个元素。
$(“h2,h4,h6,p”)	群组选择器	将每一个选择器匹配到的元素合并后一起返回

层次选择器

层次选择器通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中某类关系可以方便快捷地定位元素

选择器	名称	功能描述
$(“form input”)	后代选择器	根据祖先元素匹配所有的后代元素
$(“form > input”)	子代选择器	给定的父元素下匹配所有的子元素
$(“li+ a”)	相邻兄弟选择器	匹配所有紧接在前一个li元素后的a元素
$(“ul~a”)	后续选择器	匹配前一个ul标签后面的所有兄弟元素

过滤选择器

简单过滤器

简单过滤选择器是使用最广泛的一种

选择器	功能描述
$(“li:first”)	获取第一个元素
$(“li:last”)	获取最后个元素
$(“li:not(:first)”)	获取不是所选择的元素
$(“li:even”)	匹配所有索引值为偶数的元素，从 0 开始计数
$(“li:odd”)	匹配所有索引值为奇数的元素，从 0 开始计数
$(“li:eq(2)”)	获取指定下标的元素
$(“li:gt(2)”)	获取大于指定下标的元素
$(“li:lt(2)”)	获取小于指定下标的元素
$(“:header”)	匹配如 h1, h2, h3之类的标题元素

	<ul>
		  <li>list item 1</li>
		  <li>list item 2</li>
		  <li>list item 3</li>
		  <li>list item 4</li>
		  <li>list item 5</li>
	</ul>

内容过滤器

内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位

选择器	功能描述
$(“div:contains(John)”)	选择包含指定内容的元素
$(“div:empty”)	选择空内容的元素
$(“div:has§”)	选择包含指定标签的元素
$(“div:parent”)	选择拥有子级元素的元素

		<div><p>Resig Sinclair</p></div>
		<div>John Resig</div>
		<div>George Martin</div>
		<div>Malcom John Sinclair</div>
		<div>J. Ohn</div>
		<div></div>
		<div></div>

可见性过滤选择器

可见性过滤选择器根据元素是否可见的特征获取元素

选择器	功能描述
$(“tr:hidden”)	选择隐藏的元素
(“tr:visible”)	选择显示（可见）的元素

<table>
	<tr style="display:none"><td>Value 1</td></tr>
	<tr><td>Value 2</td></tr>
</table>

属性过滤选择器

属性过滤选择器根据元素的某个属性获取元素，如ID号或匹配属性值的内容，并以“[”号开始、以“]”号结束

选择器	功能描述
$(“input[placeholder]”)	选择拥有指定属性的元素
$(“input[placeholder=‘请输入密码…’]”)	选择指定属性为特定的值的元素
$(“input[placeholder!=‘请输入密码…’]”)	选择除开指定属性为特定的值的元素
$(“input[placeholder^=‘请输入密’]”)	选择指定属性的值为某个内容开头的元素
$(" in p u t [pl a ce h o l d er$ =‘密码…’]")	选择指定属性的值为某个内容结尾的元素
$(“input[placeholder*=‘姓名’]”)	选择指定属性的值中包含某个内容的元素
$(“input[placeholder][id]”)	选择拥有多个指定属性的元素

<form action="服务器地址" method="get">
	账号：<input id="username" name="username" type="text" placeholder="请输入账号..." /><br />
	密码：<input id="password" name="password" type="password" placeholder="请输入密码..." /><br />
	确认密码：<input name="repassword" type="password" placeholder="请输入确认密码..." /><br />
	姓名：<input name="name" type="text" placeholder="请输入姓名..." /><br />
	性别：
		<input type="radio" name="sex" value="man" checked="checked"/>男
		<input type="radio" name="sex" value="woman"/>女
		<br />
	国籍：
		<select name="nationality">
			<option value="america">美国</option>
			<option value="britain">英国</option>
			<option value="france">法国</option>
			<option value="china" selected="selected">中国</option>
			<option value="japan">日本</option>
		</select>
		<br />
	爱好：
		<input type="checkbox" name="hobbies" value="football" checked="checked"/>足球
		<input type="checkbox" name="hobbies" value="basketball" />篮球
		<input type="checkbox" name="hobbies" value="shop" />购物
		<br />
			
		<input type="submit" value="注册" />
</form>

子元素过滤选择器

选择器	功能描述
$(“ul>li:nth-child(2)”)	选择其父元素下的第几个子元素
$(“ul>li:first-child”)	选择其父元素下的第一个子元素
$(“ul>li:last-child”)	选择其父元素下的最后一个子元素
$(“ul>li:only-child”)	选择其父元素仅有的一个子元素

		<ul>
		  <li>John</li>
		  <li>Karl</li>
		  <li>Brandon</li>
		</ul>
		
		<ul>
		  <li>Glen</li>
		  <li>Tane</li>
		  <li>Ralph</li>
		</ul>
		
		<ul>
		  <li>不教胡马度阴山</li>
		</ul>

表单选择器

在jQuery选择器中引入表单选择器，该选择器专为表单量身打造，通过它可以在页面中快速定位某表单对象

选择器	功能描述
$(“:input”)	选择所有的表单元素
$(“:text”)	匹配所有的单行文本框
$(“:password”)	匹配所有密码框
$(“:radio”)	匹配所有单选按钮
$(“:checkbox”)	匹配所有复选框
$(“:submit”)	匹配所有提交按钮
$(“:image”)	匹配所有图像域
$(“:button”)	匹配所有按钮
$(“:file”)	匹配所有文件域

<form action="服务器地址" method="get">
	账号：<input id="username" name="username" type="text" placeholder="请输入账号..." /><br />
	密码：<input id="password" name="password" type="password" placeholder="请输入密码..." /><br />
	确认密码：<input name="repassword" type="password" placeholder="请输入确认密码..." /><br />
	姓名：<input name="name" type="text" placeholder="请输入姓名..." /><br />
	性别：
		<input type="radio" name="sex" value="man" checked="checked"/>男
		<input type="radio" name="sex" value="woman"/>女
		<br />
	国籍：
		<select name="nationality">
			<option value="america">美国</option>
			<option value="britain">英国</option>
			<option value="france">法国</option>
			<option value="china" selected="selected">中国</option>
			<option value="japan">日本</option>
		</select>
		<br />
	爱好：
		<input type="checkbox" name="hobbies" value="football" checked="checked"/>足球
		<input type="checkbox" name="hobbies" value="basketball" />篮球
		<input type="checkbox" name="hobbies" value="shop" />购物
		<br />
			
		<input type="submit" value="注册" />
</form>

表单对象属性过滤选择器

表单对象属性过滤选择器通过表单中的某对象属性特征获取该类元素，如enabled、disabled、checked、selected属性

$(“input:enabled”)——匹配所有可用元素

$(“input:disabled”)——匹配所有不可用元素

	<form >
		<input type="text" disabled="disabled"  />
		<input type="text" />
	</form>

$(“input:checked”)——匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

$(“input[type=‘checkbox’]:checked”)

$(“input[type=‘radio’]:checked”)

$(“select option:selected”)——匹配所有选中的option元素

绑定监听器：$(“#head”).click(function() {})

设置CSS样式：$(“#content”).css(“color”, “red”);

获取到CSS 内key 的value: $(“#content”).css(“color”)

设置属性：$(“#head span img”).attr(“src”, “…/img/open.gif”);

获取到属性值：$(“#head span img”).attr(“src”);

设置内容：$(this).html(“更多”); $(this).text(“更多”);

获取内容：$(this).html(); $(this).text();

jQuery对象和DOM对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象

注意：jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法

$(function(){
		//JS对象转JQuery对象
		var h1 = document.getElementsByTagName("h1")[0];
				
		$(h1).click(function(){
			$(this).css("color","red");
			$(this).text("我本将心向明月");
		})	
})

	$(function(){
		//JQuery对象转JS对象
		var jsArr=$("h1");
				
		jsArr[0].οnclick=function(){
			this.innerText="我本将心向明月";
		}				
				
	})

jQuery操作DOM

元素内容和值

获取和设置元素内容

操作元素内容的方法包括html()和text()，比如文本框后面的提示信息

//获取元素内容
console.log($("#span01").text());
console.log($("#span02").html());
//设置元素内容
$("#span01").text("<h1>白日依山尽</h1>");
$("#span02").html("<h1>黄河入海流</h1>");
//获取元素值
console.log($("#password").val());
//设置元素值
$("#password").val("123456");

操作元素属性

获取元素属性：使用attr(name)方法获取元素的属性

设置元素的属性：通过attr(name,value)的方式设置元素的属性

删除元素的属性:使用removeAttr(name)方法可以将元素的属性删除

//获取元素属性
console.log($("img").attr("src"));
//设置元素的属性
$("img").attr("src","../img/网页头像.jpg");
//删除元素的属性
$("img").removeAttr("width");

操作元素样式（CSS）

在页面中，元素样式的操作包含：直接设置样式、增加CSS类别、删除类别、类别切换

调用css(name,value)方法直接设置元素的值

	$("span").click(function(){
		$(this).css("font-size","40px");
	})
				
	$("img").click(function(){
		$(this).css("width","100px");
		$(this).css("height","100px");
	})

	//style
	.big{
		width: 200px;
		height: 200px;
	}
	
	//方式一：使用removeClass()删除class，addClass("big")添加class
	$("img").click(function(){
		if($(this).attr("class")){
			$(this).removeClass();
		}else{
			$(this).addClass("big");
		}
	})
	
	//方式二：使用hasClass("big")判断获取到的元素有没有指定的class
	$("img").click(function(){
		if($(this).hasClass("big")){
			$(this).removeClass();
		}else{
			$(this).addClass("big");
		}
	})
	
	//方式三：toggleClass("big");的效果和方式一效果一样
	$("img").click(function(){
		$(this).toggleClass("big");
	})

通过addClass()方法增加元素类别的名称

removeClass()方法则用于删除类别，有多个类别时用空格隔开。如果不选名称，则删除元素中的所有类

通过toggleClass()方法切换不同的元素类别，如果存在（不存在）就删除（添加）一个类

操作元素节点

使用$(html)函数动态创建节点元素

函数$(html)只完成DOM元素创建，加入到页面还需要通过元素节点的插入或追加操作；同时，在创建DOM元素时，要注意字符标记是否完全闭合，否则达不到预期效果。

		<button id="btn01">添加图片</button>
		<button id="btn02">删除图片</button>
		<br />
		<div id="manager">
			<img src="../img/网页头像1.jpg" width="50px" height="50px" />
		</div>
		
		
		
		$("#btn01").click(function(){
			var img =$("<img src='../img/网页头像4.jpg' width='50px' height='50px' />");
			//添加至div末尾——父子关系
			//$(img).appendTo($("#manager"));
			//$("#manager").append($(img));
					
			//添加至div头部——父子关系
			//$(img).prependTo($("#manager"));
			//$("#manager").prepend($(img));
					
			//添加至div末尾——相邻兄弟关系
			//$(img).insertAfter($("#manager"));
			//$("#manager").after($(img));
					
			//添加至div头部——相邻兄弟关系
			//$(img).insertBefore($("#manager"));
			$("#manager").before($(img));
		})


		$("#btn02").click(function(){
			$("img:first").remove();
		})

遍历元素

在DOM元素操作中，有时需要对同一标记的全部元素进行统一操作。在传统的JavaScript中，先获取元素的总长度，然后以for循环语句递减总长度，访问其中的某个元素，代码相对复杂；而在jQuery中，可以直接使用each(callback)方法实现元素的遍历。

		$("img").each(function(){
			$(this).click(function(){
				$(this).attr("src","../img/网页头像4.jpg")
			})
		})

jQuery事件

众所周知，页面在加载时，会触发Load事件。当用户单击某个按钮时，触发该按钮的Click事件，通过种种事件实现各项功能或执行某项操作。事件在元素对象与功能代码中起着重要的桥梁作用

事件冒泡现象

事件在触发后分为两个阶段，一个是捕获（Capture），另一个则是冒泡（Bubbling）；但大多数浏览器并不是都支持捕获阶段，jQuery也不支持。因此在事件触发后，往往执行冒泡过程。所谓的冒泡其实质就是事件执行中的顺序。

在页面中创建一个＜div＞标记，并在该标记中创建一个按钮。当用户单击页面或者＜div＞标记或者按钮时会弹出”白日依山尽“，紧接着还会弹出”黄河入海流“。

冒泡现象就是从子级元素一层层往上传递事件的现象。

		<div id="div">
			<input type="button"  id="btn" value="普通按钮" />
		</div>

		//JQuery
		$(function(){
			$("#div").click(function(){
				alert("黄河入海流");
			})
				
			$("#btn").click(function(){
				alert("白日依山尽");
			})
		})

如何阻止冒泡的发生

在jQuery中，可以通过even.stopPropagation()方法可以阻止冒泡过程的发生。

还可以通过语句return false实现停止事件的冒泡过程

	$("#btn").click(function(even){
		alert("白日依山尽");
					
		//阻止冒泡现象方案一：添加一个even
		//even表示事件本身
		//even.stopPropagation();
					
		//方案二：无需添加even
		return false;
	})

绑定事件和解绑事件

使用bind()方法绑定事件

bind()功能是为每个选择元素的事件绑定处理函数，其语法格式如下：bind(type,[data],fn)

使用unbind()方法解绑事件

unbind()方法移除元素绑定事件unbind(type,[fn]])

其中参数type为一个或多个类型的字符串，如"click"或"change"，是为JQuery中的各种事件（监听器）的名称。

	<input type="button" value="解绑事件" id="btn" />
	<img src="../img/泰迪.jpg" width="100px" height="100px" />

	//JQuery
		$(function(){
			//绑定事件：可以绑定多个事件，且多个事件功能一致
			$("img").bind("click mouseover",function(){
				console.log("白日依山尽");
			})
				
			//解绑事件：可以指定解绑某个事件
			$("#btn").click(function(){
				$("img").unbind("mouseover");
			})
		})

上述绑定事件的方式所有的事件都只能做同一个功能，有限制性，还有另一种绑定方式，使用json格式的对象；

		$("img").bind({
			click:function(){
				console.log("白日依山尽");
			},
			mouseover:function(){
				console.log("黄河入海流");
			}
		})

切换事件

hover()方法

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态

一个鼠标事件控制移入和移出，在显示和隐藏之间来回切换

	<img src="../img/泰迪.jpg" width="100px" height="100px" />

	//JQuery
    $(function(){
        $("img").hover(
            function(){
                $("img").css("display","none");
            },

            function(){
                $("img").css("display","block");
            }
        )
    })

toggle()方法

在toggle()方法中，可以依次调用N个指定的函数，直到最后一个函数，然后重复对这些函数轮番调用。

toggle()方法是单击实现切换。

点击一张图片，点击第一次，展示第二张，点击第二次，展示第三张，点击第三次又回到第一张图片

	<img src="../img/网页头像1.jpg" width="100px" height="100px" />

	//JQuery
	$(function(){
		$("img").toggle(
			function(){
				$(this).attr("src","../img/网页头像2.jpg")
			},
					
			function(){
				$(this).attr("src","../img/网页头像3.jpg")
			},
					
			function(){
				$(this).attr("src","../img/网页头像1.jpg")
			}
		)
	})

ps:以上是JQuery相对与JavaScript特有的事件，其他事件与JavaScript基本一致，JavaScript有的事件JQuery都有，JavaScript的事件都会有个“on”，比如“onclick”，JQuery中的事件就是把“on”去掉，比如“click”。

jQuery动画

jQuery中众多的动画与特效方法为提高页面的用户体验度带来了极大的方便，通过少量的几行代码，就可以实现元素的飞动、淡入淡出等动画效果，还可以自定义各种动画效果。

显示与隐藏

	<input type="button" id="btn" value="显示与隐藏" />
	<br />
	<img src="../img/网页头像3.jpg" width="100px" height="100px" />

	//JQuery
	$(function(){
		//方式一：
		$("#btn").toggle(
			function(){
				$("img").hide(5000);
			},
					
			function(){
				$("img").show(5000);
			}
		)
		
		//方式二：
		//可以自动实现显示和隐藏的来回切换
		$("#btn").click(function(){
			$("img").toggle(3000);
		})
	})

滑动

要实现元素的滑动效果，需要调用jQuery中的两个方法，一个是slideDown()，另一个是slideUp()

	<input type="button" id="btn" value="滑动" />
	<br />
	<img src="../img/网页头像3.jpg" width="100px" height="100px" />
	
	//JQuery
	$(function(){
		//方式一：
		$("#btn").toggle(
			function(){
				$("img").slideUp(3000);
			},
					
			function(){
				$("img").slideDown(3000);
			}
		)
		
		//方式二：
		//可以自动实现滑上和滑下的来回切换
		$("#btn").click(function(){
			$("img").slideToggle(3000);
		})
	})

淡入淡出

show()和hide()方法与fadeIn()和fadeOut()方法相比较，相同之处是都切换元素的显示状态，不同之处在于，前者的动画效果使用元素的width与height属性都发生了变化，而后者仅是改变元素的透明度，并不修改其他属性。

	<input type="button" id="btn" value="滑动" />
	<br />
	<img src="../img/网页头像3.jpg" width="100px" height="100px" />
	
	//JQuery
	$(function(){
		//方式一：
		$("#btn").toggle(
			function(){
				$("img").fadeOut(3000);
			},
					
			function(){
				$("img").fadeIn(3000);
			}
		)
		
		//方式二：
		//可以自动实现淡入淡出的来回切换
		$("#btn").click(function(){
			$("img").fadeToggle(3000);
		})
	})

自定义动画

上面几节介绍的动画效果都是元素局部属性发生变化，如高度、宽度、可见性等。在jQuery中，也允许用户自定义动画效果，通过使用animate()方法，可以制作出效果更优雅、动作更复杂的页面动画效果

**实现效果：**当点击图层的时候，图层的宽度变为200px,高度为100px字体大小为50px，共经历3秒完成

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.divFrame {
				border: solid 1px #ccc;
				background-color: #eee;
				width: 60px;
				height: 60px;
				font-size: 13px;
				padding: 5px
			}
		</style>
		<script type="text/javascript" src="../js/jquery-1.8.2.js">
		</script>
		<script type="text/javascript">
            //JQuery
			$(function() {
				$("div").click(function(){
					$(this).animate(
						{
							"width":"200px",
							"height":"100px"
						},
						3000,
						function(){
							$(this).css("font-size","50px");
						}
					)
				})
			})
		</script>
	</head>

	<body>
		<div class="divFrame">
			点击变大
		</div>
	</body>
</html>

animate()方法中有三个参数，{“width”:“200px”,“height”:“100px”}——元素要变化到的目标状态；3000——间隔时间，单位为毫秒；function(){$(this).css(“font-size”,“50px”);}——元素动画完成后执行的方法。

Ajax

加载获取服务端的数据

加载整个html页面-load方法

在jQuery中，使用load()方法可以轻松实现获取异步数据的功能

语法：load(url, [data], [callback])

参数url为被加载的页面地址，可选项[data]参数表示发送到服务器的数据，其格式为key/value。另一个可选项[callback]参数表示加载成功后，返回至加载页的回调函数

案例：使用load加载数据-load方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>	
		<script type="text/javascript">
			$(function(){
				$("#btn").click(function(){
					$("div").load("page.html");
				})
			})
		</script>
	</head>
	<body>
		<input type="button" id="btn" value="普通按钮" />
		<br />
		<div>
		</div>
	</body>
</html>

getJSON

虽然使用load()方法可以很快地加载数据到页面中，但有时我们需要只是部分数据为了解决这个问题，我们采用将要获取的数据另存为一种轻量极的数据交互格式，即JSON文件格式

getJSON(url, [data], [callback])

参数url表示请求的地址，可选项[data]参数表示发送到服务器的数据，其格式为key/value。另外一个可选项[callback]参数表示加载成功时执行的回调函数

**案例：**创建一个JSON格式的文件students.json，用于保存学员资料信息，另外，新建一个页面，当单击页面中的“获取数据”按钮时，将通过全局函数getJSON()获取文件students.json中的全部数据，并展示在页面中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>	
		<script type="text/javascript">
			$(function(){
				$("#btn").click(function(){
					获取json文件的数据
					$.getJSON("jsonFile.json",function(data){
						var jsonArr = eval(data);//解析json格式的字符串
						var str="";
						for (var i = 0; i < jsonArr.length; i++) {
							str+=jsonArr[i].name;
							str+="--";
							str+=jsonArr[i].age;
							str+="<br/>";
						}
						$("div").html(str);
					})
				})
			})
		</script>
	</head>
	<body>
		<input type="button" id="btn" value="普通按钮" />
		<br />
		<div>
		</div>
	</body>
</html>

//json文件
[
	{"name":"小冯","age":22},
	{"name":"小杜","age":23}
]

getScript()

除通过全局函数getJSON获取JSON格式的文件内容外，还可以通过另外一个全局函数getScript()获取JS文件的内容

案例：将上述的代码抽取到一个js中，然后来加载js实现数据的加载

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>	
		<script type="text/javascript">
			$(function(){
				$("#btn").click(function(){
		
					$.getScript("jsFile.js");//获取JS文件的内容
				})
			})
		</script>
	</head>
	<body>
		<input type="button" id="btn" value="普通按钮" />
		<br />
		<div>
		</div>
	</body>
</html>

		//JavaScript-js文件
		$.getJSON("jsonFile.json",function(data){
			var jsonArr = eval(date);
			var str="";
			for (var i = 0; i < jsonArr.length; i++) {
				str+=jsonArr[i].name;
				str+="--";
				str+=jsonArr[i].age;
				str+="<br/>";
			}
						
			$("div").html(str);
		})

异步加载XML文档

在日常的页面开发中，有时也会遇到使用XML文档保存数据的情况，对于这种格式的数据，jQuery中使用全局函数$.get()进行访问，其调用的语法格式为：

jQuery.get(url, [data], [callback], [type])

参数url表示等待加载的数据地址，可选项[data]参数表示发送到服务器的数据，其格式为key/value，可选项[callback]参数表示加载成功时执行的回调函数，可选项[type]参数表示返回数据的格式，如HTML、XML、JS、JSON、TEXT

案例：通过get来获取XML文件的数据，并遍历展示数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>	
		<script type="text/javascript">
			$(function(){
				$("#btn").click(function(){
					
                    //获取XML文件的数据
					$.get("xmlFile.xml",function(data){
						var str="";
						$(data).find("Student").each(function(){
							var name = $(this).find("name").text();
							var age = $(this).find("age").text();
							str+=name;
							str+="--";
							str+=age;
							str+="<br/>";
						})
						$("div").html(str);
					})
				})
			})
		</script>
	</head>
	<body>
		<input type="button" id="btn" value="普通按钮" />
		<br />
		<div>
		</div>
	</body>
</html>

<Students>
	<Student>
		<name>小冯</name>
		<age>22</age>
	</Student>
	<Student>
		<name>小杜</name>
		<age>23</age>
	</Student>
</Students>

跟服务端进行交互

前面都只是单纯获取到数据，现在我们需要客户端也可以给服务端传递数据

get方法

以json的方式向后端传递数据案例：用户名的唯一校验

	$("#username").blur(function (){
        var username = $(this).val();
		$.get(
              "StudentController?action=isRegister",//uri地址
              {"username":username},//传值
              function (data){//回调函数即响应返回数据
                 var text = data;
                 if (text=="1"){
                    $("#registerInfo").css("color","green");
                    $("#registerInfo").text("账号有效")
                    registerFrom=true;
                 }else if (text=="-1"){
                    $("#registerInfo").css("color","red");
                    $("#registerInfo").text("账号已存在")
                    registerFrom=false;
                 }
           }
        )
	}


    <form id="registerForm" action="StudentController?action=doRegister" method="post" enctype="multipart/form-data" onsubmit="registerFrom()">
        账号：<input type="text" name="username" placeholder="请输入账号" id="username"><span id="registerInfo"></span>
        <br/>
        密码：<input type="password" name="password" placeholder="请输入密码"><br/>
        姓名：<input type="text" name="name" placeholder="请输入姓名"><br/>
        年龄：<input type="number" name="age" placeholder="请输入年龄"><br/>
        <input type="button" value="注册" id="registerBtn">
    </form>

    //后台
	public void isRegister(HttpServletRequest request, HttpServletResponse response) throws IOException {
        boolean register = studentService.isRegister(request, response);
        if(register){
            response.getWriter().write("1");
        }else {
            response.getWriter().write("-1");
        }
    }

post方法

serialize()序列化表单

在使用全局函数 $. g e t () 和$ .post()向服务器传递参数时，其中的参数是通过名称属性逐个搜索输入字段的方式进行传输的，如果表单的输入字段过多，这种方式就比较麻烦，而且不利于拓展。为了解决这个问题，jQuery引入serialize()方法，该方法可以简化参数传值的方式返回值:String serialize()

该方法的功能是将所选择的DOM元素转换成能随Ajax传递的字符串，即序列化所选择的DOM元素

     $("#username").blur(function (){
        var username = $(this).val();
		$.post(
              "StudentController?action=isRegister",//uri地址
              $("#registerForm").serialize(),//序列化表单
              function (data){//回调函数即响应返回数据
                 var text = data;
                 if (text=="1"){
                    $("#registerInfo").css("color","green");
                    $("#registerInfo").text("账号有效")
                    registerFrom=true;
                 }else if (text=="-1"){
                    $("#registerInfo").css("color","red");
                    $("#registerInfo").text("账号已存在")
                    registerFrom=false;
                 }
           }
        )
	}

<form id="registerForm" action="StudentController?action=doRegister" method="post" enctype="multipart/form-data" onsubmit="registerFrom()">
        账号：<input type="text" name="username" placeholder="请输入账号" id="username"><span id="registerInfo"></span>
        <br/>
        密码：<input type="password" name="password" placeholder="请输入密码"><br/>
        姓名：<input type="text" name="name" placeholder="请输入姓名"><br/>
        年龄：<input type="number" name="age" placeholder="请输入年龄"><br/>
        性别：
        <input type="radio" name="sex" value="man" checked="checked">男
        <input type="radio" name="sex" value="woman">女<br/>
        爱好：
            <input type="checkbox" name="hobbies" value="football">足球
            <input type="checkbox" name="hobbies" value="basketball">篮球
            <input type="checkbox" name="hobbies" value="shop">购物
        <br/>
        籍贯：
        <select name="province" id="province">
            <option value="default">--请选择--</option>
        </select>省
        <select name="city" id="city">
            <option value="default" >--请选择--</option>
        </select>市
        <br/>
        头像：<input type="file" name="photo" accept="image/*"/>
        <br/>
        <input type="button" value="注册" id="registerBtn">
        <input type="button" value="返回" id="backBtn" onclick="fun01()">
    </form>

$.ajax()方法

除了可以使用全局性函数load()、get()、post()实现页面的异步调用和与服务器交互数据外，在jQuery中，还有一个功能更为强悍的最底层的方法$.ajax()，该方法不仅可以方便地实现上述三个全局函数完成的功能，更多地关注实现过程中的细节

jQuery.ajax(url,[settings])

列举几个常用的回调函数

如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、success、complete。

beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）
success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

更多完整信息请参考API文档

案例：页面通过按钮来加载数据，当点击加载时，首先出现正在加载的提示信息，当加载完毕后，提示加载完毕，并展示加载的信息

			$("#registerBtn").click(function (){
                if(registerFrom){
                    $.ajax({
                        type:"post",
                        url:"StudentController?action=doRegister",
                        data:$("#registerForm").serialize(),
                        async:true,
                        success:function (data){
                            alert(data);
                        },
						error:function(){
							alert("服务器有点赖床");
						}
						beforSend:function(){
							$("div").html("<img src='img/Loading.gif'>");
						}
                    })
                }
            })

jQuery.ajax(url,[settings])

列举几个常用的回调函数

如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、success、complete。

beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）
success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

更多完整信息请参考API文档

案例：页面通过按钮来加载数据，当点击加载时，首先出现正在加载的提示信息，当加载完毕后，提示加载完毕，并展示加载的信息

			$("#registerBtn").click(function (){
                if(registerFrom){
                    $.ajax({
                        type:"post",
                        url:"StudentController?action=doRegister",
                        data:$("#registerForm").serialize(),
                        async:true,
                        success:function (data){
                            alert(data);
                        },
						error:function(){
							alert("服务器有点赖床");
						}
						beforSend:function(){
							$("div").html("<img src='img/Loading.gif'>");
						}
                    })
                }
            })

窗户上的玻璃

关注

19
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
JQuery框架保姆级介绍

jQuery是由美国人John Resig于2006年创建的一个开源项目，如今已发展成为集JavaScript、CSS、DOM、Ajax于一体的强大框架体系，它的主旨是：以更少的代码，实现更多的功能（Write less，do more）。
复制链接

扫一扫