核心知识点：
1.jQuery是什么（一个轻量级的、兼容多浏览器的JavaScript库）
2.jQuery的优点（轻量级、丰富的DOM选择器、链式表达式、动画样式事件支持、兼容多浏览器、支持扩展开发）
3.引入jQuery的两种方式
a.本地文件<script src="jquery-3.2.1.min.js"></script>
b.CDN方式<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
4.选择器
a.基本选择器{$("#id")、$(".className")、$(".tagName")、$("*")、$("[#id],[className],[tagName]")}
b.层级选择器{x y子子孙孙、X>y儿子选择器、x+y毗邻选择器、x~y弟弟选择器}
c.属性选择器{=、!=}
5.筛选器
a.基本筛选器{例：first、last、even、odd、gt(index)、lt(index)、not()、has()、eq(index)、}
b.筛选器的方法（next() prev() parent()）
6.样式操作
a.样式类{removeClass() hasClass() toggleClass()}
b.css
c.位置{offset、position}
d.尺寸{}
7.文本操作
a.HTML代码操作{html()、html(val)}
b.文本值{text()、text(val)}
c.值{val()、val(val)、val([val1,val2])}
8.属性操作
a.用于ID或自定义属性{attr(attrName)、arrt(attrName,attrValue)、removeAttr() }
b.用于checkbox和radio{prop()、removeProp()}
9.文档处理(append() appendTo() prepend() prependTo() after() insertAfter() before() insertBefore() remove() clone() replaceWith() replaceAll() empty())
10.事件
a.常见事件（blur fours keydown keyup change ready）
b.事件绑定.on(events [,selector,] function)
c.事件移除.off(events [,selector,] function)
d.事件加$(document).ready(function(){})
e.阻止后续事件进行return false
11.动画
a.基本 hide() show() toggle()
b.滑动slideDown() slideUp() slideToggle()
c.淡入淡出 fadeIn() fadeOut() fadeTo() fade Toggle ()
d.自定义animate()
12.each：遍历
a.$.each(conection,function(){})
b.$().each(function(){})
13.data：数据存储
a.$(selector).data(key,value)
b.$(selecter).data(kay)
c.$(selecter).removeData(key)
14.插件
a.jQuery.extend(object)
b.jQuery.fn.extend(object)
一、概论
1.jQuery介绍
（1）jQuery是一个轻量级的、兼容多浏览器的JavaScript库；
（2）jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。
它的总之就是：“Write less，do more。”
2.jQuery的优势
（1）一款轻量级的JS框架。jQuery核心js文件才几十KB，不会影响页面加载速度。
（2）丰富的DOM选择器，jQuery的选择器用起来很方便。
比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定。
（3）链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
（4）事件、样式、动画支持。jQuery还简化了is操作css的代码，并且代码的可读性也比js要强。
（5）Ajax操作支持。jQuery简化了Ajax操作，后端只需要返回一个JSON格式的字符串就能完成与前端的通信。
（6）跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
（7）插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己的需求去改写和封装插件，简单实用。
3.jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。
jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么它就可以使用jQuery里面的方法：
例如$("#i1").html()。$("#i1").html()的意思是：获取id值为i1的元素的html代码。其中html（）是jQury里的方法。相当于：document.getElementById("i1").innerHTML；
虽然jQuery对象是包装DOM对象后产生的，但是jQuery对象无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法。
二、基础知识
1.选择器
| 命令 | 功能 |
| $("#id") | ID选择器 |
| $(".className") | 类选择器 |
| $("tagName") | 标签选择器 |
| $("*") | 所有选择器 |
| $("[#id|.className|tagName],id|.className|tagName]...") | 组合选择器 |
<!--HTML文件--> <meta charset="UTF-8"> <title>Title</title> <meta http-equiv="x-ua-compatible" content="IE=edge"> </head> <body> <div id="i1">id为i1</div> <div class="c1">c1</div> <div class="c1">c1</div> <input type="text" value="我是你的哥"> <p>p</p> <p>第二个p</p> <ul type="disc"> <li>第一项</li> <li>第二项</li> </ul> <script src="jquery-3.2.1.min.js"></script> <!--示例--> $("#i1") [div#i1]0: div#i1length: 1__proto__: Object(0) $(".c1") (2) [div.c1, div.c1, prevObject: r.fn.init(1)] $("p") (2) [p, p, prevObject: r.fn.init(1)] $("*") (16) [html, head, meta, title, meta, body, div#i1, div.c1, div.c1, input, p, p, ul, li, li, script, prevObject: r.fn.init(1)] $("#i1,p,.c1") (5) [div#i1, div.c1, div.c1, p, p, prevObject: r.fn.init(1)]
| 命令 | 功能 |
| $("x y") | 后代选择器，子子孙孙 |
| $("x>y") | 儿子选择器 |
| $("x+y") | 毗邻选择器 |
| $("x~y") | 弟弟选择器 |
<!--文本--> <div id="d1"> <p>d1的儿子p</p> <div id="d2"> <p class="c1">d1的孙子p1</p> <p class="c2">d1的孙子p2</p> <p>d1的孙子p3</p> </div> </div> <!--示例--> $("#d1 p") (4) [p, p.c1, p.c2, p, prevObject: r.fn.init(1)] $("#d1>p") [p, prevObject: r.fn.init(1)] $(".c1>p") [prevObject: r.fn.init(1)] $(".c1~p") (2) [p.c2, p, prevObject: r.fn.init(1)]
| 命令 | 功能 |
| [attribute=value] | 属性等于 |
| [attribute!=value] | 属性不等于 |
<!--文本--> <input type="text"> <input type="checkbox"> <input type="button" value="确认"> <!--示例--> $("input[type='text']") [input, prevObject: r.fn.init(1)] $("input[type='checkbox']") [input, prevObject: r.fn.init(1)] $("input[type!='checkbox']") (2) [input, input, prevObject: r.fn.init(1)]
补充：表单的属性（input text password radio checkbox submit image reset button file）;
表单对象的属性（enabled disabled chacked selected）
2.筛选器
| 命令 | 功能 |
| :first | 第一个 |
| :eq(index) | 索引等于index的那个元素 |
| :last | 最后一个 |
| :even | 匹配所有索引值为偶数的元素，从0开始计数 |
| :odd | 匹配所有索引值为奇数的元素，从0开始计数 |
| :gt(index) | 匹配所有大于给定索引值的元素 |
| :lt(index) | 匹配所有小于给定索引值得元素 |
| :not(选择器) | 移除所有满足not条件的标签 |
| :has(选择器) | 选取所有包含一个或多个标签在其内的标签（指的是从后代元素找） |
<!--文本--> <input type="text" class="c1"> <input type="checkbox" class="c2"> <input type="button" value="确认" class="c3"> <!--示例--> $("input") (3) [input.c1, input.c2, input.c3, prevObject: r.fn.init(1)]0: input.c11: input.c22: input.c3length: 3prevObject: [document]__proto__: Object(0) $("input:first") [input.c1, prevObject: r.fn.init(1)] $("input:eq(2)") [input.c3, prevObject: r.fn.init(1)] $("input:last") [input.c3, prevObject: r.fn.init(1)] $("input:even") (2) [input.c1, input.c3, prevObject: r.fn.init(1)] $("input:odd") [input.c2, prevObject: r.fn.init(1)] $("input:gt(1)") [input.c3, prevObject: r.fn.init(1)] $("input:lt(1)") [input.c1, prevObject: r.fn.init(1)] $("input:not(.c2)") <!--input标签中不含c2类--> (2) [input.c1, input.c3, prevObject: r.fn.init(1)] <!--文本2--> <div class="c5" id="d6"> 我是谁 </div> <div class="c5" id="d7"> 登陆：<input type="text"> </div> <!--示例2--> $(".c5:has(input)") [div#d7.c5, prevObject: r.fn.init(1)] 0: div#d7.c5 length: 1 <!--has是多层过滤，上例中的意思是类为c5且里面有input标签-->
注意：
- 这里的has和not不是简单的有和没有的意思。
- ：not和：has通常用.not()和.has()代替。
- $("div:has(.c1)")中的：has(.c1)等价于$("div .c1")，也就是后代里面有c1的div标签。
| 方法 | 解释 |
| next() | 下一个元素 |
| nextAll() | 同一级下面所有元素 |
| nextUntil(元素选择器) | 同一级下面所有元素到那个标签元素为止，不包含截至元素 |
| prev() | 上一个元素 |
| prevAll() | 同一级上面所有元素 |
| prevUntil | 同一级上面所有元素到那个标签元素为止，不包含截至元素 |
| parent() | 父亲元素 |
| parents() | 所有的父亲元素 |
| parentsUntil() | 所有父元素截止到 |
| children() | 儿子们，下一级的所有其它元素 |
| siblings() | 兄弟们，同一级的所有其它元素 |
| find() | 搜索所有与指定表达式匹配的元素，可以找出正在处理元素的后代元素 |
| .first() | 获取匹配的第一个元素 |
| .last() | 获取匹配的最后一个元素 |
| .not() | 从匹配元素中删除与指定表达式匹配的元素 |
| .has() | 保留包含特定后代的元素，去掉那些不包含指定后代的元素 |
示例：
<!--文本--> <div class="c1">赵爷爷 <div class="c11">赵爸爸 <div class="c111">赵大孙</div> <div class="c112">赵二孙</div> </div> <div class="c12">赵二爸</div> </div> <div class="c2">李爷爷</div> <div class="c3">孙爷爷</div> <!--next()--> $(".c1").next() [div.c2, prevObject: r.fn.init(1)] $(".c1").next().next() [div.c3, prevObject: r.fn.init(1)] <!--nextAll()--> $(".c1").nextAll() (2) [div.c2, div.c3, prevObject: r.fn.init(1)] <!--nextUntil()--> $(".c1").nextUntil(".c3") [div.c2, prevObject: r.fn.init(1)] <!--prev()--> $(".c3").prev() [div.c2, prevObject: r.fn.init(1)] $(".c3").prev().prev() [div.c1, prevObject: r.fn.init(1)] <!--prevAll()--> $(".c3").prevAll() (5) [div.c2, div.c1, p#p3, p#p2, p#p1, prevObject: r.fn.init(1)] <!--prevUntil()--> $(".c3").prevUntil(".c1") [div.c2, prevObject: r.fn.init(1)] <!--parent()--> $(".c111").parent() [div.c11, prevObject: r.fn.init(1)] $(".c111").parent().parent() [div.c1, prevObject: r.fn.init(1)] <!--parents()--> $(".c111").parents() (4) [div.c11, div.c1, body, html, prevObject: r.fn.init(1)] <!--parentsUntil()--> $(".c111").parentsUntil(".c1") [div.c11, prevObject: r.fn.init(1)] <!--children()--> $(".c11").children() (2) [div.c111, div.c112, prevObject: r.fn.init(1)] $(".c1").children() (2) [div.c11, div.c12, prevObject: r.fn.init(1)] <!--siblings()--> $(".c11").siblings() [div.c12, prevObject: r.fn.init(1)] $(".c1").siblings() (5) [p#p1, p#p2, p#p3, div.c2, div.c3, prevObject: r.fn.init(1)] <!--更改文本--> <div class="c1">赵爷爷 <div class="c11">赵爸爸 <div class="c111">赵大孙</div> <div class="c112">赵二孙</div> </div> <div class="c12">赵二爸</div> </div> <div class="c2">李爷爷 <div class="c11">李爸爸</div> </div> <div class="c3">孙爷爷</div> <!--find()--> $(".c1").find(".c11") [div.c11, prevObject: r.fn.init(1)] <!--first()--> $(".c1").children().first() [div.c11, prevObject: r.fn.init(2)] <!--last()--> $(".c1").children().last() [div.c12, prevObject: r.fn.init(2)] <!--not()--> $(".c1").children().not(".c12") <!--结果不要c12--> [div.c11, prevObject: r.fn.init(2)] <!--has()--> $(".c1").children().has(".c111") <!--后代中有c111的--> [div.c11, prevObject: r.fn.init(2)]
3.样式操作
（1）样式类
| 命令 | 功能 |
| addClass() | 添加指定的CSS类名 |
| removeClass() | 移除指定的CSS类名 |
| hasClass() | 判断样式是否存在 |
| toggleClass() | 切换CSS类名，如果有就移除，如果没有就添加 |
<!--文本--> <input type="text" class="c1 c2 c3" id="d8"> <!--示例--> $("#d8") [input#d8.c1.c2.c3] $("#d8")[0] <input type="text" class="c1 c2 c3" id="d8"> $("#d8").addClass("c4") [input#d8.c1.c2.c3.c4] $("#d8").removeClass("c4") [input#d8.c1.c2.c3] $("#d8").toggleClass("c1") [input#d8.c2.c3]
（2）CSS
可以使用jQuery调样式
$("div").css("color","red") //设置字体的颜色
（3）位置
- offset()：获取匹配元素在当前窗口的相对偏移或设置元素位置
- position()：获取匹配元素相对元素的偏移
- scrollTop()：获取匹配元素相对滚动条顶部的偏移
- scrollLeft()：获取匹配元素相对滚动条左侧的偏移
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>返回首部</title> <meta http-equiv="x-ua-compatible" content="IE=edge"> <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> <button id="b1" class="btn btn-default">点我</button> <div class="c1"></div> <div class="c3">1</div> <div class="c3">2</div> <div class="c3">3</div> <div class="c3">4</div> <div class="c3">5</div> <div class="c3">6</div> <div class="c3">7</div> <div class="c3">8</div> <div class="c3">9</div> <div class="c3">10</div> <div class="c3">11</div> <div class="c3">12</div> <div class="c3">13</div> <div class="c3">14</div> <div class="c3">15</div> <div class="c3">16</div> <div class="c3">17</div> <div class="c3">18</div> <div class="c3">19</div> <div class="c3">20</div> <div class="c3">21</div> <div class="c3">22</div> <div class="c3">23</div> <div class="c3">24</div> <div class="c3">25</div> <div class="c3">26</div> <div class="c3">27</div> <div class="c3">28</div> <div class="c3">29</div> <div class="c3">30</div> <div class="c3">31</div> <div class="c3">32</div> <div class="c3">33</div> <div class="c3">34</div> <div class="c3">35</div> <div class="c3">36</div> <div class="c3">37</div> <div class="c3">38</div> <div class="c3">39</div> <div class="c3">40</div> <div class="c3">41</div> <div class="c3">42</div> <div class="c3">43</div> <div class="c3">44</div> <div class="c3">45</div> <div class="c3">46</div> <div class="c3">47</div> <div class="c3">48</div> <div class="c3">49</div> <div class="c3">50</div> <div class="c3">51</div> <div class="c3">52</div> <div class="c3">53</div> <div class="c3">54</div> <div class="c3">55</div> <div class="c3">56</div> <div class="c3">57</div> <div class="c3">58</div> <div class="c3">59</div> <div class="c3">60</div> <div class="c3">61</div> <div class="c3">62</div> <div class="c3">63</div> <div class="c3">64</div> <div class="c3">65</div> <div class="c3">66</div> <div class="c3">67</div> <div class="c3">68</div> <div class="c3">69</div> <div class="c3">70</div> <div class="c3">71</div> <div class="c3">72</div> <div class="c3">73</div> <div class="c3">74</div> <div class="c3">75</div> <div class="c3">76</div> <div class="c3">77</div> <div class="c3">78</div> <div class="c3">79</div> <div class="c3">80</div> <div class="c3">81</div> <div class="c3">82</div> <div class="c3">83</div> <div class="c3">84</div> <div class="c3">85</div> <div class="c3">86</div> <div class="c3">87</div> <div class="c3">88</div> <div class="c3">89</div> <div class="c3">90</div> <div class="c3">91</div> <div class="c3">92</div> <div class="c3">93</div> <div class="c3">94</div> <div class="c3">95</div> <div class="c3">96</div> <div class="c3">97</div> <div class="c3">98</div> <div class="c3">99</div> <div class="c3">100</div> <button id="b2" class="btn btn-default c2 hide">返回顶部</button> <script src="jquery-3.2.1.min.js"></script> <script> $("#b1").on("click", function () { $(".c1").offset({left: 200, top:200}); }); $(window).scroll(function () { //当向下滚动超过100px，就把右下角那个返回顶部的按钮显示出来 if ($(window).scrollTop() > 100) { $("#b2").removeClass("hide"); }else { //否则就隐藏 $("#b2").addClass("hide"); } }); $("#b2").on("click", function () { $(window).scrollTop(0); }) </script> </body> </html>
（4）尺寸
- height()
- width()
- innerHeight()
- innerWidth()
- outerHeight()
- outerWidth()
<!--文本--> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta http-equiv="x-ua-compatible" content="IE=edge"> <style> .c1 { background-color: red; height: 200px; width: 400px; padding: 10px; margin: 20px; border: 5px solid black; } </style> </head> <body> <div class="c1"></div> <script src="jquery-3.2.1.min.js"></script> </body> </html> <!--操作--> $(".c1").height() 200 $(".c1").width() 400 $(".c1").innerWidth() 420 $(".c1").outerWidth() 430 $(".c1").innerHeight() 220 $(".c1").outerHeight() 230
4.文本操作
（1）HTML代码
- html()：取得第一个匹配元素的html内容
- html(val)：设置所有匹配元素的html内容
$("#d1").html() " div <p>div中的p</p> " $("#d1").html("<span>我是谁</span>") [div#d1]
（2）文本值
- text()：取得所有匹配元素的内容
- text(val)：设置所有匹配元素的内容
$("#d1").text()
"我是谁"
$("#d1").text("哈哈哈")
[div#d1]
（3）值
- val()：取得第一个匹配元素的当前值
- val(val)：设置所有匹配元素的值
- val([val1，val2])：设置checkbox、select的值
<!--文本--> <label for="s1">城市</label> <select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select> <hr> <label for="s2">爱好</label> <select id="s2" multiple="multiple"> <option value="basketball" selected>篮球</option> <option value="football">足球</option> <option value="doublecolorball" selected>双色球</option> </select> <script src="jquery-3.2.1.min.js"></script> <script> // 单选下拉框 $("#s1").val("shanghai"); // 多选下拉框 $("#s2").val(["basketball", "football"]); </script> <!--测试--> $("#s1").val() "shanghai" $("#s1").val("beijing") [select#s1] $("#s2").val(["football","basketball"]) [select#s2] <--文本2--> <input type="checkbox" name="hobby" value="basketball">篮球 <input type="checkbox" name="hobby" value="football">足球 <input type="checkbox" name="hobby" value="pingpeng">乒乓球 <!-$("input[name='hobby']").val(['football','pingpeng']) (3) [input, input, input, prevObject: r.fn.init(1)]-测试-->
<!-- 效果： 1.点击提交，如果输入是空会在后面显示， 2.当失去焦点，也会进行判定 --> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta http-equiv="x-ua-compatible" content="IE=edge"> </head> <body> <form> <div> <label for="input-name">用户</label> <input type="text" id="input-name" name="password"> <span class="error"></span> </div> <div> <label for="input-password">密码</label> <input type="password" id="input-password" name="password"> <span class="error"></span> </div> <div> <input type="button" id="btn" value="提交"> </div> </form> <script src="jquery-3.2.1.min.js"></script> <script> //提交绑定的事件 $("#btn").click(function () { var username = $("#input-name").val(); var password = $("#input-password").val(); //获取input框的值，根据其长度来判断其是否为空 if (username.length === 0) { //如果为空，在后面显示文本内容 $("#input-name").siblings(".error").text("用户不能为空"); } if (password.length === 0) { $("#input-password").siblings(".error").text("密码不能为空") } }); //当失去焦点之后，会触发以下事件 $("#input-name").on("blur", function () { var username = $("#input-name").val(); if (username.length === 0) { $("#input-name").siblings(".error").text("用户不能为空"); } }) $("#input-password").on("blur", function () { var username = $("#input-password").val(); if (username.length === 0) { $("#input-password").siblings(".error").text("密码不能为空"); } }) </script> </body> </html>
<!--代码--> <div id="divTest" value='2'> 这是div的内容！ <label id="lblText"> 这是label的内容！ </label> <div id="divTest2"> 第二个div内容！ </div> </div> <select id="selectVal"> <option value="1" selected="selected">1</option> <option value="2" >2</option> </select> <input type="hidden" id="hidVal" value="1"/> <script src="../jquery-3.2.1.min.js"></script> <!--测试--> $("#divTest").text() " 这是div的内容！ 这是label的内容！ 第二个div内容！ " <!--有结果--> $("#divTest").html() " 这是div的内容！ <label id="lblText"> 这是label的内容！ </label> <div id="divTest2"> 第二个div内容！ </div> " $("#divTest").val() "" $("#divTest2").val() "" <!--对于非表单，val不能使用--> <!--对于表单来说--> $("#selectVal").text() " 1 2 " <!--返回文本--> $("#selectVal").html() " <option value="1" selected="selected">1</option> <option value="2">2</option> " <!--返回代码--> $("#selectVal").val() "2" <!--返回当前值或者第一个匹配值--> <!-- 总结： html()、text()、val()三种方法都是用来读取限定元素的内容，只不过html()是用来读取元素的HTML内容，包括其HTML标签。 text()用来读取元素的纯文本内容，包括其后代元素。 val()是用来读取表单元素的“value”值。 val()只能用在select、input等上面，而html()和text()不能用在input上。 -->
5.属性操作
用于ID等或自定义的属性：
- attr(attrName)：返回第一个匹配元素的属性值
- attr(attrName,attrValue)：为所有匹配元素设置一个属性
- attr({k1:v1,k2:v2})：为所有匹配元素设置多个属性
- removeAttr() ：从每个匹配的元素中删除一个属性
$("#d1")
[div#d1]
$("#d1").attr('like')
"girl"
$("#d1").attr('like','boy')
[div#d1]
$("#d1").attr('like')
"boy"
用于checkbox和radio：
- prop()：获取属性
- removeProp()：移除属性
$("input[value='2']").prop("checked")
false
$("input[value='11']").prop("checked",true)
[input, prevObject: r.fn.init(1)]
6.文档处理
（1）添加到指定元素内部的后面
- $(A).append(B)：把B追加到A
- $(A).appendTo(B)：把A追加到B
<!--文本-->
<ul>
<li>222</li>
<li>333</li>
</ul>
<!--操作-->
var liEle = document.createElement("li")
$(liEle).text("444")
$("ul").append(liEle)
<!--文本-->
<P id="d1">one</P>
<!--操作-->
$("<b>TWO</b>").appendTo("p")
（2）添加到指定元素内部的前面
- $(A).prepend(B)：把B前置到A
- $(A).prependTo(B)：把A前置到B
<!--文本-->
<ul>
<li>222</li>
<li>333</li>
</ul>
<!--操作-->
var liEle = document.createElement("li")
$(liEle).text("111")
$("ul").prepend(liEle)
<!--文本-->
<P id="d1">one</P>
<!--操作-->
$("<b>ZERO</b>").prependTo("p")
（3）添加到指定元素外部的后面
- $(A).after(B)：把B放在A的后面
- $(A).insertBefore(B)：把A放在B的后面
<!--文本--> <P id="d1">one</P> <!--操作--> var pEle = document.createElement("p") $(pEle).text("two") $("#d1").after(pEle)
（4）添加到指定元素外部的前面
- $(A).before(B)：把B放在A的前面
- $(A).insertBefore(B)：把A放在B的前面
<!--文本--> <P id="d1">one</P> <!--操作--> var pEle = document.createElement("p") $(pEle).text("zero") $("#d1").before(pEle)
（5）移除和清空元素
- remove()：从DOM中删除所有匹配的元素
- empty()：删除匹配的元素集合中所有的子节点
（6）替换
- replaceWith()
- replaceAll()
$("p").replaceWith("<i>ONE</i>")
$("<i>ONE</i>").replaceAll("p")
replaceWith()和replaceAll()作用相同，都可以用指定的HTML内同替换被选的元素。
差异在于语法：内容和选择器的位置的不同，同时replaceWith()能够使用函数进行替换。
（7）克隆
- clone()
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>克隆示例</title>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<style>
.c1 {
background-color: deeppink;
padding: 20px;
color: white;
margin: 5px;
border: none;
}
</style>
</head>
<body>
<button class="c1">一到满级，刀刀暴击</button>
<script src="../jquery-3.2.1.min.js"></script>
<script>
$(".c1").on("click",function () {
$(this).clone(true).insertAfter(this);
})
</script>
</body>
</html>
三、事件
1.常用事件
- click()：当点击元素时会触发click事件
- hover()：
- blur()：当元素失去焦点（blur）触发
- focus()：当元素获得焦点时（focus）触发
- keyup()：一个按键按下时触发
- keydown()：一个按键松开时触发
- change()：当元素的值发生改变，会发生change事件，该事件仅适用于文本域
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<script src="../jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function () {
$("input").focus(function () {
$("input").css("background-color", "#FFFFCC");
});
$("input").blur(function () {
$("input").css("background-color", "#D6D6FF");
});
// 上方绑定事件，下面能够直接进行触发
$("#btn1").click(function () {
$("input").focus();
});
$("#btn2").click(function () {
$("input").blur();
});
});
</script>
</head>
<body>
Enter your name: <input type="text"/>
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
<p>
<button id="btn1">触发输入域的 focus 事件</button>
</p>
<p>
<button id="btn2">触发输入域的 blur 事件</button>
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>按键示例</title>
<meta http-equiv="x-ua-compatible" content="IE=edge">
</head>
<body>
<table border="2" width="200px">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id="d1" class="c1"></td>
<td>科比</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="d2" class="c1"></td>
<td>毛线</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="d3" class="c1"></td>
<td>小鸟</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
</tbody>
</table>
<hr>
<input type="button" id="b1" value="全选">
<input type="button" id="b3" value="反选">
<input type="button" id="b2" value="取消">
<script src="../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 () {
var flag = $(this).prop("checked");
$(this).prop("checked", !flag);
})
});
//按住shelf，批量操作
var flag;
//1.搞清楚事件由什么触发 ——》select的change触发
//2.根据按没按shift键，做不同处理
//3.如何判断shift有没有被按下
//4利用标志位
$("select").on("change",function () {
//全局window。绑定事件，由于触发keydown这个操作
$(window).on("keydown",function () {
if (event.keyCode === 16){
//就执行批量操作
flag=true;
}
});
//当shift键抬起来的时候，让变量失效
$(window).on("keyup",function () {
if (event.keyCode === 16){
flag=true;
}
});
$("select").on("change",function () {
if (flag) {
//1.取到当前select选中的那个值
//拿到这个值
var optionValue = $(this).val()
//2.把所有选中的checkbox那一行的select设置为指定的值
$("input:checked").parent().parent().find("select").val(optionValue)
}
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<script src="../jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function () {
$("input").on("change",function () {
$(this).css("background-color","red")
});
});
</script>
</head>
<body>
请输入：<input type="text">
</body>
</html>
<!--当向文本框中输入文本的时背景颜色改变-->
2.事件绑定
.on(event [,selector],function{})
- events：事件
- selector：选择器（可选的）
- function：事件处理函数
3.移除事件
.off(events [,selector][,function(){}])
off()方法移除用.on()绑定的事件处理程序
4.阻止后续事件执行
- return false：常见阻止表单提交
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<script src="../jquery-3.2.1.min.js"></script>
<script>
var one = [1,2,3,4,5];
// each循环，return false类似break的作用
$.each(one,function (i,v) {
console.log(i,v);
if (v===3){
return false;
// 只会打印1、2、3
}
})
</script>
</head>
<body>
</body>
</html>
5.页面载入（ready）
当DOM已经加载，并且页面已经完全呈现时，会发生ready事件。
由于该事件在文档就绪后发生，因此把所有其它jQuery事件和函数置于该事件中是非常好的做法。
这样可以极大的提高网页的加载速度。
ready()函数仅能用于当前文档，因此无需选择器。
两种写法：
$(document).ready(function) { //在这里写你的JS代码 }
简写：
$(function(){ //你在这里写你的代码 })
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<!--本来script是要放在下面的，因为文本需要先加载，不然script找不到对象
但是，使用ready就可以让它放在上面-->
<script src="../jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function () {
$(".btn1").click(function () {
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>准备好了吗.</p>
<button class="btn1">NO PROBLEM</button>
</body>
</html>
6.事件委托
事件委托是通过事件冒泡地原理，利用父标签去触发子标签地事件。
示例：表格中每一行的编辑和删除按钮都能触发相应的事件
$("table").on("click",".delete",function(){
//删除按钮绑定的事件
})
四、动画效果
1.基本
- hide：隐藏
- show：显示
- toggle：此前隐藏就显示，此前显示就隐藏
语法：
$(selector).hide(speed,callback); $(selector).show(speed,callback); $(selector).toggle(speed,callback); 可选参数speed规定隐藏/显示的速度 可选参数callback是隐藏或显示之后所执行的函数名称
2.滑动
- slideDown：滑入
- slideUp：滑出
- slideToggle：根据状态取反态
语法：
$(selector).slideDown(speed,callback); $(selector).slideUp(speed,callback); $(selector).slideToggle(speed,callback); 可选参数speed规定隐藏/显示的速度 可选参数callback是隐藏或显示之后所执行的函数名称
3.淡入淡出
- fadeIn：淡入
- fadeOut：淡出
- fadeTo：允许渐变为给定的不透明值
- fadeToggle：根据状态取反态
语法：
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);（speed、opacity必选）
参数解释：
speed参数规定效果时长
callback参数是该函数完成后所执行的函数名称
opacity透明度的值
4.自定义
- animate：执行CSS自定义动画。实质是从一个状态到另一个状态。
语法：
$(selector).animate(styles,speed,easing,callback)
styles：必须，规定产生动画效果的CSS样式和值
speed：可选，规定动画速度
easing：可选，规定在不同的动画中设置动画速度的easing函数。
callback：可选，动画执行完之后要执行的函数
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>动画效果</title> <meta http-equiv="x-ua-compatible" content="IE=edge"> <style> img { margin-left: 400px; height: 300px; position: relative; } </style> </head> <body> <img id="d1" src="http://www.iyi8.com/uploadfile/2017/0409/20170409111824476.jpg"> <hr> <input type="button" value="再见" id="d2"></input> <input type="button" value="回来" id="d3"></input> <input type="button" value="左移" id="d4"></input> <input type="button" value="右移" id="d5"></input> <script src="../jquery-3.2.1.min.js"></script> <script> $("#d2").on("click",function () { $("img").fadeOut(2000) } ); $("#d3").on("click",function () { $("img").fadeIn(2000) } ); $("#d4").on("click",function () { $("#d1").animate({ left:"-50px" },1000) }) $("#d5").on("click",function () { $("#d1").animate({ left:"+50px" },1000) }) </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>点赞动画示例</title> <meta http-equiv="x-ua-compatible" content="IE=edge"> <style> div { /*相对定位*/ position: relative; display: inline-block; } div>i { /*块级标签设置为内联标签*/ display: inline-block; color: red; /*绝对定位*/ position: absolute; right: -16px; top:-5px; /*透明度，为1代表完全显示*/ opacity: 1; } </style> </head> <body> <div id="d1">赞</div> <script src="../jquery-3.2.1.min.js"></script> <script> $("#d1").on("click",function () { //每次点击，创建一个i标签，<i>斜体</i> var newI = document.createElement("i"); //内容赋值为+1 newI.innerText="+1"; //将这个内容加载后面 $(this).append(newI); $(this).children("i").animate({ opacity:0 },1000) }) </script> </body> </html>
五、补充知识
1.each
each在jQuery中类似于for循环，起到遍历的作用。主要有两种用法：
（1）jQuery.each(collection,callback(indexIinArray,valueofElement)):
描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性来迭代数字索引，从0到length-1.其它对象通过属性名进行迭代。
li = [1,2,3,4,5]
$.each(li,function(i,v){
console.log(i,v); //index是索引，else
})
0 1
1 2
2 3
3 4
4 5
（2）.each(function(index,Element)):
描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。
.each()方法用来迭代jQuery对象中的每一个元素。每次回调函数执行时，会传递当前循环次数作为参数（从0开始计数）。
由于回调函数是当前DOM元素为上下文的语境中触发的，所以关键字this总是指向这个元素。
// 为每一个li标签添加foo
$("li").each(function(){
$(this).addClass("c1");
});
注意：jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素，被称为隐式迭代的过程，这种情况发生时，它通常不需要显示地循环.each()方法：
也就是说，上面地例子没有必要使用each()方法，直接下面这样写就可以了：
$("li").addClass("c1"); // 对所有标签做统一操作
注意：
在遍历过程中可以使用return false提前结束each循环。
$.each(li,function(i,v){
if (i===3){
return false} //跳出循环
console.log(i,v)
})
0 1
1 2
2 3
顺便演示return结束函数地功能：
$.each(li,function(i,v){ if (i===3){ return } //只是结束当前函数 console.log(i,v) }) 0 1 1 2 2 3 4 5
2.data
在匹配地元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data(key,value):
描述：在匹配的元素上存储任意相关数据
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
.data(key):
描述：返回匹配的元素集合中的一个元素的给定名称的数据存储的值——通过.data(name,value)或HTML5 data-*属性设置
$("#d1").data("k") //返回结果100
.removeData(key):
描述：移除存放在元素上的数据，不加key参数表示移除所有数据的数据
$("div").removeData("k"); //移除元素上存放k对应的数据
3.插件
插件一般有两种，一种直接面向jQuery，一种面向jQuery对象。
（1）jQuery.extend(object)
jQuery的命名空间下添加新的功能。多用于插件开发者向jQuery中添加新函数时使用。
<script> jQuery.extend({ min:function(a, b){return a < b ? a : b;}, max:function(a, b){return a > b ? a : b;} }); jQuery.min(2,3);// => 2 jQuery.max(4,5);// => 5 </script>
（2）jQuery.fn.extend(object)
一个对象的内容合并到jQuery的原型，以提供新的jQuery示例方法。
<script> jQuery.fn.extend({ check:function(){ return this.each(function(){this.checked =true;}); }, uncheck:function(){ return this.each(function(){this.checked =false;}); } }); // jQuery对象可以使用新添加的check()方法了。 $("input[type='checkbox']").check(); </script>
许多时候会将插件写在一个单独的文件中，一般是采取如下模式：
//传参，避免$被变量占用 //使用自执行函数，这样避免多个插件之间的变量混淆 //然后将代码包在中间 (function(jq){ jq.extend({ funcName:function(){ ... }, }); })(jQuery);
自定义的jQuery登陆验证插件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>登录校验示例</title> <style> .login-form { margin: 100px auto 0; max-width: 330px; } .login-form > div { margin: 15px 0; } .error { color: red; } </style> </head> <body> <div> <form action="" class="login-form" novalidate> <div> <label for="username">姓名</label> <input id="username" type="text" name="name" required autocomplete="off"> <span class="error"></span> </div> <div> <label for="passwd">密码</label> <input id="passwd" type="password" name="password" required autocomplete="off"> <span class="error"></span> </div> <div> <label for="mobile">手机</label> <input id="mobile" type="text" name="mobile" required autocomplete="off"> <span class="error"></span> </div> <div> <label for="where">来自</label> <input id="where" type="text" name="where" autocomplete="off"> <span class="error"></span> </div> <div> <input type="submit" value="登录"> </div> </form> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="validate3.js"></script> <script> $.validate({"name":{"required": true}, "password": {"required": true, "minLength": 8}, "mobile": {"required": true}}); </script> </body> </html>
"use strict"; (function ($) { function check() { // 定义一个标志位，表示验证通过还是验证不通过 var flag = true; var errMsg; // 校验规则 $("form input[type!=':submit']").each(function () { var labelName = $(this).prev().text(); var inputName = $(this).attr("name"); var inputValue = $(this).val(); if ($(this).attr("required")) { // 如果是必填项 if (inputValue.length === 0) { // 值为空 errMsg = labelName + "不能为空"; $(this).next().text(errMsg); flag = false; return false; } // 如果是密码类型，我们就要判断密码的长度是否大于6位 if (inputName === "password") { // 除了上面判断为不为空还要判断密码长度是否大于6位 if (inputValue.length < 6) { errMsg = labelName + "必须大于6位"; $(this).next().text(errMsg); flag = false; return false; } } // 如果是手机类型，我们需要判断手机的格式是否正确 if (inputName === "mobile") { // 使用正则表达式校验inputValue是否为正确的手机号码 if (!/^1[345678]\d{9}$/.test(inputValue)) { // 不是有效的手机号码格式 errMsg = labelName + "格式不正确"; $(this).next().text(errMsg); flag = false; return false; } } } }); return flag; } function clearError(arg) { // 清空之前的错误提示 $(arg).next().text(""); } // 上面都是我定义的工具函数 $.extend({ validate: function () { $("form :submit").on("click", function () { return check(); }); $("form :input[type!='submit']").on("focus", function () { clearError(this); }); } }); })(jQuery);
传参版
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>登录校验示例</title> <style> .login-form { margin: 100px auto 0; max-width: 330px; } .login-form > div { margin: 15px 0; } .error { color: red; } </style> </head> <body> <div> <form action="" class="login-form" novalidate> <div> <label for="username">姓名</label> <input id="username" type="text" name="name" required autocomplete="off"> <span class="error"></span> </div> <div> <label for="passwd">密码</label> <input id="passwd" type="password" name="password" required autocomplete="off"> <span class="error"></span> </div> <div> <label for="mobile">手机</label> <input id="mobile" type="text" name="mobile" required autocomplete="off"> <span class="error"></span> </div> <div> <label for="where">来自</label> <input id="where" type="text" name="where" autocomplete="off"> <span class="error"></span> </div> <div> <input type="submit" value="登录"> </div> </form> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="validate3.js"></script> <script> $.validate({"name":{"required": true}, "password": {"required": true, "minLength": 8}, "mobile": {"required": true}}); </script> </body> </html>
"use strict"; (function ($) { function check(arg) { // 定义一个标志位，表示验证通过还是验证不通过 var flag = true; var errMsg; // 校验规则 $("form input[type!=':submit']").each(function () { var labelName = $(this).prev().text(); var inputName = $(this).attr("name"); var inputValue = $(this).val(); if (arg[inputName].required) { // 如果是必填项 if (inputValue.length === 0) { // 值为空 errMsg = labelName + "不能为空"; $(this).next().text(errMsg); flag = false; return false; } // 如果是密码类型，我们就要判断密码的长度是否大于6位 if (inputName === "password") { // 除了上面判断为不为空还要判断密码长度是否大于6位 if (inputValue.length < arg[inputName].minLength) { errMsg = labelName + "必须大于"+arg[inputName].minLength+"位"; $(this).next().text(errMsg); flag = false; return false; } } // 如果是手机类型，我们需要判断手机的格式是否正确 if (inputName === "mobile") { // 使用正则表达式校验inputValue是否为正确的手机号码 if (!/^1[345678]\d{9}$/.test(inputValue)) { // 不是有效的手机号码格式 errMsg = labelName + "格式不正确"; $(this).next().text(errMsg); flag = false; return false; } } } }); return flag; } function clearError(arg) { // 清空之前的错误提示 $(arg).next().text(""); } // 上面都是我定义的工具函数 $.extend({ validate: function (arg) { $("form :submit").on("click", function () { return check(arg); }); $("form :input[type!='submit']").on("focus", function () { clearError(this); }); } }); })(jQuery);
综合示例：
示例1：全选、反选（使用Jquery编写）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>作业</title>
<meta http-equiv="x-ua-compatible" content="IE=edge">
</head>
<body>
<input id="b1" type="button" value="全选" >
<input id="b2" type="button" value="反选" >
<input id="b3" type="button" value="取消" >
<hr>
<table border="2" width="200px">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id="d1" class="c1"></td>
<td>科比</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox" id="d2" class="c1"></td>
<td>毛线</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox" id="d3" class="c1"></td>
<td>小鸟</td>
<td>男</td>
</tr>
</tbody>
</table>
<script src="jquery-3.2.1.min.js"></script>
<script>
//事件绑定，当clieck点击事件的时候，全选
$("#b1").on("click",function () {
$("input:checkbox").prop("checked",true);
});
//先找出所有的checkbox，一个一个去判断
$("#b2").on("click",function () {
var $checkboxs = $(":checkbox");
//each迭代
$.each($checkboxs,function () {
if ($(this).prop("checked")){
$(this).prop("checked",false);
}else {
// 修改属性
$(this).prop("checked",true);
}
})
})
$("#b3").on("click",function () {
// 将所有的属性改为false
$("input:checkbox").prop("checked",false);
})
</script>
</body>
</html>
扫一扫
346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
