一、概念

jQuery是一个JavaScript函数库，jQuery是一个轻量级的“写得少，做得多的”JavaScript库

jQuery库包含以下功能：

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

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

二、jQuery的使用

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

<head><script src="jquery-1.11.1.js"></script>
</head>

三、jQuery语法结构

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

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

说明：
美元符合定义jQuery
选择符(selector) “查询”和“查找”HTML元素
jQuery 的 actions() 执行对元素的操作

3.2 文档就绪事件

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

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

如果在文档没有完全加载之前就运行函数，操作可能失败

所以我们尽可能将所有的操作都在文档加载完毕之后实现。

写法1：

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

写法2：简洁写法

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

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

四、jQuery选择器：

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

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

4.1 元素/标签选择器

jQuery元素选择器基于元素/标签名选取元素。
语法：

$("标签名称")

<script>//文档就绪事件$(function(){//1.标签选择器//获取所有的div元素（集合）var list = $("div");console.log(list); //jQuery对象console.log(list.length); //3for(var i=0;i<list.length;i++){console.log(list[i]); //js对象console.log($(list[i])); //将js对象转化为jQuery对象}});
</script>

输出：

4.2 "#id"选择器

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

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

语法：

$("#id");

//根据id获取到的元素是唯一的
//即使有重名的id 那也只是获取第一个
var p = $("#p1");
console.log(p); //jQuery对象

4.3 ".class"选择器

jQuery类选择器可以通过指定的class查找元素，查找到的一定是一个集合

语法：

$(".class");

var list = $(".mydiv");
console.log(list.length);

4.4 全局选择器

匹配当前页面的所有元素
语法

$("*");

var list = $("*");
console.log(list.length);
for(var i =0;i<list.length;i++){console.log(list[i]); //js对象
}

4.5 并集选择器

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

$("div,p,.mydiv");

4.6 后代选择器

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

$("form input");

4.7 子选择器

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

$("form > input");

4.8 相邻选择器

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

$("label + input");

4.9 同辈选择器

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

$("form ~ input");

4.10 属性选择器

匹配包含给定属性的元素

$("div[id]");//获取所有拥有id属性的div元素
$("div[class]");//获取所有拥有class属性的div元素
$("input[name='userName']"); //获取所有name属性是userName的input元素
$("input[name^='user']");//获取所有name属性是user开头的input元素
$("input[name$='user']");//获取所有name属性是user结尾的input元素
$("input[name*='user']");//获取所有name属性包含user字段的input元素
$("input[name^='user'][id]");//获取所有name属性是user开头且拥有id属性的input元素

4.11 可见性选择器

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

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

4.12 所有选择器案例

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/jquery-1.11.1.js"></script></head><body><form><label>用户名：</label><input id="userName" name="userName" type="text"/><br/>密码：<input type="password"/><fieldset>电话：<input type="text"/><br/>邮箱：<input type="email"/></fieldset></form>地址<input type="text" value="北京"/><div id="div1">div1</div><div id="div2" class="mydiv">div2</div><div class="mydiv">div3</div><p id="p1">p1</p></body>
</html>
<script>//文档就绪事件$(function(){seeSelector();});function print(list){for(var i=0;i<list.length;i++){console.log(list[i]);}}//11、可见性选择器function seeSelector(){var list = $("div:visible");//获取所有可见的div元素集合list = $("div:hidden");//获取所有不可见的div元素集合print(list);}//10、属性选择器function attrSelector(){var list = $("div[id]");//获取所有拥有id属性的div元素list = $("div[class]");//获取所有拥有class属性的div元素list = $("input[name='userName']"); //获取所有name属性是userName的input元素list = $("input[name^='user']");//获取所有name属性是user开头的input元素list = $("input[name$='user']");//获取所有name属性是user结尾的input元素list = $("input[name*='user']");//获取所有name属性包含user字段的input元素list = $("input[name^='user'][id]");//获取所有name属性是user开头且拥有id属性的input元素print(list);}//9、同辈选择器function sublingsSelector(){var list = $("form ~ input");print(list);}//8、相邻选择器function nextSelector(){var list = $("label + input");print(list);}//7、子选择器function sonSelector(){var list = $("form>input");print(list);}//6、后代选择器function subSelector(){var list = $("form input");print(list);}//5、并集选择器function andSelector(){var list = $(".mydiv,p");print(list);}//4、全局选择器function allSelector(){var list = $("*");console.log(list.length);for(var i =0;i<list.length;i++){console.log(list[i]);}}//3、class选择器function classSelector(){var list = $(".mydiv");console.log(list.length);}//2、id选择器function idSelector(){//根据id获取到的元素是唯一的//即使有重名的id 那也只是获取第一个var p = $("#p1");console.log(p); //jQuery对象}//1、标签选择器function htmlSelector(){//获取所有的div元素（集合）var list = $("div");console.log(list); //jQuery对象console.log(list.length); //3for(var i=0;i<list.length;i++){console.log(list[i]); //js对象console.log($(list[i])); //将js对象转化为jQuery对象}}
</script>

五、jQuery常用函数

5.1 与标签内容相关函数

5.2 与标签属性相关函数

5.3 与标签样式相关函数

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.11.1.js"></script><script>$(function(){cssFun();});//1.与内容相关的函数function textFun(){var str1 = $("div").html();//获取的是第一个匹配元素的围堵标签中的所有内容，包含标签console.log(str1);var str2 = $("div").text();//获取的是所有匹配元素的标签中的文本信息，不包含标签console.log(str2);var str3 = $("div").val();//val()只能用在表单项元素中，div不是表单，所以获取不到console.log(str3);var str4 = $("input").val();//当有多个匹配时，获取第一个，input是表单，所以嫩获取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");//获取checked或者 selected 属性使用prop函数,获取到的值是boolean类型，表示是否被选中var list = $("input[name='gender']");for(var i=0;i<list.length;i++){console.log($(list[i]).prop("checked"));}//一般想要获取的值是true 或 false 的时候，用prop//获取属性值的话 用 attr 函数}//与标签样式相关的函数function cssFun(){$("div").addClass("redBg");//添加一个编写好的样式$("div").addClass("redBg fontColor");//添加多个编写好的样式$("input").css("border-color","yellow");//添加样式$("input").css({"color":"red","border-color":"yellow"});//添加多个样式}function changeCss(){$("div").toggleClass("redBg");//如果目标元素有该样式就删除，没有就添加}</script><style>.redBg{background-color: red;}.fontColor{color: blue;}</style></head><body><button type="button" onclick="changeCss()">点我切换</button>性别：<input type="radio" value="1" name="gender" checked="checked"/>男<input type="radio" value="0" name="gender"/>女<br/><img src="img/a.png" title="服不服" /><div>div1<button type="button">普通按钮1</button></div><div>div2<button type="button">普通按钮2</button></div><input typr="text" name="username" value="贾宝玉"/><input typr="text" name="password" value="456"/></body>
</html>

六、jQuery与js对象的转换

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.11.1.js"></script><script>$(function(){//获取所有div元素集合var list = $("div");for(var i=0;i<list.length;i++){//js对象，获取内容用innerHTML()console.log(list[i]);//jquery对象，获取内容用html函数console.log($(list[i]));}});</script></head><body><div>div</div><div>div</div></body>
</html>

七、jQuery中的事件

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

7.1 常用DOM事件列表

7.2 常用的jQuery事件方法

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

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.11.1.js"></script><script>//页面加载事件$(function(){//给所有的button去绑定单击事件$("button").click(function(){//this指当前对象，该对象是Js对象，需要转换为jquery对象$(this).css("color","red");//给按钮添加样式});//给所有a标签绑定鼠标移上事件$("a").mouseover(function(){var str = $(this).html();$(this).html("鼠标移上-"+str);});//给所有a标签绑定鼠标离开事件$("a").mouseout(function(){var str = $(this).html();$(this).html(str.substr(5));});});</script></head><body><a href="#">首页</a>&nbsp;<a href="#">零食</a>&nbsp;<a href="#">鲜花</a><button type="button" onclick="">普通按钮1</button><button type="button">普通按钮2</button><button type="button">普通按钮3</button></body>
</html>

八、jQuery操作DOM

8.1 元素的增加

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

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{background-color: aqua;}</style><script src="js/jquery-1.11.1.js"></script><script>$(function(){//append() 在元素内部末尾追加$("#btn1").click(function(){$("div").append("<br/><p>追加新段落</p><br/>");});//prepend() 在元素内部顶端追加$("#btn2").click(function(){$("div").prepend("<br/><p>追加新段落</p><br/>")});//after() 在元素外部末尾追加$("#btn3").click(function(){$("div").after("<br/><p>追加新段落</p><br/>")});//before() 在元素外部顶端追加$("#btn4").click(function(){$("div").before("<br/><p>追加新段落</p><br/>")});});</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>

8.2 元素的克隆

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

语法：

$(selector).clone(includeEvents);

参数：可选。布尔值。规定是否复制元素的所以事件处理。，默认是false

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.11.1.js"></script><script>$(function(){$("#bt1").click(function(){alert("试试就试试");});//克隆且事件有效$("#bt2").click(function(){$("div").append($("p").clone(true));});//克隆但事件无效$("#bt3").click(function(){$("div").append($("p").clone(false));});});</script></head><body><button id="bt2">克隆元素 true</button><button id="bt3">克隆元素 false</button><p>被克隆的段落<button id="bt1">点我试试</button></p><div>div1</div></body>
</html>

8.3 元素的替换

replaceWith() - 将所有匹配的元素替换成指定的HTML或DOM元素（后换前）
replaceAll() - 前换后

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.11.1.js"></script><script>$(function(){//后换前$("#btn1").click(function(){$("div").replaceWith("<p>aaa</p>");});//前换后$("#btn2").click(function(){$("<p>aaa</p>").replaceAll("div");});});</script></head><body><button id="btn1">replaceWith</button><button id="btn2">replaceAll</button><div>div1</div><div>div2</div></body>
</html>

8.4 元素的删除

remove() 删除被选元素（及其内容和子元素）
empty() 删除被选元素中所有内容和子元素

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.11.1.js"></script><script>$(function(){//删除div及其内部所有内容$("#btn1").click(function(){$("div").remove();});//删除id为div2的div元素及其所有内容$("#btn2").click(function(){$("div").remove("#div2");});//删除div内所有内容，但div还存在$("#btn3").click(function(){$("div").empty();});});</script></head><body><button id="btn1">remove</button><button id="btn2">remove筛选</button><button id="btn3">empty</button><div>div1<p>段落1</p><p>段落2</p></div><div id="div2">div2</div></body>
</html>

九、jQuery效果

9.1 隐藏和显示

语法：

$(selector).hide([speed,callback]); 隐藏
$(selector).show([speed,callback]); 显示
$(selector).toggle([speed,callback]); 切换

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

9.2 淡入和淡出

语法：

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

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

十、基于jQuery实现表单验证

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.11.1.js"></script></head><body><h1>英雄会注册</h1><form id="myForm" action="#" method="get">*用户名：<input type="text" id="userName" name="userName" placeholder="请输入用户名"/><span id="userMsg"></span><br/>*密码：<input type="password" id="passWord" name="passWord" placeholder="请输入密码"/><span id="pwd1Msg"></span><br/>*确认密码：<input type="password" id="rePassWord" name="rePassWord" placeholder="请确认密码"/><span id="pwd2Msg"></span><br/>*性别：<select id="gender"><option value="-1">请选择性别</option><option value="1">男</option><option value="0">女</option></select><br/>*电话号码：<input type="text" id="phone" name="phone" /><span id="phoneMsg"></span><br/>*邮箱：<input type="email" id="email" name="email"/><span id="emailMsg"></span><br/><input type="submit" id="sub" value="注册"/><input type="reset" id="reset" value="重置"/></form></body>
</html>
<script>$(function(){$("#userName").blur(function(){isName();});});//验证用户名function isName(){var val = $("#userName").val();var msg = $("#userMsg");var zz = /^[a-zA-Z]\w{5,}/;if(val == ""){msg.html("用户名不能为空").css("color","red");return false;}else if(zz.test(val) == false){msg.html("用户名不合法").css("color","red");return false;}msg.html("用户名可用").css("color","green");return true;}
</script>

十一、jQuery案例

11.1 动态表格

**对动态元素的DOM操作与传统操作不同，需要用的document的on方法，如下代码 **

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.11.1.js"></script></head><body><input id="biani" type="button" value="遍历表格"/><input id="add" type="button" value="添加"/><table cellpadding="0" cellspacing="0" border="1" id="tb"><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><input name="del" type="button" value="删除"/></td></tr><tr><td>2</td><td>小熊饼干2</td><td>152</td><td>2</td><td><input name="del" type="button" value="删除"/></td></tr><tr><td>3</td><td>小熊饼干3</td><td>185</td><td>3</td><td><input name="del" type="button" value="删除"/></td></tr></table></body>
</html>
<script>$(function(){//为便利表格按钮赋予单击事件$("#biani").click(function(){//首先获取表格对象var table = $("#tb");//获取表格的所有行//注意浏览器默认把tr放在tbody中,所以children()函数获得的是tbody//我们要再调用一次childrenvar trlist = table.children().children();//获取每行的列for(var i=0;i<trlist.length;i++){var trobj = $(trlist[i]);//将每一行的js对象转换为jQuery对象var tdlist = $(trobj.children());//获取当前行中的所有单元格var str = "";for(var j =0;j<tdlist.length;j++){var tdobj = $(tdlist[j]);var html = tdobj.html();str = str + html;}console.log(str);}});//添加表格单机事件$("#add").click(function(){//获取表格对象var table = $("#tb").children();//获取要添加的行对象var row = '<tr>'+'<td>3</td>'+'<td>小熊饼干3</td>'+'<td>185</td>'+'<td>3</td>'+'<td><input name="del" type="button" value="删除"/></td>'+'</tr>';//在尾部追加行table.append(row);});//添加删除事件// $("input[name=del]").click(function(){//     var row = $(this).parent().parent();//     row.remove();// });//这种传统绑定方式对动态添加的元素不生效//动态添加的元素绑定事件的方法：$(document).on("click","input[name=del]",function(){var row = $(this).parent().parent();row.remove();})});
</script>

11.2 全选/全不选

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.11.1.js"></script></head><body><table cellpadding="0" border="1" cellspacing="0"><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>1</td></tr><tr><td><input name="one" type="checkbox" /></td><td>2</td><td>小熊饼干2</td><td>125</td><td>1</td><td>1</td></tr><tr><td><input name="one" type="checkbox" /></td><td>3</td><td>小熊饼干3</td><td>125</td><td>1</td><td>1</td></tr></table></body>
</html>
<script>$(function(){$("#all").click(function(){var flag = $("#all").prop("checked");var list = $("input[name=one]");for(var i =0;i<list.length;i++){$(list[i]).prop("checked",flag);}});$("input[name=one]").click(function(){var list = $("input[name=one]");for(var i = 0;i<list.length;i++){if($(list[i]).prop("checked")==false){$("#all").prop("checked",false);return;}}$("#all").prop("checked",true);});});
</script>

11.3 省市级联

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script 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 cityList = new Array();cityList[0]=new Array("朝阳区","海淀区","东城区","西域区");cityList[1]=new Array("贵阳市","遵义市","凯里市","毕节市");cityList[2]=new Array("广州市","深圳市","珠海市","茂名市");cityList[3]=new Array("杭州市","宁波市","绍兴市","嘉兴市");$("#province").change(function(){var val = $(this).val();//获取选择的省对应的value值//获取省对应的城市集合var list = cityList[val];//获取到城市下拉框var city = $("#city");//清空城市下拉框city.empty();//循环追加城市for(var i=0;i<list.length;i++){city.append('<option value="+i+">'+list[i]+'</option>');}});});
</script>

11.4 动态时间

<!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>

简洁高效的JQuery相关推荐

一款简洁大气的jquery日期日历插件
本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址: http://keleyi.com/a/bjad/e ...
Spring框架人气暴涨简洁高效是关键
Spring框架人气暴涨简洁高效是关键 11月22日消息,据市场分析机构Evans Data的一项调查报告显示,接近半数的Java企业使用了轻量级开源Java框架Spring.另外,73%的受访机构 ...
【PHP源码】六零导航页(LyLme Spage) 简洁高效的上网导航系统
六零导航页项目介绍: 六零导航页 (LyLme Spage)前端基于D.Young的 5IUX搜索 ,后台使用笔下光年的Light Year Admin模板开发,包含多种搜索引擎,致力于简洁高效无广 ...
编写高效的jQuery代码
编写高效的jQuery代码最近写了很多的js,虽然效果都实现了,但是总感觉自己写的js在性能上还能有很大的提升.本文我计划总结一些网上找的和我本人的一些建议,来提升你的jQuery和javascri ...
Mockplus（摩客）- 简洁高效的原型图设计工具
Mockplus(摩客) 是一款简洁高效的在线原型图设计工具,很好的标题,基本说明了这篇文章的主要内容--! 原型设计是你对设计方案的一种直观的表达.也许你说,着跟你没啥关系.那我说个实际点的场景,小 ...
Chrome简洁高效管理下载项
每次要查看下载记录时,Chrome新建下载标签页的速度能让我抓狂之前用的 Chrono 界面太过传统,而且还不能点击打开.所以一直在寻找好用的下载管理插件,经过多次在拓展商城搜索比对,找到了这款拓展 ...
Hyperloop 让发布简洁高效
原文链接:https://mp.weixin.qq.com/s/MZMqzaKLqQN0zJikNYEbwg Hyperloop 是服务于美团点评客户端的组件发版.持续集成.App 打包构建.资源调度 ...
Hyperloop，让发布简洁高效
Hyperloop 是什么? Hyperloop 是服务于美团点评客户端的组件发版.持续集成.App 打包构建.资源调度等各个环节的发布调度系统.名称起源于美国 Elon Musk 构想的 Hyper ...
取消wps右键菜单_让右键菜单变简洁高效！
软件安装得越来越多可能会在右键添加许多项目这就会让右键菜单繁多炫目比如说下面这个右键菜单: 接下来推荐几款软件,用于优化右键菜单不仅简洁而且高效,做减法也做加法一.火绒右键管理工具分为三大 ...
linux高手知乎,配置一个简洁高效的 Zsh | Linux 中国
事实上 oh-my-zsh 并不好用,严重拖慢了 Zsh 的速度,反而让你的工作并不高效. (本文字数:2236,阅读时长大约:3 分钟) Shell 是类 Unix 系统中超级好用的工具,而 Zsh ...

简洁高效的JQuery