Web前端： JQuery最强总结（每个要点都附带完全案例详细代码！）

2021-04-07 14:24 340人阅读评论(0)

Web前端基础：

Web前端工具：

JQuery最强总结

概念
- 知识框架
安装
jQuery语法结构
- 基础语法
- 文档就绪事件
jQuery选择器
jQuery常用函数
jQuery与js对象的转换
jQuery中的事件
- 常用DOM事件列表
- 常用的 jQuery 事件方法
jQuery操作DOM
jQuery效果
- 隐藏和显示
- 淡入和淡出
基于jQuery实现表单验证
jQuery案例

概念

jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery库包含以下功能:

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

提示: 除此之外，jQuery还提供了大量的插件。
目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。

知识框架

安装

版本问题

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的版本

该总结中所用版本为1.1的版本

下载

jQuery有两个版本:

生成环境使用的和开发测试环境使用的。 
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发(未压缩，是可读的代码)

以上两个版本都可以从 jquery.com 中下载。

这里给个国内的下载地址：
JQuery 下载

jQuery的使用

jQuery 库是一个 JavaScript 文件，我们可以直接在 HTML页面中通过script 标签引用它，跟引用自己的外部JavaScript脚本文件一样的语法。

//将第一步中下载好的jQuery资源包进行解压，然后就可以饮用解压好的.js文件
<head>
    <script src="jquery-1.11.1.js"></script>
</head>了。

jQuery语法结构

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

基础语法

$(selector).action()
说明:美元符号定义 jQuery 
	选择符(selector)"查询"和"查找" HTML 元素 
	jQuery 的 action() 执行对元素的操作

文档就绪事件

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

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

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

写法一：

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

写法二：

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

jQuery的ready方法与JavaScript中的onload相似，但是也有区别 :

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

jQuery选择器

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

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

元素/标签选择器

Query 元素选择器基于元素/标签名选取元素。
语法:$("标签名称")

<div>div1</div>
<div>div2</div>
<div>div3</div>
<script type="text/javascript" src="js/jquery-1.11.1.js" >
<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的对象 
			//将js对象转换为jQuery的对象 
			console.log($(divList[i]));
		} 
	});
</script>

id 选择器

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

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

通过 id 选取元素语法如下:

$("#p1")

class 选择器

jQuery 类选择器可以通过指定的 class 查找元素
$(".mydiv")

全局选择器

匹配所有元素
$("*")

并集选择器

将每一个选择器匹配到的元素合并后一起返回
$("div,ul,li,.mydiv")

后代选择器

在给定的祖先元素下匹配所有的后代元素
$("form input"

子选择器

在给定的父元素下匹配所有的子元素
$("form > input")

相邻选择器

匹配所有紧接在 prev 元素后的 next 元素
$("label + input")

同辈选择器

匹配 prev 元素之后的所有 siblings 元素
$("form ~ input")

属性选择器

匹配包含给定属性的元素

$("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']");

可见性选择器

匹配所有的可见或不可见的元素
$("div:visible");
$("input:hidden");

所有选择器的案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>选择器</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script>			
			//1、标签选择器：
			function htmlSelector(){
    				
				//获取所有的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的对象
					//将js对象转换为jQuery的对象
					console.log($(divList[i]));
				} 
			}
			//2、id选择器
			function idSelector(){
    
				//根据id获取到的元素是惟一的，即使页面上有重名的id，获取的是第一个
				var p=$("#p1");
				console.log(p.html());
			}
			//3、.class选择器
			function classSelector(){
    
				var list=$(".mydiv");
				console.log(list.length);
			}			
			//4、 全局选择器
			function allSelector(){
    
				var list=$("*");//包括了html、head、title.....所有标签
				console.log(list.length);
				for(var i=0;i<list.length;i++){
    
					console.log(list[i]);//js的对象					
				}  
			}
			//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开头的元素的集合
				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(){
    
				seeSelector();
			});
			//打印集合
			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>

jQuery常用函数

下列代码中带有

与标签内容相关函数
与标签属性相关函数
与标签样式相关函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>函数</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<style>
			.redBg{
    
				background-color: red;
			}
			.fontColor{
    
				color: gold;
			}
		</style>
		<script>
			//1、与内容相关的函数
			function textFun(){
    
				var str1=$("div").html();//获取的是第一个匹配元素的围堵标签中的所有内容，包括了嵌套在内部的标签
				console.log(str1);
				var str2=$("div").text();//获取的是第一个匹配元素的围堵标签中的所有文本，不包含标签的内容
				console.log(str2);
				var str3=$("div").val();//val()只能用在表单项元素中，div不是表单元素，所以val()获取不到任何内容
				var str4=$("input").val();//input是表单项元素，val()可以获取到
				console.log(str3);
				console.log(str4);
			}
			//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);
				}				
			}
			//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(){
    
				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>

jQuery与js对象的转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery与js对象的转换</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script>
			$(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>

jQuery中的事件

页面对不同访问者的响应叫做事件
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法

常用DOM事件列表

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

常用的 jQuery 事件方法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script>
			//页面加载事件
			$(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>

jQuery操作DOM

元素的增加

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

<!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(){
    
				// 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>
		
	</body>
</html>

元素的克隆

clone(boolean)：克隆匹配的DOM元素并且选中这些克隆的副本

语法:$(selector).clone(includeEvents);

参数:可选。布尔值。规定是否复制元素的所有事件处理。默认地，副本中不包含事件处理器。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文档处理</title>
		<style>
			div{
    
				background: lavenderblush;
				padding: 20px;
			}
			p{
    
				border:solid 1px red;
				background: lemonchiffon;
				padding: 20px;
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script>
			$(function(){
    
				$("#btn3").click(function(){
    
					alert("试试就试试！");
				});
				// clone(true) 
				$("#btn1").click(function(){
    
					$("p").clone(true).appendTo("div");
				});
				//clone(false) 
				$("#btn2").click(function(){
    
					$("p").clone(false).appendTo("div");
				});
				
			});
		</script>
	</head>
	<body>
		<button id="btn1">克隆元素-true</button>
		<button id="btn2">克隆元素-false</button>
		<p>
			要被克隆的段落
			<button id="btn3" >点击我试试</button>	
		</p>
		<div>
			div1			
		</div>
		
	</body>
</html>

元素的替换

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>

元素的删除

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>

jQuery效果

隐藏和显示

语法:
$(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();
					//$("div").hide(2000);
					$("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>

淡入和淡出

语法:
$(selector).fadeIn([speed,callback]);
$(selector).fadeOut([speed,callback]);
$(selector).fadeToggle([speed,callback]);