jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是："Write less, do more."
1、优势
（1）一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
（2）丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了。
（3）链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
（4）事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
（5）Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
（6）跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
（7）插件扩展开发。jQuery有着丰富的第三方的插件，基本前端页面上的组件都有对应插件，可以根据自己需要去改写和封装插件，简单实用。
2、地址
官网下载地址： https://jquery.com/download/
中文阅读：http://jquery.cuishifeng.cn/
3、jQuery引入
在body标签里面最后面引入：
使用本地的jQuery
<script src="jquery-3.3.1.min.js"></script>
或者使用网络的jQuery：
<script src="">https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
4、jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。
$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。相当于： document.getElementById("i1").innerHTML;
虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。
声明一个jQuery对象变量的时候在变量名前面加上$：var$variable=jQuery对像varvariable=DOM对象$variable[0]//jQuery对象转成DOM对象jQuery对象和DOM对象的使用：$("#i1").html();//jQuery对象可以使用jQuery的方法$("#i1")[0].innerHTML;//DOM对象使用DOM的方法5、jQuery对象和DOM对象转化
vard1Ele=document.getElementById("d1")$(d1Ele)//w.fn.init[div#d1]$(d1Ele)[0]//<divid="d1">111</div>$("#d1")//w.fn.init[div#d1]$("#d1")[0]//<divid="d1">111</div>二、jQuery基础语法
$(selector).action()
1、查找标签
（1）选择器
$("#id")//找到有id号为id的标签$("tagName")//找到有tagName的标签$(".className")//找到有className类的标签配合使用：$("div.c1")//找到有c1类的div标签$("*")//所有元素选择器$("#id,.className,tagName")//满足多个条件的组合选择器层级选择器：x和y可以为任意选择器$("xy");//x的所有后代y（子子孙孙）$("x>y");//x的所有儿子y（儿子）$("x+y");//找到所有紧挨在x后面的y$("x~y");//x之后所有的兄弟y基本筛选器：:first//第一个:last//最后一个:eq(index)//索引等于index的那个元素:even//匹配所有索引值为偶数的元素，从0开始计数:odd//匹配所有索引值为奇数的元素，从0开始计数:gt(index)//匹配所有大于给定索引值的元素:lt(index)//匹配所有小于给定索引值的元素:not(元素选择器)//移除所有满足not条件的标签:has(元素选择器)//选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)$("div:has(h1)")//找到所有后代中有h1标签的div标签$("div:has(.c1)")//找到所有后代中有c1样式类的div标签$("li:not(.c1)")//找到所有不包含c1样式类的li标签$("li:not(:has(a))")//找到所有后代中不含a标签的li标签（2）示例：自定义模态框，使用jQuery实现弹出和隐藏功能。
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metahttp-equiv="x-ua-compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1"><title>自定义模态框</title><style>.cover{position:fixed;left:0;right:0;top:0;bottom:0;background-color:darkgrey;z-index:999;}.modal{width:600px;height:400px;background-color:white;position:fixed;left:50%;top:50%;margin-left:-300px;z-index:1000;}.hide{display:none;}</style></head><body><inputtype="button"value="弹"id="i0"><divclass="coverhide"></div><divclass="modalhide"><labelfor="i1">姓名</label><inputid="i1"type="text"><labelfor="i2">爱好</label><inputid="i2"type="text"><inputtype="button"id="i3"value="关闭"></div><scriptsrc="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script>vartButton=$("#i0")[0];tButton.onclick=function(){varcoverEle=$(".cover")[0];varmodalEle=$(".modal")[0];$(coverEle).removeClass("hide");$(modalEle).removeClass("hide");};varcButton=$("#i3")[0];cButton.onclick=function(){varcoverEle=$(".cover")[0];varmodalEle=$(".modal")[0];$(coverEle).addClass("hide");$(modalEle).addClass("hide");}</script></body></html>属性选择器：
[attribute][attribute=value]//属性等于[attribute!=value]//属性不等于示例:<inputtype="text"><inputtype="password"><inputtype="checkbox">$("input[type='checkbox']");//取到checkbox类型的input标签$("input[type!='text']");//取到类型不是text的input标签表单常用筛选：
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
表单对象属性:
:enabled:disabled:checked:selected$(":checkbox")//找到所有的checkbox<form><inputname="email"disabled="disabled"/><inputname="id"/></form>$("input:enabled")//找到可用的input标签<selectid="s1"><optionvalue="beijing">北京市</option><optionvalue="shanghai">上海市</option><optionselectedvalue="guangzhou">广州市</option><optionvalue="shenzhen">深圳市</option></select>$(":selected")//找到所有被选中的option（3）筛选器
$("#id").next()//查找下面ID号为id的一个元素$("#id").nextAll()//查找下面ID号为id的所有元素$("#id").nextUntil("#i2")//查找下面ID号为id的所有元素，直到遇到id号为i2的元素$("#id").prev()//查找上面ID号为id的一个元素$("#id").prevAll()//查找上面ID号为id的所有元素$("#id").prevUntil("#i2")//查找上面ID号为id的所有元素，直到遇到id号为i2的元素$("#id").parent()$("#id").parents()//查找当前元素的所有的父辈元素$("#id").parentsUntil()//查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。$("#id").children();//儿子元素$("#id").siblings();//兄弟元素查找元素：
$("#id").find()//搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。.first()//获取匹配的第一个元素.last()//获取匹配的最后一个元素.not()//从匹配元素的集合中删除与指定表达式匹配的元素.has()//保留包含特定后代的元素，去掉那些不含有指定后代的元素。（4）示例：左侧菜单点击其中一项后展开，同时别的选项关闭，点击展开的选项就关闭，
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metahttp-equiv="x-ua-compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1"><title>左侧菜单示例</title><style>.left{position:fixed;left:0;top:0;width:20%;height:100%;background-color:rgb(47,53,61);}.right{width:80%;height:100%;}.menu{color:white;}.title{text-align:center;padding:10px15px;border-bottom:1pxsolid#23282e;}.items{background-color:#181c20;}.item{padding:5px10px;border-bottom:1pxsolid#23282e;}.hide{display:none;}</style></head><body><div><div><div>菜单一</div><div><div>111</div><div>222</div><div>333</div></div><div>菜单二</div><divclass="itemshide"><div>111</div><div>222</div><div>333</div></div><div>菜单三</div><divclass="itemshide"><div>111</div><div>222</div><div>333</div></div></div></div><div></div><scriptsrc="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script>$(".title").click(function(){//jQuery绑定事件$(this).next().toggleClass("hide");//点击标签，标签的子选项如果隐藏状态就变为显示，如果显示状态就变为隐藏$(this).next().siblings(".items").addClass("hide");//别的标签隐藏});</script></body></html>三、操作标签
1、样式操作
addClass();//添加指定的CSS类名。removeClass();//移除指定的CSS类名。hasClass();//判断样式存不存在toggleClass();//切换CSS类名，如果有就移除，如果没有就添加。示例：开关灯和模态框css("color","red")//DOM操作：tag.style.color="red"示例：$("p").css("color","red");//将所有p标签的字体设置为红色位置：
offset()//获取匹配元素在当前窗口的相对偏移或设置元素位置position()//获取匹配元素相对父元素的偏移scrollTop()//获取匹配元素相对滚动条顶部的偏移scrollLeft()//获取匹配元素相对滚动条左侧的偏移.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。和.position()的差别在于：.position()是相对于相对于父级元素的位移。
示例：返回顶部
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metahttp-equiv="x-ua-compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1"><title>位置相关示例之返回顶部</title><style>.c1{width:100px;height:200px;background-color:red;}.c2{height:50px;width:50px;position:fixed;bottom:15px;right:15px;background-color:#2b669a;}.hide{display:none;}.c3{height:100px;}</style></head><body><buttonid="b1"class="btnbtn-default">点我</button><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div>31</div><div>32</div><div>33</div><div>34</div><div>35</div><div>36</div><div>37</div><div>38</div><div>39</div><div>40</div><div>41</div><div>42</div><div>43</div><div>44</div><buttonid="b2"class="btnbtn-defaultc2hide">返回顶部</button><scriptsrc="jquery-3.2.1.min.js"></script><script>$("#b1").on("click",function(){$(".c1").offset({left:200,top:200});});$(window).scroll(function(){if($(window).scrollTop()>100){$("#b2").removeClass("hide");}else{$("#b2").addClass("hide");}});$("#b2").on("click",function(){$(window).scrollTop(0);})</script></body></html>尺寸相关操作：
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
2、文本操作
HTML代码：html()//取得第一个匹配元素的html内容html(val)//设置所有匹配元素的html内容文本值：text()//取得所有匹配元素的内容text(val)//设置所有匹配元素的内容值：val()//取得第一个匹配元素的当前值val(val)//设置所有匹配元素的值val([val1,val2])//设置checkbox、select的值获取被选中的checkbox或radio的值：<labelfor="c1">女</label><inputname="gender"id="c1"type="radio"value="0"><labelfor="c2">男</label><inputname="gender"id="c2"type="radio"value="1">可以使用：$("input[name='gender']:checked").val()示例：自定义登录校验示例
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metahttp-equiv="x-ua-compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1"><title>文本操作之登录验证</title><style>.error{color:red;}</style></head><body><formaction=""><div><labelfor="input-name">用户名</label><inputtype="text"id="input-name"name="name"><span></span></div><div><labelfor="input-password">密码</label><inputtype="password"id="input-password"name="password"><span></span></div><div><inputtype="button"id="btn"value="提交"></div></form><scriptsrc="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script>$("#btn").click(function(){varusername=$("#input-name").val();varpassword=$("#input-password").val();if(username.length===0){$("#input-name").siblings(".error").text("用户名不能为空");}if(password.length===0){$("#input-password").siblings(".error").text("密码不能为空");}})</script></body></html>3、属性操作
（1）用于ID等或自定义属性：
attr(attrName)//返回第一个匹配元素的属性值attr(attrName,attrValue)//为所有匹配元素设置一个属性值attr({k1:v1,k2:v2})//为所有匹配元素设置多个属性值removeAttr()//从每一个匹配的元素中删除一个属性用于checkbox和radioprop()//获取属性removeProp()//移除属性<inputtype="checkbox"value="1"><inputtype="radio"value="2"><script>$(":checkbox[value='1']").prop("checked",true);$(":radio[value='2']").prop("checked",true);</script>（2）文档处理
添加到指定元素内部的后面$(A).append(B)//把B追加到A$(A).appendTo(B)//把A追加到B添加到指定元素内部的前面$(A).prepend(B)//把B前置到A$(A).prependTo(B)//把A前置到B添加到指定元素外部的后面$(A).after(B)//把B放到A的后面$(A).insertAfter(B)//把A放到B的后面添加到指定元素外部的前面$(A).before(B)//把B放到A的前面$(A).insertBefore(B)//把A放到B的前面移除和清空元素remove()//从DOM中删除所有匹配的元素。empty()//删除匹配的元素集合中所有的子节点。替换replaceWith()replaceAll()克隆clone()//参数
（3）克隆示例：
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metahttp-equiv="x-ua-compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1"><title>克隆</title><style>#b1{background-color:deeppink;padding:5px;color:white;margin:5px;}#b2{background-color:dodgerblue;padding:5px;color:white;margin:5px;}</style></head><body><buttonid="b1">屠龙宝刀，点击就送</button><hr><buttonid="b2">屠龙宝刀，点击就送</button><scriptsrc="jquery-3.2.1.min.js"></script><script>//clone方法不加参数true，克隆标签但不克隆标签带的事件$("#b1").on("click",function(){$(this).clone().insertAfter(this);});//clone方法加参数true，克隆标签并且克隆标签带的事件$("#b2").on("click",function(){$(this).clone(true).insertAfter(this);});</script></body></html>四、事件
1、常用事件
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
（1）示例： 按住shift键批量操作
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metahttp-equiv="x-ua-compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1"><title>键盘事件示例</title></head><body><tableborder="1"><thead><tr><th>#</th><th>姓名</th><th>操作</th></tr></thead><tbody><tr><td><inputtype="checkbox"></td><td>Egon</td><td><select><optionvalue="1">上线</option><optionvalue="2">下线</option><optionvalue="3">停职</option></select></td></tr><tr><td><inputtype="checkbox"></td><td>Alex</td><td><select><optionvalue="1">上线</option><optionvalue="2">下线</option><optionvalue="3">停职</option></select></td></tr><tr><td><inputtype="checkbox"></td><td>Yuan</td><td><select><optionvalue="1">上线</option><optionvalue="2">下线</option><optionvalue="3">停职</option></select></td></tr><tr><td><inputtype="checkbox"></td><td>EvaJ</td><td><select><optionvalue="1">上线</option><optionvalue="2">下线</option><optionvalue="3">停职</option></select></td></tr><tr><td><inputtype="checkbox"></td><td>Gold</td><td><select><optionvalue="1">上线</option><optionvalue="2">下线</option><optionvalue="3">停职</option></select></td></tr></tbody></table><inputtype="button"id="b1"value="全选"><inputtype="button"id="b2"value="取消"><inputtype="button"id="b3"value="反选"><scriptsrc="jquery-3.2.1.min.js"></script><script>//全选$("#b1").on("click",function(){$(":checkbox").prop("checked",true);});//取消$("#b2").on("click",function(){$(":checkbox").prop("checked",false);});//反选$("#b3").on("click",function(){$(":checkbox").each(function(){varflag=$(this).prop("checked");$(this).prop("checked",!flag);})});//按住shift键，批量操作//定义全局变量varflag=false;//全局事件，监听键盘shift按键是否被按下$(window).on("keydown",function(e){//alert(e.keyCode);if(e.keyCode===16){flag=true;}});//全局事件,shift按键抬起时将全局变量置为false$(window).on("keyup",function(e){if(e.keyCode