知识内容：
1.jQuery大致了解
2.jQuery基础语法
3.jQuery事件
4.jQuery实例
5.jQuery动画效果
6.jQuery补充
预备知识：DOM基本操作与事件
参考：
http://www.cnblogs.com/liwenzhou/p/8178806.html
jQuery官网：https://jquery.com/
jQuery中文文档：http://jquery.cuishifeng.cn/
一、jQuery大致了解
1.jQuery基本介绍
(1)为什么要学jQuery：jQuery使用户更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“，换句话说干同样的事花的时间更少
(2)jquery是什么：jQuery是一个轻量级的、兼容多浏览器的JavaScript库，这里的库就类似python的第三方模块，别人写好(封装)好的代码，我们可以直接使用
(3)jQuery的优势：轻量级；丰富的DOM选择器；链式表达式；事件、样式、动画支持；Ajax操作支；跨浏览器兼容；可以添加插件拓展开发
2.jQuery内容与版本
(1)jQuery内容：
- 选择器、筛选器
- 样式操作、文本操作、属性操作、文档处理
- 事件、动画效果、插件
- 数组操作(each等方法)、data、Ajax
(2)jQuery版本：
- 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了
- 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x
- 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本
3.jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。
jQuery对象和DOM对象的使用(注意 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也不能使用 jQuery里的任何方法)：
$("#i1").html(); // jQuery对象使用jQuery的方法
$("#i1")[0].innerHTML; // DOM对象使用DOM的方法
jQuery和DOM对象之间可以互相转换：
1 jQuery对象转DOM对象: 用索引取出具体的标签 $item[index] 2 DOM对象转jQuery对象: $(DOM对象)
我们在声明一个jQuery对象变量的时候在变量名前面加上$(便于区分jQuery对象和DOM对象)：
1 var $variable =》 jQuery对像 2 var variable =》 DOM对象
二、jQuery基础语法
1.查找标签
(1)jQuery选择器 -> 类似CSS
所有选择器：
1 // id选择器： 2 $("#id") 3 4 // 标签选择器： 5 $("tagName") 6 7 // class选择器： 8 $(".className") 9 10 // 配合使用： 11 $("div.c1") // 找到有c1 class类的div标签 12 13 // 所有元素选择器： 14 $("*") 15 16 // 组合选择器： 17 $("#id, .className, tagName") 18 19 // 层级选择器： 20 // x和y可以为任意选择器 21 $("x y"); // x的所有后代y（子子孙孙） 22 $("x > y"); // x的所有儿子y（儿子） 23 $("x + y"); // 找到所有紧挨在x后面的y 24 $("x ~ y"); // x之后所有的兄弟y 25 26 // 属性选择器： 27 [attribute] 28 [attribute=value]// 属性等于 29 [attribute!=value]// 属性不等于 30 31 // 属性选择器： 32 <input type="text"> 33 <input type="password"> 34 <input type="checkbox"> 35 $("input[type='checkbox']");// 取到checkbox类型的input标签 36 $("input[type!='text']");// 取到类型不是text的input标签
基本筛选：
1 :first // 第一个 2 :last // 最后一个 3 :eq(index) // 索引等于index的那个元素 4 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 5 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 6 :gt(index) // 匹配所有大于给定索引值的元素 7 :lt(index) // 匹配所有小于给定索引值的元素 8 :not(元素选择器) // 移除所有满足not条件的标签 9 :has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) 10 11 // 实例: 12 $("div:has(h1)") // 找到所有后代中有h1标签的div标签 13 $("div:has(.c1)") // 找到所有后代中有c1样式类的div标签 14 $("li:not(.c1)") // 找到所有不包含c1样式类的li标签 15 $("li:not(:has(a))") // 找到所有后代中不含a标签的li标签
表单常用筛选：
1 :text 2 :password 3 :file 4 :radio 5 :checkbox 6 7 :submit 8 :reset 9 :button 10 11 // 实例: 12 $(":checkbox") // 找到所有的checkbox
表单对象属性:
1 :enabled 2 :disabled 3 :checked 4 :selected 5 6 7 // 实例 - 找到可用的input标签 8 9 <form> 10 <input name="email" disabled="disabled" /> 11 <input name="id" /> 12 </form> 13 14 $("input:enabled") // 找到可用的input标签 15 16 17 // 实例 - 找到被选中的option 18 19 <select id="s1"> 20 <option value="beijing">北京市</option> 21 <option value="shanghai">上海市</option> 22 <option selected value="guangzhou">广州市</option> 23 <option value="shenzhen">深圳市</option> 24 </select> 25 26 $(":selected") // 找到所有被选中的option
(2)jQuery筛选器
下一个元素：
1 $("#id").next() 2 $("#id").nextAll() 3 $("#id").nextUntil("#i2")
上一个元素：
1 $("#id").prev() 2 $("#id").prevAll() 3 $("#id").prevUntil("#i2")
父亲元素：
1 $("#id").parent() 2 $("#id").parents() // 查找当前元素的所有的父辈元素 3 $("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止
儿子和兄弟元素：
1 $("#id").children();// 儿子们 2 $("#id").siblings();// 兄弟们
查找和筛选：
1 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法 2 $("div").find("p") 等价于 $("div p") 3 4 筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式 5 $("div").filter(".c1") 等价于 $("div.c1")
最近的元素：
1 closest -> 找出指定的最近的元素 2 $(xxx).closest('.todo-cell').remove()
补充：
.first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素
2.操作标签
(1)样式操作
样式相关：
1 addClass(); // 添加指定的CSS类名。 2 removeClass(); // 移除指定的CSS类名。 3 hasClass(); // 判断样式存不存在 4 toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加。
css样式：
1 DOM: tag.style.color = "red" 2 jQuery: $("div").css("color", "red")
另外jQuery中同时修改多个变量时直接传入键值对。例如: $(this).css({"color": "red", "font-size": "24px"})
位置相关：
1 offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置 2 position() // 获取匹配元素相对父元素的偏移 3 scrollTop() // 获取匹配元素相对滚动条顶部的偏移 4 scrollLeft() // 获取匹配元素相对滚动条左侧的偏移
尺寸相关：
1 height() 2 width() 3 innerHeight() 4 innerWidth() 5 outerHeight() 6 outerWidth()
(2)文本操作
HTML代码(相当于innerHTML)：
1 html() // 取得第一个匹配元素的html内容 2 html(val) // 设置所有匹配元素的html内容
文本值(相当于innerText)：
1 text() // 取得所有匹配元素的内容 2 text(val) // 设置所有匹配元素的内容
值(相当于value)：
1 val() // 取得第一个匹配元素的当前值 2 val(val) // 设置所有匹配元素的值 3 val([val1, val2]) // 设置checkbox、select的值
实例 - 获取被选中的checkbox或radio的值：
1 <label for="c1">女</label> 2 <input name="gender" id="c1" type="radio" value="0"> 3 <label for="c2">男</label> 4 <input name="gender" id="c2" type="radio" value="1"> 5 6 $("input[name='gender']:checked").val()
(3)属性操作及特性操作
用于ID等或自定义属性：
1 attr(attrName) // 返回第一个匹配元素的属性值 2 attr(attrName, attrValue) // 为所有匹配元素设置一个属性值 3 attr({k1: v1, k2:v2}) // 为所有匹配元素设置多个属性值 4 removeAttr() // 从每一个匹配的元素中删除一个属性
用于checkbox和radio：
1 prop() // 获取属性 2 removeProp() // 移除属性
注意：
在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")
1 <input type="checkbox" value="1"> 2 <input type="radio" value="2"> 3 <script> 4 $(":checkbox[value='1']").prop("checked", true); 5 $(":radio[value='2']").prop("checked", true); 6 </script>
data方法：
1 <div id="myDiv" data-id="123"></div> 2 3 // 获取属性 4 var appid = $("#myDiv").data("id"); //123 5 6 // 属性赋值 7 $("#myDiv").data("id","666"); 8 9 10 // 注意 11 data()的值进行修改并不会影响到DOM元素上的data-*属性的改变。data()的本质其实是将一个 “cache” 附加到了对象上，并使用了一个特殊的属性名称。 12 所以上述代码中，虽然对div进行了data()赋值操作，但HTML代码中div的data-id的值仍然为123，因为data()只是修改了缓存的那个值，此时进行$('#myDiv').data("id")的操作，输出的结果为666
(4)文档处理
1 添加到指定元素内部的后面: 2 $(A).append(B) // 把B追加到A 3 $(A).appendTo(B) // 把A追加到B 4 5 添加到指定元素内部的前面: 6 $(A).prepend(B) // 把B前置到A 7 $(A).prependTo(B) // 把A前置到B 8 9 添加到指定元素外部的后面: 10 $(A).after(B) // 把B放到A的后面 11 $(A).insertAfter(B) // 把A放到B的后面 12 13 添加到指定元素外部的前面: 14 $(A).before(B) // 把B放到A的前面 15 $(A).insertBefore(B) // 把A放到B的前面 16 17 移除和清空元素: 18 remove() // 从DOM中删除所有匹配的元素 19 empty() // 删除匹配的元素集合中所有的子节点 20 例子： 21 点击按钮在表格添加一行数据 22 点击每一行的删除按钮删除当前行数据 23 24 替换: 25 replaceWith() 26 replaceAll() 27 28 克隆: 29 clone()// 参数
(5)其他
show() // 显示一个元素 hide() // 隐藏一个元素 toggle() // 显示或隐藏一个元素
三、jQuery事件
1.常用事件和事件的绑定与移除
(1)常用事件
1 click(function(){...}) 2 hover(function(){...}) 3 blur(function(){...}) 4 focus(function(){...}) 5 change(function(){...}) 6 keyup(function(){...})
(2)事件绑定
1 .on( events [, selector ],function(){}) 2 events： 事件 3 selector: 选择器（可选的） 4 function: 事件处理函数
添加selector时适用于给未来的元素(页面生成的时候还没有的标签) 绑定事件 (事件委托)
(3)事件移除
1 .off( events [, selector ][,function(){}]) 2 off() 方法移除用 .on()绑定的事件处理程序 3 events： 事件 4 selector: 选择器（可选的） 5 function: 事件处理函数
2.组织后续事件执行
组织后续事件执行可以直接使用 return false; // 常见阻止表单提交等
注意：像click、keydown等DOM中定义的事件，我们都可以使用`.on()`方法来绑定事件，但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。
想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：
1 $('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件 2 $(this).addClass('hover'); 3 }); 4 $('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件 5 $(this).removeClass('hover'); 6 });
3.页面载入和事件委托
(1)页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
两种写法：
1 $(document).ready(function(){ 2 // 在这里写你的JS代码... 3 }) 4 5 简写： 6 $(function(){ 7 // 你在这里写你的代码 8 })
(2)事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件，适用于 给未来的元素(页面生成的时候还没有的标签)绑定事件 (事件委托)
实例-表格中每一行的编辑和删除按钮都能触发相应的事件：
1 $("table").on("click", ".delete", function () { 2 // 删除按钮绑定的事件 3 })
四、jQuery实例
1.自定义模态框实现弹出和隐藏功能
1 <!-- author: wyb --> 2 <!DOCTYPE html> 3 <html lang="zh-CN"> 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="x-ua-compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <title>自定义模态框</title> 9 <style> 10 .cover { 11 position: fixed; 12 left: 0; 13 right: 0; 14 top: 0; 15 bottom: 0; 16 background-color: darkgrey; 17 z-index: 999; 18 } 19 20 .modal { 21 600px; 22 height: 400px; 23 background-color: white; 24 position: fixed; 25 left: 50%; 26 top: 50%; 27 margin-left: -300px; 28 margin-top: -200px; 29 z-index: 1000; 30 } 31 32 .hide { 33 display: none; 34 } 35 </style> 36 </head> 37 <body> 38 <input type="button" value="弹出模板框" id="i0"> 39 40 <div class="cover hide"></div> 41 <div class="modal hide"> 42 <label for="i1">姓名</label> 43 <input id="i1" type="text"> 44 <label for="i2">爱好</label> 45 <input id="i2" type="text"> 46 <input type="button" id="i3" value="关闭"> 47 </div> 48 49 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 50 <script> 51 var tButton = $("#i0")[0]; 52 tButton.onclick = function () { 53 var coverEle = $(".cover")[0]; 54 var modalEle = $(".modal")[0]; 55 56 $(coverEle).removeClass("hide"); 57 $(modalEle).removeClass("hide"); 58 }; 59 60 var cButton = $("#i3")[0]; 61 cButton.onclick = function () { 62 var coverEle = $(".cover")[0]; 63 var modalEle = $(".modal")[0]; 64 65 $(coverEle).addClass("hide"); 66 $(modalEle).addClass("hide"); 67 } 68 </script> 69 70 </body> 71 </html>
2.左侧菜单
1 <!-- author: wyb --> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="x-ua-compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <title>左侧菜单示例</title> 9 <style> 10 .left-menu { 11 position: fixed; 12 left: 0; 13 top: 0; 14 20%; 15 height: 100%; 16 background-color: rgb(47, 53, 61); 17 } 18 19 .right-menu { 20 80%; 21 height: 100%; 22 } 23 24 .menu { 25 color: white; 26 } 27 28 .title { 29 text-align: center; 30 padding: 10px 15px; 31 border-bottom: 1px solid #23282e; 32 } 33 34 .items { 35 background-color: #181c20; 36 37 } 38 .item { 39 padding: 5px 10px; 40 border-bottom: 1px solid #23282e; 41 } 42 43 .hide { 44 display: none; 45 } 46 </style> 47 </head> 48 49 <body> 50 51 <div class="left-menu"> 52 <div class="menu"> 53 <div class="title">菜单一</div> 54 <div class="items"> 55 <div class="item">111</div> 56 <div class="item">222</div> 57 <div class="item">333</div> 58 </div> 59 <div class="title">菜单二</div> 60 <div class="items hide"> 61 <div class="item">111</div> 62 <div class="item">222</div> 63 <div class="item">333</div> 64 </div> 65 <div class="title">菜单三</div> 66 <div class="items hide"> 67 <div class="item">111</div> 68 <div class="item">222</div> 69 <div class="item">333</div> 70 </div> 71 </div> 72 </div> 73 <div class="right-menu"></div> 74 75 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 76 <script> 77 // 思路如下: 78 // 先为所有items元素加上hide 79 // 然后把目标元素去掉hide 80 $(".title").on("click", function (){ // jQuery绑定事件 81 // 为所有菜单项加上hide 82 $(".items").addClass("hide"); 83 // 把当前点击的菜单项的hide去掉 84 $(this).next().removeClass("hide"); 85 86 }); 87 </script> 88 89 </body> 90 </html>
3.返回顶部
1 <!-- author: wyb --> 2 <!DOCTYPE html> 3 <html lang="zh-CN"> 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="x-ua-compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <title>返回顶部</title> 9 <style> 10 .c1 { 11 100px; 12 height: 200px; 13 background-color: red; 14 } 15 16 .c2 { 17 height: 50px; 18 50px; 19 20 position: fixed; 21 bottom: 15px; 22 right: 15px; 23 background-color: #2b669a; 24 } 25 26 .hide { 27 display: none; 28 } 29 30 .c3 { 31 height: 100px; 32 } 33 </style> 34 </head> 35 <body> 36 <div class="content"> 37 <div class="c3">1</div> 38 <div class="c3">2</div> 39 <div class="c3">3</div> 40 <div class="c3">4</div> 41 <div class="c3">5</div> 42 <div class="c3">6</div> 43 <div class="c3">7</div> 44 <div class="c3">8</div> 45 <div class="c3">9</div> 46 <div class="c3">10</div> 47 <div class="c3">11</div> 48 <div class="c3">12</div> 49 <div class="c3">13</div> 50 <div class="c3">14</div> 51 <div class="c3">15</div> 52 <div class="c3">16</div> 53 <div class="c3">17</div> 54 <div class="c3">18</div> 55 <div class="c3">19</div> 56 <div class="c3">20</div> 57 <div class="c3">21</div> 58 <div class="c3">22</div> 59 <div class="c3">23</div> 60 <div class="c3">24</div> 61 <div class="c3">25</div> 62 <div class="c3">26</div> 63 <div class="c3">27</div> 64 <div class="c3">28</div> 65 <div class="c3">29</div> 66 <div class="c3">30</div> 67 <div class="c3">31</div> 68 <div class="c3">32</div> 69 <div class="c3">33</div> 70 <div class="c3">34</div> 71 <div class="c3">35</div> 72 <div class="c3">36</div> 73 <div class="c3">37</div> 74 <div class="c3">38</div> 75 <div class="c3">39</div> 76 <div class="c3">40</div> 77 <div class="c3">41</div> 78 <div class="c3">42</div> 79 <div class="c3">43</div> 80 <div class="c3">44</div> 81 <div class="c3">45</div> 82 <div class="c3">46</div> 83 <div class="c3">47</div> 84 <div class="c3">48</div> 85 <div class="c3">49</div> 86 <div class="c3">50</div> 87 <div class="c3">51</div> 88 <div class="c3">52</div> 89 <div class="c3">53</div> 90 <div class="c3">54</div> 91 <div class="c3">55</div> 92 <div class="c3">56</div> 93 <div class="c3">57</div> 94 <div class="c3">58</div> 95 <div class="c3">59</div> 96 <div class="c3">60</div> 97 <div class="c3">61</div> 98 <div class="c3">62</div> 99 <div class="c3">63</div> 100 <div class="c3">64</div> 101 <div class="c3">65</div> 102 <div class="c3">66</div> 103 <div class="c3">67</div> 104 <div class="c3">68</div> 105 <div class="c3">69</div> 106 <div class="c3">70</div> 107 <div class="c3">71</div> 108 <div class="c3">72</div> 109 <div class="c3">73</div> 110 <div class="c3">74</div> 111 <div class="c3">75</div> 112 <div class="c3">76</div> 113 <div class="c3">77</div> 114 <div class="c3">78</div> 115 <div class="c3">79</div> 116 <div class="c3">80</div> 117 <div class="c3">81</div> 118 <div class="c3">82</div> 119 <div class="c3">83</div> 120 <div class="c3">84</div> 121 <div class="c3">85</div> 122 <div class="c3">86</div> 123 <div class="c3">87</div> 124 <div class="c3">88</div> 125 <div class="c3">89</div> 126 <div class="c3">90</div> 127 <div class="c3">91</div> 128 <div class="c3">92</div> 129 <div class="c3">93</div> 130 <div class="c3">94</div> 131 <div class="c3">95</div> 132 <div class="c3">96</div> 133 <div class="c3">97</div> 134 <div class="c3">98</div> 135 <div class="c3">99</div> 136 <div class="c3">100</div> 137 </div> 138 139 <button id="button-return-top" class="btn btn-default c2 hide">返回顶部</button> 140 141 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 142 <script> 143 $(window).scroll(function () { 144 // 如果滚动条滚动大于100就显示返回顶部按钮 否则不显示返回顶部按钮 145 if ($(window).scrollTop() > 100) { 146 $("#button-return-top").removeClass("hide"); 147 } else { 148 $("#button-return-top").addClass("hide"); 149 } 150 }); 151 // 点击返回顶部按钮后返回顶部 152 $("#button-return-top").on("click", function () { 153 $(window).scrollTop(0); 154 }) 155 </script> 156 157 </body> 158 </html>
4.自定义登录效验
1 <!-- author: wyb --> 2 <!DOCTYPE html> 3 <html lang="zh-CN"> 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="x-ua-compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <title>文本操作之登录验证</title> 9 <style> 10 .error { 11 color: red; 12 } 13 </style> 14 </head> 15 <body> 16 17 <form action=""> 18 <div> 19 <label for="input-name">用户名</label> 20 <input type="text" id="input-name" name="name"> 21 <span class="error"></span> 22 </div> 23 <div> 24 <label for="input-password">密码</label> 25 <input type="password" id="input-password" name="password"> 26 <span class="error"></span> 27 </div> 28 <div> 29 <input type="button" id="btn" value="提交"> 30 </div> 31 </form> 32 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 33 <script> 34 $("#btn").on("click", function () { 35 $("#input-name").siblings(".error").text(""); 36 $("#input-password").siblings(".error").text(""); 37 38 var username = $("#input-name").val(); 39 var password = $("#input-password").val(); 40 41 if (username.length === 0) { 42 $("#input-name").siblings(".error").text("用户名不能为空"); 43 }else if (username.length <= 2) { 44 $("#input-name").siblings(".error").text("用户名长度不能少于3位"); 45 } 46 if (password.length === 0) { 47 $("#input-password").siblings(".error").text("密码不能为空"); 48 } else if (password.length <= 5) { 49 $("#input-password").siblings(".error").text("密码长度不能少于6位"); 50 } 51 }) 52 </script> 53 </body> 54 </html>
5.全选、反选、取消
1 <!-- author: wyb --> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>全选反选取消</title> 8 <style> 9 .container{ 10 60%; 11 margin: 0 auto; 12 } 13 /*显示列表的样式list*/ 14 #list{ 15 border: dashed 1px indianred; 16 display: inline-block; 17 margin-top: 30px; 18 padding: 30px 30px; 19 } 20 </style> 21 </head> 22 <body> 23 24 <div class="container"> 25 <h1>全选反选取消</h1> 26 <h3>具体实现原理看本网页源代码中的js代码</h3> 27 28 <div id="list"> 29 <input type="button" value="全选" id="b1"> 30 <input type="button" value="反选" id="b2"> 31 <input type="button" value="取消" id="b3"> 32 <table> 33 <thead> 34 <tr> 35 <th>请选择</th> 36 <th>主机名</th> 37 <th>端口</th> 38 </tr> 39 </thead> 40 <tbody id="tb"> 41 <tr> 42 <td><input type="checkbox"/></td> 43 <td>1.1.1.1</td> 44 <td>90</td> 45 </tr> 46 <tr> 47 <td><input type="checkbox"/></td> 48 <td>1.1.1.2</td> 49 <td>192</td> 50 </tr> 51 <tr> 52 <td><input type="checkbox"/></td> 53 <td>1.1.1.3</td> 54 <td>193</td> 55 </tr> 56 </tbody> 57 </table> 58 </div> 59 60 </div> 61 62 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 63 <script> 64 // 实现全选: 65 var choseAll = function () { 66 var $items = $("#tb").children() 67 $items.find("[type='checkbox']").prop("checked", true) 68 } 69 $("#b1").on("click", choseAll) 70 71 72 // 实现反选: 73 var reverseChose = function () { 74 var $items = $("#tb").children() 75 $items.find("[type='checkbox']").each(function () { 76 if($(this).prop("checked")){ 77 $(this).prop("checked", false) 78 } else{ 79 $(this).prop("checked", true) 80 } 81 }) 82 } 83 $("#b2").on("click", reverseChose) 84 85 86 // 实现取消: 87 var cancel = function () { 88 var $items = $("#tb").children() 89 $items.find("[type='checkbox']").prop("checked", false) 90 } 91 $("#b3").on("click", cancel) 92 </script> 93 94 </body> 95 </html>
6.添加删除数据
需求：
- 点击按钮在下方添加一行数据
- 点击每一行的删除按钮删除当前行数据
1 <!-- author: wyb --> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>添加删除数据</title> 8 <style> 9 10 </style> 11 </head> 12 <body> 13 14 <div class="container"> 15 <div id="input-form"> 16 <input type="text" id="input-text"> 17 <button type="button" id="button-add">添加</button> 18 </div> 19 <div id="content-list"> 20 21 </div> 22 </div> 23 24 25 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 26 <script> 27 // 生成模板 28 var template = function (value) { 29 var t = ` 30 <div class="content"> 31 <span>${value}</span> 32 <button type="button" class="button-delete">删除</button> 33 </div> 34 ` 35 return t 36 } 37 // 添加 38 $("#button-add").on("click", function () { 39 var v = $("#input-text").val() 40 var tmp = template(v) 41 $("#content-list").append(tmp) 42 }) 43 // 删除 44 // $("#content-list").on("click", function (event) { 45 // if($(event.target).hasClass("button-delete")){ 46 // $(event.target).parent().remove() 47 // } 48 // }) 49 // 以下代码同理: 50 $("#content-list").on("click", ".button-delete", function () { 51 $(this).parent().remove() 52 }) 53 54 </script> 55 56 </body> 57 </html>
完善版本(表格数据增删改查)：
1 <!-- author: wyb --> 2 <!DOCTYPE html> 3 <html lang="zh-CN"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>jQuery特效-表格数据增删改</title> 7 <style> 8 body{ 9 margin: 0; 10 100%; 11 height: 100%; 12 } 13 .vertical-center { 14 top: 50%; 15 position: relative; 16 transform: translateY(-50%); 17 } 18 .cover{ 19 position: fixed; 20 top: 0; 21 left: 0; 22 100%; 23 height: 100%; 24 background: black; 25 opacity: 0.5; 26 z-index: 80; 27 } 28 .modal{ 29 200px; 30 margin: 0 auto; 31 padding: 30px; 32 opacity: 1; 33 background: #e7e7ee; 34 z-index: 103; 35 } 36 .hide{ 37 display: none; 38 } 39 </style> 40 </head> 41 <body> 42 43 <button id="button-add">新增</button> 44 <table border="1"> 45 <thead> 46 <tr> 47 <th>#</th> 48 <th>姓名</th> 49 <th>爱好</th> 50 <th>操作</th> 51 </tr> 52 </thead> 53 <tbody id="table-list"> 54 <tr> 55 <td>1</td> 56 <td>Egon</td> 57 <td>街舞</td> 58 <td> 59 <button class="edit-btn">编辑</button> 60 <button class="delete-btn">删除</button> 61 </td> 62 </tr> 63 <tr> 64 <td>2</td> 65 <td>Alex</td> 66 <td>烫头</td> 67 <td> 68 <button class="edit-btn">编辑</button> 69 <button class="delete-btn">删除</button> 70 </td> 71 </tr> 72 <tr> 73 <td>3</td> 74 <td>苑局</td> 75 <td>日天</td> 76 <td> 77 <button class="edit-btn">编辑</button> 78 <button class="delete-btn">删除</button> 79 </td> 80 </tr> 81 </tbody> 82 </table> 83 84 <div id="myCover" class="cover hide"></div> 85 <div id="myModal" class="modal vertical-center hide"> 86 <div> 87 <p> 88 <label for="modal-name">姓名: </label> 89 <input type="text" id="modal-name"> 90 </p> 91 <p> 92 <label for="modal-habit">爱好: </label> 93 <input type="text" id="modal-habit"> 94 </p> 95 <p> 96 <button id="modal-submit">提交</button> 97 <button id="modal-cancel">取消</button> 98 </p> 99 </div> 100 </div> 101 102 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 103 <script> 104 // 返回元素在父元素中的位置 105 var indexOfElement = function($element) { 106 var element = $element[0] 107 var parent = element.parentElement; 108 for (var i = 0; i < parent.children.length; i++) { 109 var e = parent.children[i]; 110 if (e === element) { 111 return i 112 } 113 } 114 }; 115 116 117 // 给新增按钮绑定事件 118 $("#button-add").on("click", function () { 119 // 清空模态框中的input 120 $("#modal-name").val("") 121 $("#modal-habit").val("") 122 // 把模态框弹出! 123 $(".cover").removeClass("hide") 124 $(".modal").removeClass("hide") 125 // data存jQuery事件 -> add 1 -> 表示要添加一条数据 126 $("html").data("add", "1") 127 }); 128 129 130 // 模态框中的提交按钮绑定事件 131 // 难点在于 如何确定 编辑的是哪一行? --> 利用data()可以存具体的jQuery对象 132 $("#modal-submit").on("click", function () { 133 // 获得input中的值 134 var name = $("#modal-name").val() 135 var habit = $("#modal-habit").val() 136 console.log(name, habit) 137 138 // 获得data中的值确定是add还是edit 139 var $html = $("html") 140 if($html.data("add") === "1"){ 141 // add 142 // 确定现在tbody有几个tr 143 let lines = $("#table-list").children().length 144 let tr = ` 145 <tr> 146 <td>${lines+1}</td> 147 <td>${name}</td> 148 <td>${habit}</td> 149 <td> 150 <button class="edit-btn">编辑</button> 151 <button class="delete-btn">删除</button> 152 </td> 153 </tr> 154 ` 155 $("#table-list").append(tr) 156 $("html").data("add", "0") 157 } else if($html.data("editLine")!=="0"){ 158 // edit 159 let line = $html.data("editLine") 160 let $tr = $($("#table-list").children()[line]) 161 console.log($tr) 162 $($tr.children()[1]).html(name) 163 $($tr.children()[2]).html(habit) 164 165 $html.data("editLine", "0") 166 } 167 168 // 最后隐藏模态框 169 $(".cover").addClass("hide") 170 $(".modal").addClass("hide") 171 }) 172 173 // 给每一行的编辑按钮绑定事件 174 $("#table-list").on("click", ".edit-btn", function () { 175 // 把模态框弹出! 176 $(".cover").removeClass("hide") 177 $(".modal").removeClass("hide") 178 // data存jQuery事件 编辑的行数 姓名 习惯 179 var $html = $("html") 180 var $trEle = $(this).parent().parent() 181 var line = indexOfElement($trEle) 182 var name = $($trEle.children()[1]).html() 183 var habit = $($trEle.children()[2]).html() 184 console.log(line, name, habit) 185 $html.data("editLine", line) 186 $("#modal-name").val(name) 187 $("#modal-habit").val(habit) 188 }) 189 190 191 // 模态框中的取消按钮绑定事件 192 $("#modal-cancel").on("click", function () { 193 // 1. 清空模态框中的input 194 // 2. 隐藏模态框 195 $("#modal-name").val("") 196 $("#modal-habit").val("") 197 $(".cover").addClass("hide") 198 $(".modal").addClass("hide") 199 }) 200 201 202 // 给每一行的删除按钮绑定事件 203 $("#table-list").on("click", ".delete-btn", function () { 204 $(this).parent().parent().remove() 205 }) 206 207 </script> 208 </body> 209 </html>
7.克隆实例-复制按钮
1 <!-- author: wyb --> 2 <!DOCTYPE html> 3 <html lang="zh-CN"> 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="x-ua-compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <title>克隆</title> 9 <style> 10 #b1 { 11 background-color: deeppink; 12 padding: 5px; 13 color: white; 14 margin: 5px; 15 } 16 #b2 { 17 background-color: dodgerblue; 18 padding: 5px; 19 color: white; 20 margin: 5px; 21 } 22 </style> 23 </head> 24 <body> 25 26 <button id="b1">屠龙宝刀，点击就送</button> 27 <hr> 28 <button id="b2">屠龙宝刀，点击就送</button> 29 30 31 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 32 <script> 33 // clone方法不加参数true，克隆标签但不克隆标签带的事件 34 $("#b1").on("click", function () { 35 $(this).clone().insertAfter(this); 36 }); 37 // clone方法加参数true，克隆标签并且克隆标签带的事件 38 $("#b2").on("click", function () { 39 $(this).clone(true).insertAfter(this); 40 }); 41 </script> 42 </body> 43 </html>
8.常用事件实例
登录校验完整版：
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>登录校验完整版</title> 6 <style> 7 .error { 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <form id="f1"> 14 <p> 15 <label>用户名: 16 <input class="need" name="username" type="text"> 17 <span class="error"></span> 18 </label> 19 </p> 20 <p> 21 <label>密码: 22 <input class="need" name="password" type="password"> 23 <span class="error"></span> 24 </label> 25 </p> 26 27 <p>爱好: 28 <label>篮球 29 <input name="hobby" value="basketball" type="checkbox"> 30 </label> 31 <label>足球 32 <input name="hobby" value="football" type="checkbox"> 33 </label> 34 <label>双色球 35 <input name="hobby" value="doublecolorball" type="checkbox"> 36 </label> 37 </p> 38 39 <p>性别: 40 <label>男 41 <input name="gender" value="1" type="radio"> 42 </label> 43 <label>女 44 <input name="gender" value="0" type="radio"> 45 </label> 46 <label>保密 47 <input name="gender" value="2" type="radio"> 48 </label> 49 </p> 50 51 <p> 52 <label for="s1">从哪儿来:</label> 53 <select name="from" id="s1"> 54 <option value="010">北京</option> 55 <option value="021">上海</option> 56 <option value="020">广州</option> 57 </select> 58 </p> 59 <p> 60 <label for="t1">个人简介:</label> 61 <textarea name="memo" id="t1" cols="30" rows="10"> 62 63 </textarea> 64 </p> 65 <p> 66 <input id="b1" type="submit" value="登录"> 67 <input id="cancel" type="button" value="取消"> 68 </p> 69 </form> 70 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 71 <script> 72 // 点击登录按钮验证用户名和密码为不为空 73 // 为空就在对应的input标签边上显示一个错误提示信息 74 75 // 1. 给登录按钮绑定点击事件 76 // 2. 点击事件要做的事儿 77 // 2.1 找到input标签--> 取值 --> 判断为不为空 --> .length为不为0 78 // 2.2 如果不为空,则什么都不做 79 // 2.2 如果为空,要做几件事儿 80 // 2.2.1 在当前这个input标签的下面 添加一个新的标签,内容为xx不能为空 81 82 $("#b1").click(function () { 83 var $needEles = $(".need"); 84 // 定义一个标志位 85 var flag = true; 86 for (var i=0;i<$needEles.length;i++){ 87 // 如果有错误 88 if ($($needEles[i]).val().trim().length === 0) { 89 var labelName = $($needEles[i]).parent().text().trim().slice(0,-1); 90 $($needEles[i]).next().text( labelName +"不能为空!"); 91 // 将标志位置为false 92 flag = false; 93 break; 94 } 95 } 96 return flag; 97 }) 98 99 </script> 100 </body> 101 </html>
键盘相关事件：
1 <!-- author: wyb --> 2 <!DOCTYPE html> 3 <html lang="zh-CN"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>键盘相关事件</title> 7 8 </head> 9 <body> 10 11 <table border="1" id="t1"> 12 <thead> 13 <tr> 14 <th>#</th> 15 <th>姓名</th> 16 <th>爱好</th> 17 <th>操作</th> 18 </tr> 19 </thead> 20 <tbody> 21 <tr> 22 <td><input type="checkbox"></td> 23 <td>小强</td> 24 <td>吃冰激凌</td> 25 <td> 26 <select> 27 <option value="0">下线</option> 28 <option value="1">上线</option> 29 <option value="2">离线</option> 30 </select> 31 </td> 32 </tr> 33 <tr> 34 <td><input type="checkbox"></td> 35 <td>二哥</td> 36 <td>Girl</td> 37 <td> 38 <select> 39 <option value="0">下线</option> 40 <option value="1">上线</option> 41 <option value="2">离线</option> 42 </select> 43 </td> 44 </tr> 45 <tr> 46 <td><input type="checkbox"></td> 47 <td>二哥</td> 48 <td>Girl</td> 49 <td> 50 <select> 51 <option value="0">下线</option> 52 <option value="1">上线</option> 53 <option value="2">离线</option> 54 </select> 55 </td> 56 </tr> 57 <tr> 58 <td><input type="checkbox"></td> 59 <td>二哥</td> 60 <td>Girl</td> 61 <td> 62 <select> 63 <option value="0">下线</option> 64 <option value="1">上线</option> 65 <option value="2">离线</option> 66 </select> 67 </td> 68 </tr> 69 <tr> 70 <td><input type="checkbox"></td> 71 <td>二哥</td> 72 <td>Girl</td> 73 <td> 74 <select> 75 <option value="0">下线</option> 76 <option value="1">上线</option> 77 <option value="2">离线</option> 78 </select> 79 </td> 80 </tr> 81 82 </tbody> 83 </table> 84 85 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 86 <script> 87 // 确保绑定事件的时候DOM树是生成好的 88 $(document).ready(function () { 89 var mode = false; 90 var $bodyEle = $("body"); 91 92 // 按住Ctrl键进入批量操作模式 93 // 给文档绑定 监听键盘按键被按下去的事件 94 $bodyEle.on("keydown", function (event) { 95 // 96 console.log(event.keyCode); 97 if (event.keyCode === 17) { 98 // 进入批量操作模式 99 mode = true; 100 } 101 }); 102 // 按键抬起来的时候,退出批量操作模式 103 $bodyEle.on("keyup", function (event) { 104 // 105 console.log(event.keyCode); 106 if (event.keyCode === 17) { 107 // 进入批量操作模式 108 mode = false; 109 } 110 }); 111 112 // 113 $("select").on("change", function () { 114 // 取到当前select的值 115 var value = $(this).val(); 116 var $thisCheckbox = $(this).parent().siblings().first().find(":checkbox"); 117 // 判断checkbox有没有被选中 118 if ($thisCheckbox.prop("checked") && mode) { 119 // 真正进入批量操作模式 120 var $checkedEles = $("input[type='checkbox']:checked"); 121 for (var i = 0; i < $checkedEles.length; i++) { 122 // 找到同一行的select 123 $($checkedEles[i]).parent().siblings().last().find("select").val(value); 124 } 125 } 126 }) 127 }); 128 </script> 129 </body> 130 </html>
9.登录注册示例
五、jQuery动画效果
1.基本效果
1 // 基本 2 show([s,[e],[fn]]) 3 hide([s,[e],[fn]]) 4 toggle([s],[e],[fn]) 5 6 // 滑动 7 slideDown([s],[e],[fn]) // 向上 8 slideUp([s,[e],[fn]]) // 向下 9 slideToggle([s],[e],[fn]) // toggle 10 11 // 淡入淡出 12 fadeIn([s],[e],[fn]) // 淡入 13 fadeOut([s],[e],[fn]) // 淡出 14 fadeTo([[s],o,[e],[fn]]) // 改变透明度 15 fadeToggle([s,[e],[fn]]) 16 17 // 自定义（了解即可） 18 animate(p,[s],[e],[fn])
2.自定义动画实例
点赞实例：
1 <!-- author: wyb --> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>自定义动画</title> 8 <style> 9 div { 10 position: relative; 11 display: inline-block; 12 } 13 div>i { 14 display: inline-block; 15 color: red; 16 position: absolute; 17 right: -16px; 18 top: -5px; 19 opacity: 1; 20 } 21 </style> 22 </head> 23 <body> 24 25 <div id="d1">点赞</div> 26 27 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 28 <script> 29 $("#d1").on("click", function () { 30 var newI = document.createElement("i"); 31 newI.innerText = "+1"; 32 // 添加i 33 $(this).append(newI); 34 // 在1秒之内隐去添加的i 35 $(this).children("i").animate({ 36 opacity: 0 37 }, 1000) 38 }) 39 </script> 40 41 </body> 42 </html>
六、jQuery补充
1.jQuery中的数组方法
- each
- map
- grep
each方法：
1 // 传统遍历方法: 2 var cells = $('.todo-cell') 3 for (var i = 0; i < cells.length; i++) { 4 var c = cells[i] 5 console.log('cell', i, c) 6 } 7 8 // jQuery 提供遍历数组的 each 函数: 9 // 对每个元素调用函数, 参数是 index 和 element 10 $('.todo-cell').each(function(i, e) { 11 console.log(i, e) 12 }) 13 14 // 上述两段代码输出结果一样
注意：在遍历过程中return false提前终止each循环
map方法：
1 // map 函数 2 // 对每个数组中的元素调用函数得到返回值组成新的数组 3 var foo = [1, 2, 3, 4, 5]; 4 var bar = $.map(foo, function(value){ 5 return value * value; 6 }); 7 log(bar); // [1, 4, 9, 16, 25] 8 9
grep方法：
1 // grep 函数 2 // 根据传入的函数依次判断数组中的值是否满足条件 如果满足就返回该值 3 var far = $.grep(foo, function(value){ 4 return value % 2 === 0; 5 }); 6 log(far); // [2, 4]
2.jQuery插件
(1)添加新函数
jQuery.extend(object)
jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。
示例：
1 <script> 2 jQuery.extend({ 3 min:function(a, b){return a < b ? a : b;}, 4 max:function(a, b){return a > b ? a : b;} 5 }); 6 jQuery.min(2,3);// => 2 7 jQuery.max(4,5);// => 5 8 </script>
(2)添加新的实例方法
jQuery.fn.extend(object)
一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法
1 <script> 2 jQuery.fn.extend({ 3 check:function(){ 4 return this.each(function(){this.checked =true;}); 5 }, 6 uncheck:function(){ 7 return this.each(function(){this.checked =false;}); 8 } 9 }); 10 // jQuery对象可以使用新添加的check()方法了。 11 $("input[type='checkbox']").check(); 12 </script> 13 14 15 单独写在文件中的扩展： 16 (function(jq){ 17 jq.extend({ 18 funcName:function(){ 19 ... 20 }, 21 }); 22 })(jQuery);
3.jQuery和ajax
(1)$.ajax
1 // jQuery AJAX 函数用法 2 // get方法 3 var request = { 4 url: '/uploads/tags.json', 5 type: 'get', 6 contentType: 'application/json', 7 success: function() { 8 console.log(arguments) 9 }, 10 error: function() { 11 console.log(arguments); 12 } 13 }; 14 15 $.ajax(request); 16 17 // post方法 18 var request = { 19 url: '/uploads/tags.json', 20 type: 'post', 21 data: {"name": "wyb666"}, 22 contentType: 'application/json', 23 success: function() { 24 console.log(arguments) 25 }, 26 error: function() { 27 console.log(arguments); 28 } 29 }; 30 31 $.ajax(request);
(2)其他方法
也可以直接使用下面两种方法实现get和post请求：
- $.get(url, callback())
- $.post(url, data, callback())