前端学习总结4：Jquery

最新推荐文章于 2022-07-17 08:00:00 发布

想要腹肌的熊

最新推荐文章于 2022-07-17 08:00:00 发布

阅读量231

点赞数

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

本文链接：https://blog.csdn.net/qq_41907769/article/details/123317718

版权

前端基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

@TOC

1、概念

jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改

2、jQuery的安装

2.1 jQuery的版本

jQuery版本有很多，分为1.x 2.x 3.x

1.x版本：能够兼容IE678浏览器

2.x版本：不兼容IE678浏览器

1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。

3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678），国内多数网站还在使用1.x的版本

2.2 jQuery的下载

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

3、jQuery语法结构

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作（actions）

3.1 基础语法： $(selector).action()

说明：$ 定义 jQuery

选择符（selector）"查询"和"查找" HTML 元素

jQuery 的 action() 执行对元素的操作

3.2 文档就绪事件

文档就绪事件，实际就是文件加载事件

如果在文档没有完全加载之前就运行函数，操作可能失败。所以我们尽可能将所有的操作都在文档加载完毕之后实现。

$(document).ready(function(){
	// 开始写 jQuery 代码...
});

$(function(){
	// 开始写 jQuery 代码...
});

	window.onload	$(document).ready()
执行次数	只能执行一次，如果执行第二次，第一次的执行会被覆盖	可用执行多次，不会覆盖之前的执行
执行时机	必须等待网页全部加载挖完毕（包括图片等），然后再执行包裹的代码	只需要等待网页中的DOM结果加载完毕就可以执行包裹的代码
简写方式	无	$(function(){ });

4、jQuery选择器

jQuery 中所有选择器都以美元符号开头：$()

4.1 元素/标签选择器

jQuery 元素选择器基于元素/标签名选取元素

语法：$(“标签名称”)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
		<script>
			// 文档就绪事件
			$(document).ready(function() {
				//编写jQuery
			});

			$(function() {
				// 1.标签选择器,获取所有div元素集合
				var divList = $("div");
				console.log(divList); // jQuery对象
				console.log(divList.length);
				for (var i = 0; i < divList.length; i++) {
					console.log(divList[i]); //js对象
					console.log($(divList[i])); //js转换jQuery对象
				}
			});
		</script>
	</head>
	<body>
		<div>div1</div>
		<div>div2</div>
		<div>div3</div>
	</body>
</html>

4.2 #id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以在页面中选取唯一的元素需要通过 #id 选择器

$("#p1")

4.3 .class 选择器

jQuery 类选择器可以通过指定的 class 查找元素

$(".myclass")

4.4 全局选择器

匹配所有元素

$("*")

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.1.js">

		</script>
		<script type="text/javascript">
			$(function() {
				// idSelector();
				// classSelector();
				allSelector()
			});
			
			// 全局选择器 $("*")
			function allSelector(){
				var p = $("*");
				console.log(p);
				console.log(p.length);
			}
			
			// class选择器 $(".class名称")
			function classSelector(){
				var p = $(".c2");
				console.log(p);
			}
			
			// id选择器 $("#id名称")
			function idSelector(){
				var p = $("#p1");
				console.log(p.html());
			}
		</script>
	</head>
	<body>
		<div id="p1">divasdadas1</div>
		<div class="c2">div2</div>
		<div>div3</div>
	</body>
</html>

4.5 并集选择器

将每一个选择器匹配到的元素合并后一起返回

$("div,ul,li,.mydiv")

4.6 后代选择器

在给定的祖先元素下匹配所有的后代元素

$("form input")

4.7 子选择器

在给定的父元素下匹配所有的子元素

$("form > input")

4.8 相邻选择器

匹配所有紧接在 prev 元素后的 next 元素

$("label + input")

4.9 同辈选择器

匹配 prev 元素之后的所有 siblings 元素

$("form ~ input")

4.10 属性选择器

匹配包含指定属性的元素

$("div[id]");//获取所有有id属性的div的元素集合

$("div[class]");//获取所有有class属性的div的元素集合

$("input[name='userName']");//获取所有input标签中name属性是userName元素的集合

$("input[name^='user']");//获取所有input标签中name属性是user开头的元素的集合

$("input[name$='user']");//获取所有input标签中name属性是user结尾的元素的集合

$("input[name*='user']");//获取所有input标签中name属性包含了user的元素的集合

$("input[id][name^='user']");

4.11 可见性选择器

匹配所有的可见或不可见的元素

$("div:visible");$("input:hidden");

4.12 所有选择器的案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.1.js">

		</script>
		<script type="text/javascript">
			$(function() {
				// andSelector()
				// subSelector();
				// sunSelector();
				// nextSelector();
				// sublingsSelector();
				// attrSelector();
				seeSelector();
			});

			//5. 并集选择器
			function andSelector() {
				var list = $(".mydiv,p,li");
				printList(list);
			}

			// 6.后代选择器:包括所有的后代，儿子和孙子辈都有
			function subSelector() {
				var list = $("form input");
				printList(list);
			}
			//7、 子选择器： 只有子元素
			function sunSelector() {
				var list = $("form>input");
				printList(list);
			}
			//8、相邻选择器
			function nextSelector() {
				var list = $("label + input");
				printList(list);
			}
			//9、同辈选择器
			function sublingsSelector() {
				var list = $("form ~ div");
				printList(list);
			}
			//10、属性选择器
			function attrSelector() {
				var list = $("div[id]"); //获取所有有id属性的div的元素集合
				list = $("div[class]"); //获取所有有class属性的div的元素集合
				list = $("input[name='userName']"); //获取所有input标签中name属性是userName元素的集合
				list = $("input[name^='user']"); //获取所有input标签中name属性是user开头的元素的集合
				list = $("input[name$='user']"); //获取所有input标签中name属性是user结尾的元素的集合
				list = $("input[name*='user']"); //获取所有input标签中name属性包含了user的元素的集合
				list = $("input[id][name^='user']"); //获取所有input标签中既有id属性又有name属性以user开头的元素的集合
				list = $("input[id][name^='user']"); //获取所有input标签中既有id属性又有name属性以user开头的元素的集合
				printList(list);
			}
			//11、可见性选择器
			function seeSelector() {
				//匹配所有的可见div元素
				var list = $("div:visible");
				//匹配所有的不可见div元素
				var list = $("div:hidden");
				//匹配所有的不可见input元素,样式有display：none的元素和 type=hidden 的元素
				list = $("input:hidden");
				printList(list);
			}

			function printList(list) {
				for (var i = 0; i < list.length; i++) {
					console.log(list[i]);
					console.log(list[i].innerHTML); //非表单项元素使用该种方式输出
					console.log(list[i].value); //只有表单项元素才有value
				}
			}
		</script>
	</head>
	<body>
		<form>
			<label>用户名：</label>
			<input type="hidden" name="userId" value="1001" />
			<input style="display: none;" value="隐藏的input" />
			<input id="userName" name="userName" value="jiaobaoyu" /><br />
			<label>密码：</label>
			<input name="userPass" type="password" value="1234567" /><br />
			<fieldset>
				电话：<input id="phone" name="phoneuser" value="13712345789" /><br />
				邮箱：<input name="emailuser" type="email" value="lina@sina.com" />
			</fieldset>
		</form>
		地址：<input name="addressuser1" value="北京" /><br />
		<ul>
			<li>li111111</li>
			<li>li111111</li>
			<li>li111111</li>
		</ul>
		<p id="p1">p111111111111</p>
		<div id="div1" class="mydiv" style="display: none;">div1</div>
		<div class="mydiv">div2</div>
		<div id="div3">div3</div>
	</body>
</html>

5、jQuery常用函数

与标签内容相关函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.1.min.js">

		</script>
		<style type="text/css">
			.redBg {
				background-color: red;
			}

			.fontColor {
				color: gold;
			}
		</style>
		<script type="text/javascript">
			// 1.与内容相关的函数
			function textFun() {
				//获取的是第一个匹配元素的围堵标签中的所有内容，包括了嵌套在内部的标签
				var str1 = $("div").html();
				console.log(str1);
				//获取的是第一个匹配元素的围堵标签中的所有文本， 不包含标签的内容
				var str2 = $("div").text();
				console.log(str2);
				//val()只能用在表单项元素中，div不是表单元素，所以val()获取不到任何内容
				var str3=$("div").val();
				//input是表单项元素，val()可以获取到
				var str4=$("input").val();
				console.log(str3);
				console.log(str4);
			}

			$(function() {
				textFun();
			});
		</script>
	</head>
	<body>
		<button type="button" onclick="changeCss()">切换div样式</button>

		性别：<input type="radio" value="0" name="gender" checked="checked" />女
		<input type="radio" value="1" name="gender" />男

		<img src="img/a.png" title="服不服" />

		<div>div1<button type="button">普通按钮1</button></div>
		<div>div2<button type="button">普通按钮2</button></div>
		<input name="userName" value="贾宝玉" />
		<input name="password" value="123456" />
	</body>
</html>

与标签属性相关函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.1.min.js">

		</script>
		<style type="text/css">
			.redBg {
				background-color: red;
			}

			.fontColor {
				color: gold;
			}
		</style>
		<script type="text/javascript">
			//2、与属性相关的函数
			function attrFun() {
				var img = $("img");
				//设置属性
				img.attr("src", "img/cat.jpg");
				img.attr("title", "不服！");
				//移除属性
				img.removeAttr("title");
				//获取属性
				var src = img.attr("src");
				var title = img.attr("title");
				console.log(src + "====" + title);
				//获取checked属性使用prop函数，获取到的值是boolean类型，表示是否被选中
				var list = $("input[type='radio']");
				for (var i = 0; i < list.length; i++) {
					var flag = $(list[i]).prop("checked");
					console.log("checked=" + flag);
				}
			}
			$(function() {
				// textFun();
				attrFun();
			});
		</script>
	</head>
	<body>
		<button type="button" onclick="changeCss()">切换div样式</button>

		性别：<input type="radio" value="0" name="gender" checked="checked" />女
		<input type="radio" value="1" name="gender" />男

		<img src="img/a.png" title="服不服" />

		<div>div1<button type="button">普通按钮1</button></div>
		<div>div2<button type="button">普通按钮2</button></div>
		<input name="userName" value="贾宝玉" />
		<input name="password" value="123456" />
	</body>
</html>

与标签样式相关函数

得到一个列表，获取只会匹配到第一个

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.1.min.js">

		</script>
		<style type="text/css">
			.redBg {
				background-color: red;
			}

			.fontColor {
				color: gold;
			}
		</style>
		<script type="text/javascript">
			//3、与css相关的函数
			function cssFun() {
				//给获取的元素添加、删除、切换已有的样式 PS：样式一定是在样式表中提前定义好的, 可以添加删除多个属性
				$("div").addClass("redBg");
				$("div").addClass("redBg fontColor");
				$("div").removeClass("fontColor");
				$("div").removeClass(); //没有参数的时候直接移除所有的样式
				//$("div").toggleClass("fontColor");//匹配元素如果有当前的样式就删除，如果没有就添加
				//给所有的元素添加样式，样式直接添加，无需提前定义
				$("input").css("border-color", "blue");
				$("input").css({
					"color": "red",
					"border-color": "green"
				});
			}
			function changeCss() {
				//匹配元素如果有当前的样式就删除，如果没有就添加
				$("div").toggleClass("fontColor"); 
			}
			$(function() {
				// textFun();
				// attrFun();
				cssFun();
			});
		</script>
	</head>
	<body>
		<button type="button" onclick="changeCss()">切换div样式</button>

		性别：<input type="radio" value="0" name="gender" checked="checked" />女
		<input type="radio" value="1" name="gender" />男

		<img src="img/a.png" title="服不服" />

		<div>div1<button type="button">普通按钮1</button></div>
		<div>div2<button type="button">普通按钮2</button></div>
		<input name="userName" value="贾宝玉" />
		<input name="password" value="123456" />
	</body>
</html>

6、JQuery与js对象的转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./js/jquery-1.11.1.js">
			$(function() {
				//获取所有的div元素的集合
				var list = $("div");
				//遍历集合
				for (var i = 0; i < list.length; i++) {
					//list[i] 是js对象，打印出来是HTMLxxxElement格式的对象都是js对象，
					//操作的时候都要遵循js对象的操作方法,例如获取元素内容使用innerHTML属性
					console.log(list[i]);

					//将js对象转换为jQuery对象，可以使用所有jQuery方法，,例如获取元素内容使用html()函数
					console.log($(list[i]));
				}
			});
		</script>
	</head>
	<body>
		<div>div1</div>
		<div>div2</div>
	</body>
</html>

7、JQuery中的事件

7.1 常用DOM事件列表

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keydown	submit	load
dblclick	keyup	change
mouseover	focus
mouseout	blur
hover

7.2常用的 jQuery 事件方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./js/jquery-1.11.1.js">
		</script>
		<script type="text/javascript">
			//页面加载事件
			$(function() {
				// 给所有的button绑定单击事件
				$("button").click(function() {
					//alert(this);//this是当前对象，哪个按钮触发的单击事件this就是那个按钮， this此时是JS对象
					$(this).css("color", "red"); //给当前的触发对象添加一个css
				});
				
				// 给所有的超链接绑定鼠标移上事件
				$("a").mouseover(function() {
					var str = $(this).html();
					$(this).html("鼠标移上-" + str);
				});
				
				// 给所有的超链接绑定鼠标移出事件
				$("a").mouseout(function() {
					var str = $(this).html();
					$(this).html(str.substr(5));
				});
				$("a").hover(function() {
					$(this).css("color", "red");
				});
			});
		</script>
	</head>
	<body>
		<a href="#">首页</a> &nbsp;
		<a href="#">零食</a> &nbsp;
		<a href="#">鲜花</a> &nbsp;
		<button type="button">普通按钮1</button>
		<button type="button">普通按钮2</button>
		<button type="button">普通按钮3</button>
	</body>
</html>

8、jQuery操作DOM

8.1 元素的增加

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./js/jquery-1.11.1.js">

		</script>
		<style type="text/css">
			div {
				background: lavenderblush;
				padding: 20px;
			}

			p {
				background: lemonchiffon;
				padding: 20px;
			}
		</style>
		<script type="text/javascript">
			$(function() {
				// append() - 在被选元素的结尾插入内容
				$("#btn1").click(function() {
					$("div").append("<br>新添加的文本</br>");
					$("div").append("<p>新添加的段落</p>");
				});
				//prepend() - 在被选元素的开头插入内容
				$("#btn2").click(function() {
					$("div").prepend("<br/>新添加的文本<br/>");
					$("div").prepend("<p>新添加的段落</p>");
				});
				//after() - 在被选元素之后插入内容
				$("#btn3").click(function() {
					$("div").after("<br/>新添加的文本<br/>");
					$("div").after("<p>新添加的段落</p>");
				});
				//before() - 在被选元素之前插入内容
				$("#btn4").click(function() {
					$("div").before("<br/>新添加的文本<br/>");
					$("div").before("<p>新添加的段落</p>");
				});
			});
		</script>
	</head>
	<body>
		<button id="btn1">append</button>
		<button id="btn2">prepend</button>
		<button id="btn3">after</button>
		<button id="btn4">before</button>
		<div>
			div1
		</div>
		<p>p1</p>
	</body>
</html>

8.2 元素的克隆

clone(boolean)-克隆匹配的DOM元素并且选中这些克隆的副本
语法：$(selector).clone(includeEvents)；
参数：可选。布尔值。规定是否复制元素的所有事件处理。默认地，副本中不包含事件处理器。

8.3 元素的替换

replaceWith() -将所有匹配的元素替换成指定的HTML或DOM元素。
replaceAll()-用匹配的元素替换掉所有selector 匹配到的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文档处理--元素替换</title>
		<style>
			div{
				background: lavenderblush;
				padding: 20px;
			}
			p{
				background: lemonchiffon;
				padding: 20px;
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script>
			$(function(){
				//replaceWith() -将所有匹配的元素替换成指定的HTML或DOM元素。
				$("#btn1").click(function(){
					//$("div").replaceWith("<br/>新替换的文本<br/>");
					$("div").replaceWith("<p>新替换的段落</p>");//所有的div被后面的参数替换掉
				});
				//replaceAll()-用匹配的元素替换掉所有 selector匹配到的元素。
				$("#btn2").click(function(){
					$("<div>新的div</div>").replaceAll("p");//用前面的内容替换掉所有的段落p
				});
				
			});
		</script>
	</head>
	<body>
		<button id="btn1">replaceWith</button>
		<button id="btn2">replaceWithAll</button>
		
		<div>
			div1
		</div>
		<br />
		<div>
			div2
		</div>
		<p>p1</p>
		<p>p2</p>
	</body>
</html>

8.4 元素的删除

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文档处理--元素删除</title>
		<style>
			div{
				background: lavenderblush;
				padding: 20px;
			}
			p{
				background: lemonchiffon;
				padding: 20px;
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script>
			$(function(){
				//remove() - 删除被选元素（及其子元素）
				$("#btn1").click(function(){
					$("div").remove();//所有的div元素及其子元素被删除
				});
				
				//remove(筛选条件) - 删除符合筛选条件的元素
				$("#btn2").click(function(){
					$("div").remove(".test");//所有的div元素中引用了class="test"的div被删除
				});
				
				//empty() - 从被选元素中删除子元素 
				$("#btn3").click(function(){
					$("div").empty();//删除div中的所有子元素
				});
			});
		</script>
	</head>
	<body>
		<button id="btn1">remove()</button>
		<button id="btn2">remove(筛选条件)</button>
		<button id="btn3">empty()</button>
		<div>
			div1
			<p>div1中的段落1</p>
			<p>div1中的段落2</p>
			<span style="background: lightblue; padding: 10px;">div1中的span</span>
		</div>
		<br/>
		<div class="test">
			div2			
		</div>
		
		<p>p1</p>
		
	</body>
</html>

9、jQuery效果

9.1 隐藏和显示

$(*selector*).hide([speed,callback]);

$(*selector*).show([speed,callback]);

$(*selector*).toggle([speed,callback]);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>效果-隐藏和显示</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<style>
			div{
				background: lightblue;
				padding: 20px;
			}
			p{
				background: lavenderblush;
				padding: 20px;
			}
		</style>
		<script>
			$(function(){
				$("#btnHide").click(function(){
                    // 直接隐藏
					//$("div").hide();
                    // 隐藏速度为2秒
					//$("div").hide(2000);
                    // 隐藏速度为2秒，隐藏后并调用alert函数
					$("div").hide(2000,function(){
						alert("隐藏完成！");
					});
				});
				
				$("#btnShow").click(function(){
					//$("div").show();
					//$("div").show(2000);
					$("div").show(2000,function(){
						alert("显示完成！");
					});
				});
				
				$("#btnToggle").click(function(){
					//$("p").toggle();
					//$("p").toggle(2000);
					$("p").toggle(2000,function(){
						alert("切换完成！");
					});
				});
			});
		</script>
	</head>
	<body>
		<button id="btnHide">隐藏-div</button>
		<button id="btnShow">显示-div</button>
		<button id="btnToggle">切换显示和隐藏-p</button>
		
		<div>div1</div>
		<br/>
		<div>div2</div>
		<p style="display: none;">p1</p>
		<p>p2</p>
	</body>
</html>

9.2 淡入和淡出

$(*selector*).fadeIn([speed,callback]);
$(*selector*).fadeOut([speed,callback]);
$(*selector*).fadeToggle([speed,callback]);

参数说明：

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>效果-淡入淡出</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<style>
			div{
				background: lightblue;
				padding: 20px;
			}
			p{
				background: lavenderblush;
				padding: 20px;
			}
		</style>
		<script>
            // 页面载入事件
			$(function(){
                // 获取到按钮，click函数
				$("#btnHide").click(function(){
					//$("div").fadeIn();
					//$("div").fadeIn(2000);
					$("div").fadeIn(2000,function(){
						alert("淡入完成！");
					});
				});
				
				$("#btnShow").click(function(){
					//$("div").fadeOut();
					//$("div").fadeOut(2000);
					$("div").fadeOut(2000,function(){
						alert("淡出完成！");
					});
				});
				
				$("#btnToggle").click(function(){
					//$("p").fadeToggle();
					//$("p").fadeToggle(2000);
					$("p").fadeToggle(2000,function(){
						alert("切换完成！");
					});
				});
			});
		</script>
	</head>
	<body>
		<button id="btnHide">淡入-div</button>
		<button id="btnShow">淡出-div</button>
		<button id="btnToggle">切换淡入淡出-P</button>
		
		<div>div1</div>
		<br/>
		<div>div2</div>
		<p style="display: none;">p1</p>
		<p>p2</p>
	</body>
</html>

10、基于jQuery实现表单验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./js/jquery-1.11.1.js">

		</script>
		<script type="text/javascript">
			// 1. 用户名验证
			function isUserName() {
				var val = $("input[name='userName']").val();
				if (val == "") {
					$("span[id='userNameMsg']").html("用户名不能为空！").css("color", "red");
					return false;
				} else if (/^[a-zA-z]\w{5,}/.test(val) == false) {
					$("span[id='userNameMsg']").html("用户名不合法！").css("color", "red");
					return false;
				}
				$("span[id='userNameMsg']").html("用户名可用！").css("color", "green");
				return true;
			}

			// 2. 验证密码
			function isPwd() {
				var val = $("input[name='pwd1']").val();
				if (val.length < 8) {
					$("span[id='pwd1Msg']").html("密码长度至少8位").css("color", "red");
					return false;
				} else if (val == "") {
					$("span[id='pwd1Msg']").html("密码不能为空！").css("color", "red");
					return false;
				}
				$("span[id='pwd1Msg']").html("密码格式正确！").css("color", "green");
				return true;
			}

			// 3. 确认密码
			function isPwd2() {
				if ($("input[name='pwd1']").val() != $("input[name='pwd2']").val()) {
					$("span[id='pwd2Msg']").html("两次密码不一致！").css("color", "red");
					return false;
				}
				$("span[id='pwd2Msg']").html("OK！").css("color", "green");
				return true;
			}
			/*校验电话码格式-座机或者手机 */
			function isTelCode(str) {
				var reg = /^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/;
				if (reg.test(str)) {
					$("span[id='phoneMsg']").html("OK！").css("color", "green");
					return true;
				}
				$("span[id='phoneMsg']").html("电话格式不合法！").css("color", "red");
				return false;
			}
			/*校验是否选择了性别*/
			function isGender() {
				var val = $("select[name='gender']").val();
				if (val == -1) {
					alert("请选择性别！");
					return false;
				}
				return true;
			}
			/*校验邮件地址是否合法 */
			function IsEmail(str) {
				var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
				if (reg.test(str)) {
					$("span[id='emailMsg']").html("OK！").css("color", "green");
					return true;
				}
				$("span[id='emailMsg']").html("邮箱地址不合法！").css("color", "red");
				return false;
			}
			$(function() {
				$("input[name='userName']").blur(function() {
					isUserName();
				});
				$("input[name='pwd1']").blur(function() {
					isPwd();
				});
				$("input[name='pwd2']").blur(function() {
					isPwd2();
				});
				$("input[name='phone']").blur(function() {
					isTelCode();
				});
				$("input[name='email']").blur(function() {
					IsEmail();
				});
				$("#myForm").submit(function() {
					return isUserName() && isPwd() && isPwd2() && isGender() && isTelCode() && IsEmail();
				});
			});
		</script>
	</head>
	<body>
		<h1>英雄会注册</h1>
		<form id="myForm" action="提交.html" method="get">
			*用户名: <input type="text" name="userName" placeholder="请输入用户名">
			<span id="userNameMsg">用户名长度至少6位,只能包含数字、字母、下划线，必须以字母开头</span><br />
			*密码: <input type="password" name="pwd1" placeholder="请输入密码" required>
			<span id="pwd1Msg">密码长度至少8位</span><br />
			*确认密码: <input type="password" name="pwd2" placeholder="请确认密码" required>
			<span id="pwd2Msg">确认密码与密码一致</span><br />
			*性别: <select id="gender" required>
				<option value="-1">请选择性别</option>
				<option value="0">女</option>
				<option value="1">男</option>
			</select> <br>
			*电话号码: <input type="phone" required><span id="phoneMsg"></span><br />
			*邮箱: <input name="email" type="email" required><span id="emailMsg"></span><br />
			<button type="submit">注册</button>
			<button type="reset">重置</button><br>

		</form>
	</body>
</html>

11、jQuery案例

11.1 全选/全不选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./js/jquery-1.11.1.js">

		</script>
		<script type="text/javascript">
			// 页面加载事件
			$(function() {
				//1. 全选
				$("#all").click(function() {
					var flag = $(this).prop("checked");
					var oneList = $("input[name='one']");
					for (var i = 0; i < oneList.length; i++) {
						$(oneList[i]).prop("checked", flag);
					}
				});

				// 单个按钮的点击事件
				// 1.当所有单击按钮
				$("input[name='one']").click(function() {
					var oneList = $("input[name='one']");
					for (var i = 0; i < oneList.length; i++) {
						if (!$(oneList[i]).prop("checked")) {
							$("#all").prop("checked", false);
							return;
						}
					}
					$("#all").prop("checked", true);
				});
			});
		</script>
	</head>
	<body>
		<table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%" height="160px">
			<tr>
				<th>全选<input id="all" type="checkbox" /></th>
				<th>序号</th>
				<th>名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>总计</th>
			</tr>
			<tr>
				<td><input name="one" type="checkbox" /></td>
				<td>1</td>
				<td>小熊饼干1</td>
				<td>￥125</td>
				<td>1</td>
				<td>￥125</td>
			</tr>
			<tr>
				<td><input name="one" type="checkbox" /></td>
				<td>2</td>
				<td>小熊饼干2</td>
				<td>￥125</td>
				<td>1</td>
				<td>￥125</td>
			</tr>
			<tr>
				<td><input name="one" type="checkbox" /></td>
				<td>3</td>
				<td>小熊饼干3</td>
				<td>￥125</td>
				<td>1</td>
				<td>￥125</td>
			</tr>
		</table>
	</body>
</html>

11.2 动态时间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动态时间</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script>
			function showTime(){
				var time=new Date();
				var y=time.getFullYear();
				var mon=time.getMonth()+1;//0-11
				var d=time.getDate();
				
				var h=time.getHours();
				var m=time.getMinutes();
				var s=time.getSeconds();
				
				$("#myTime").html(y+"年"+mon+"月"+d+"日    "+h+":"+m+":"+s);
			}
			
			function showTime2(){
				var time=new Date();
				var y=time.getFullYear();
				var mon=time.getMonth()+1;//0-11
				var d=time.getDate();
				
				var h=time.getHours();
				var m=time.getMinutes();
				var s=time.getSeconds();
				
				$("#myTime2").html(y+"年"+mon+"月"+d+"日    "+h+":"+m+":"+s);
				clock2=window.setTimeout("showTime2()",1000);
			}
			
			//变量定义的位置：两个函数中都调用了，所以需要定义成全局变量
			var clock2=window.setTimeout("showTime2()",1000);
			//页面加载事件
			$(function(){
			
				//定时器
				var clock1=window.setInterval("showTime()",1000);			
				
				
				$("#btn1").click(function(){
					window.clearInterval(clock1);
				});
				
				$("#btn2").click(function(){
					window.clearTimeout(clock2);
				});
			});
			
			
		</script>
	</head>
	<body>
		<button id="btn1">停止</button>
		<div id="myTime">
			
		</div>	
		
		<button id="btn2">停止2</button>
		<div id="myTime2">
			
		</div>	
	</body>
</html>

11.3 动态表格

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>动态表格</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
		<style>
			td,
			th {
				padding: 10px;
			}
		</style>
		<script>
			$(function() {
				$("#blBtn").click(function() {
					//获取表格的jQuery对象
					var tab = $("#myTable");
					//获取表格的所有行
					//浏览器默认将所有的行tr放在tbody标签中，所以tab.children()获取到的是他body
					//tab.children().children()获取的才是tbody中的所有的tr
					var trArr = tab.children().children();
					for (var i = 0; i < trArr.length; i++) {
						var str = "";
						var trObj = $(trArr[i]); //将每一行的js对象转换为jQuery的对象
						//获取当前行中的所有的单元格
						var tdArr = $(trObj.children());
						for (var j = 0; j < tdArr.length; j++) {
							var tdObj = $(tdArr[j]);
							var html = tdObj.html(); //获取每个单元格围堵标签中的所有内容
							str += html + "==";
						}
						console.log(str);
					}
				});

				$("#addBtn").click(function() {
					var tab = $("#myTable");
					var num = parseInt(Math.random() * 10) + 1;
					var tr = '<tr>' +
						'<td>' + num + '</td>' +
						'<td>小熊饼干' + num + '</td>' +
						'<td>￥125</td>' +
						'<td>1</td>' +
						'<td><button name="delBtn">删除</button></td>' +
						'</tr>';
					tab.append(tr);
				});

				//这种绑定事件的方式对于动态添加的元素不生效
				/*$("button[name='delBtn']").click(function(){
					$(this).parent().parent().remove();
				});*/

				//动态添加的元素绑定事件的方式
				$(document).on("click", "button[name='delBtn']", function() {
					$(this).parent().parent().remove();
				});
			});
		</script>
	</head>

	<body>
		<button type="button" id="blBtn">遍历表格</button>
		<button type="button" id="addBtn">添加</button>
		<table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%" style="text-align: center;">
			<tr>
				<th>序号</th>
				<th>名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>总计</th>
			</tr>
			<tr>
				<td>1</td>
				<td>小熊饼干1</td>
				<td>￥125</td>
				<td>1</td>
				<td><button name="delBtn">删除</button></td>
			</tr>
			<tr>
				<td>2</td>
				<td>小熊饼干2</td>
				<td>￥125</td>
				<td>1</td>
				<td><button name="delBtn">删除</button></td>
			</tr>
		</table>
	</body>

</html>

11.4 省市级联

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>省市级联</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
	</head>
	<body>
		<select id="province">
			<option>--请选择省份--</option>
			<option value="0">北京</option>
			<option value="1">浙江省</option>
			<option value="2">河北省</option>
			<option value="3">广东省</option>
		</select>
		<select id="city">
			
		</select>
	</body>
</html>
<script>
		$(function(){
			//创建二维数组存储省份和对应的城市
			var province=new Array();
			province[0] = new Array("朝阳区", "海淀区", "东城区", "西城区");
			province[1] = new Array("杭州市", "嘉兴市", "宁波市", "绍兴市");
			province[2] = new Array("石家庄市", "唐山市", "承德市", "张家口市");
			province[3] = new Array("广州市", "惠州市", "深圳市", "茂名市");
			
			//给省的下拉列表框绑定改变事件
			$("#province").change(function(){
				var proVal=$(this).val();//获取选择的省对应的value值
				//alert(proVal);
				//根据省的value值获取省对应的城市的集合
				var cityArr=province[proVal];
				//获取到城市的下拉框				
				var str="";
				for(var i=0;i<cityArr.length;i++){
					str+='<option value="'+cityArr[i]+'">'+cityArr[i]+'</option>';
				}
				var citySelete=$("#city");
				citySelete.html(str);
			});
			
		});
		
		
</script>

jQuery的事件方法

方法	描述
bind()	向元素添加事件处理程序
blur()	添加/触发失去焦点事件
change()	添加/触发 change 事件
click()	添加/触发 click 事件
dblclick()	添加/触发 double click 事件
delegate()	向匹配元素的当前或未来的子元素添加处理程序
die()	在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序
error()	在版本 1.8 中被废弃。添加/触发 error 事件
event.currentTarget	在事件冒泡阶段内的当前 DOM 元素
event.data	包含当前执行的处理程序被绑定时传递到事件方法的可选数据
event.delegateTarget	返回当前调用的 jQuery 事件处理程序所添加的元素
event.isDefaultPrevented()	返回指定的 event 对象上是否调用了 event.preventDefault()
event.isImmediatePropagationStopped()	返回指定的 event 对象上是否调用了 event.stopImmediatePropagation()
event.isPropagationStopped()	返回指定的 event 对象上是否调用了 event.stopPropagation()
event.namespace	返回当事件被触发时指定的命名空间
event.pageX	返回相对于文档左边缘的鼠标位置
event.pageY	返回相对于文档上边缘的鼠标位置
event.preventDefault()	阻止事件的默认行为
event.relatedTarget	返回当鼠标移动时哪个元素进入或退出
event.result	包含由被指定事件触发的事件处理程序返回的最后一个值
event.stopImmediatePropagation()	阻止其他事件处理程序被调用
event.stopPropagation()	阻止事件向上冒泡到 DOM 树，阻止任何父处理程序被事件通知
event.target	返回哪个 DOM 元素触发事件
event.timeStamp	返回从 1970 年 1 月 1 日到事件被触发时的毫秒数
event.type	返回哪种事件类型被触发
event.which	返回指定事件上哪个键盘键或鼠标按钮被按下
event.metaKey	事件触发时 META 键是否被按下
focus()	添加/触发 focus 事件
focusin()	添加事件处理程序到 focusin 事件
focusout()	添加事件处理程序到 focusout 事件
hover()	添加两个事件处理程序到 hover 事件
keydown()	添加/触发 keydown 事件
keypress()	添加/触发 keypress 事件
keyup()	添加/触发 keyup 事件
live()	在版本 1.9 中被移除。添加一个或多个事件处理程序到当前或未来的被选元素
load()	在版本 1.8 中被废弃。添加一个事件处理程序到 load 事件
mousedown()	添加/触发 mousedown 事件
mouseenter()	添加/触发 mouseenter 事件
mouseleave()	添加/触发 mouseleave 事件
mousemove()	添加/触发 mousemove 事件
mouseout()	添加/触发 mouseout 事件
mouseover()	添加/触发 mouseover 事件
mouseup()	添加/触发 mouseup 事件
off()	移除通过 on() 方法添加的事件处理程序
on()	向元素添加事件处理程序
one()	向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次
$.proxy()	接受一个已有的函数，并返回一个带特定上下文的新的函数
ready()	规定当 DOM 完全加载时要执行的函数
resize()	添加/触发 resize 事件
scroll()	添加/触发 scroll 事件
select()	添加/触发 select 事件
submit()	添加/触发 submit 事件
toggle()	在版本 1.9 中被移除。添加 click 事件之间要切换的两个或多个函数
trigger()	触发绑定到被选元素的所有事件
triggerHandler()	触发绑定到被选元素的指定事件上的所有函数
unbind()	从被选元素上移除添加的事件处理程序
undelegate()	从现在或未来的被选元素上移除事件处理程序
unload()	在版本 1.8 中被废弃。添加事件处理程序到 unload 事件
contextmenu()	添加事件处理程序到 contextmenu 事件
$.holdReady()	用于暂停或恢复.ready() 事件的执行

jQuery选择器参考手册

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id=“lastname” 的元素
.class	$(".intro")	class=“intro” 的所有元素
.class,.class	$(".intro,.demo")	class 为 “intro” 或 “demo” 的所有元素
element	$(“p”)	所有元素
el1,el2,el3	$(“h1,div,p”)	所有、和元素

:first	$(“p:first”)	第一个元素
:last	$(“p:last”)	最后一个元素
:even	$(“tr:even”)	所有偶数
:odd	$(“tr:odd”)	所有奇数

:first-child	$(“p:first-child”)	属于其父元素的第一个子元素的所有元素
:first-of-type	$(“p:first-of-type”)	属于其父元素的第一个元素的所有元素
:last-child	$(“p:last-child”)	属于其父元素的最后一个子元素的所有元素
:last-of-type	$(“p:last-of-type”)	属于其父元素的最后一个元素的所有元素
:nth-child(n)	$(“p:nth-child(2)”)	属于其父元素的第二个子元素的所有元素
:nth-last-child(n)	$(“p:nth-last-child(2)”)	属于其父元素的第二个子元素的所有元素，从最后一个子元素开始计数
:nth-of-type(n)	$(“p:nth-of-type(2)”)	属于其父元素的第二个元素的所有元素
:nth-last-of-type(n)	$(“p:nth-last-of-type(2)”)	属于其父元素的第二个元素的所有元素，从最后一个子元素开始计数
:only-child	$(“p:only-child”)	属于其父元素的唯一子元素的所有元素
:only-of-type	$(“p:only-of-type”)	属于其父元素的特定类型的唯一子元素的所有元素

parent > child	$(“div > p”)	元素的直接子元素的所有元素
parent descendant	$(“div p”)	元素的后代的所有元素
element + next	$(“div + p”)	每个元素相邻的下一个元素
element ~ siblings	$(“div ~ p”)	元素同级的所有元素

:eq(index)	$(“ul li:eq(3)”)	列表中的第四个元素（index 值从 0 开始）
:gt(no)	$(“ul li:gt(3)”)	列举 index 大于 3 的元素
:lt(no)	$(“ul li:lt(3)”)	列举 index 小于 3 的元素
:not(selector)	$(“input:not(:empty)”)	所有不为空的输入元素

:header	$(":header")	所有标题元素 , …
:animated	$(":animated")	所有动画元素
:focus	$(":focus")	当前具有焦点的元素
:contains(text)	$(":contains(‘Hello’)")	所有包含文本 “Hello” 的元素
:has(selector)	$(“div:has§”)	所有包含有元素在其内的元素
:empty	$(":empty")	所有空元素
:parent	$(":parent")	匹配所有含有子元素或者文本的父元素。
:hidden	$(“p:hidden”)	所有隐藏的元素
:visible	$(“table:visible”)	所有可见的表格
:root	$(":root")	文档的根元素
:lang(language)	$(“p:lang(de)”)	所有 lang 属性值为 “de” 的元素

[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href=‘default.htm’]")	所有带有 href 属性且值等于 “default.htm” 的元素
[attribute!=value]	$("[href!=‘default.htm’]")	所有带有 href 属性且值不等于 “default.htm” 的元素
[attribute$=value]\|$("[href$=’.jpg’]")	所有带有 href 属性且值以 “.jpg” 结尾的元素
[attribute\|=value]	$("[title\|=‘Tomorrow’]")	所有带有 title 属性且值等于 ‘Tomorrow’ 或者以 ‘Tomorrow’ 后跟连接符作为开头的字符串
[attribute^=value]	$("[title^=‘Tom’]")	所有带有 title 属性且值以 “Tom” 开头的元素
[attribute~=value]	$("[title~=‘hello’]")	所有带有 title 属性且值包含单词 “hello” 的元素
[attribute=value*]	$("[title*=‘hello’]")	所有带有 title 属性且值包含字符串 “hello” 的元素
[name=value][name2=value2]	$( “inputid” )	带有 id 属性，并且 name 属性以 man 结尾的输入框

:input	$(":input")	所有 input 元素
:text	$(":text")	所有带有 type=“text” 的 input 元素
:password	$(":password")	所有带有 type=“password” 的 input 元素
:radio	$(":radio")	所有带有 type=“radio” 的 input 元素
:checkbox	$(":checkbox")	所有带有 type=“checkbox” 的 input 元素
:submit	$(":submit")	所有带有 type=“submit” 的 input 元素
:reset	$(":reset")	所有带有 type=“reset” 的 input 元素
:button	$(":button")	所有带有 type=“button” 的 input 元素
:image	$(":image")	所有带有 type=“image” 的 input 元素
:file	$(":file")	所有带有 type=“file” 的 input 元素
:enabled	$(":enabled")	所有启用的元素
:disabled	$(":disabled")	所有禁用的元素
:selected	$(":selected")	所有选定的下拉列表元素
:checked	$(":checked")	所有选中的复选框选项
.selector	$(selector).selector	在jQuery 1.7中已经不被赞成使用。返回传给jQuery()的原始选择器
:target	$( “p:target” )	选择器将选中ID和URI中一个格式化的标识符相匹配的元素

元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。