概念
轻量级的多兼容的JavaScript库
网址：
http://jquery.com
中文API：
http://jquery123.com
优势
文件小 核心文件小
代码少 功能实现所需代码少
简洁 链式操作间接
可读性强 相比起来js
多兼容 多浏览器兼容
插件多 插件丰富,可以实现更多炫酷的操作
基础语法
$(selector).action()
jQuery对象
用jQuery选择器查出来的就是jQuery对象
jQuery对象可以使用jQuery方法，不能使用DOM的方法
DOM对象和jQuery对象转换
原生 --- > jquery
使用 $( ) 封装:
$(h1) // 转 jquery
jquery ----> 原生
从 jquery对象中 根据下标取出元素即为 原生对象
jquery 的序列没办法直接全部转成原生
只能遍历后一个一个转
var h1 = $("h1")[0] // 转原生
选择器
基本选择器
$("#id") // id选择器：
$("tagName") // 标签选择器
$(".className") // 类选择器
栗子
$("div.c1") // 找到有c1 class类的div标签
其他补充
$("*") // 所有元素选择器
$("#id,.className,tagName") // 组合选择器,彼此逗号隔开,彼此是或关系
层级选择器
$("x y"); // 找到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标签
属性筛选器
[attribute] [attribute=value] // 属性值等于 [attribute!=value] // 属性值不等于
[attrName*=value] // 属性值中包含指定字符
[attrName^=value] // 属性值以指定字符开头
[attrName$=value] // 属性值以指定字符结尾
栗子
value 加不加引号都可以
$("input[type='checkbox']"); // 取到checkbox类型的input标签
$("input[type!='text']"); // 取到类型不是text的input标签
子元素筛选器
:first-child // 匹配第一个子元素 :last-child // 匹配最后一个子元素 :nth-child(n) // 匹配第n个子元素
表单筛选器
:text :password :file :radio :checkbox :submit :reset :button
表单对象属性
:enabled :disabled :checked :selected
栗子
$("input:enabled") // 找到可用的input标签
筛选器方法
下一个元素
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
上一个元素
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父亲元素
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
儿子和兄弟元素
$("#id").children(); // 儿子们
$("#id").siblings(); // 兄弟们
查找
搜索所有与指定表达式匹配的元素。
此函数是找出正在处理的元素的后代元素的好方法。
$("div").find("p") // 等价于$("div p")
筛选
筛选出与指定表达式匹配的元素集合。
这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的
// 等价于 $("div.c1")
补充
.first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素
操作标签
样式操作
样式类
addClass(); // 添加指定的CSS类名。 removeClass(); // 移除指定的CSS类名。 hasClass(); // 判断样式存不存在 toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加。
栗子
开关灯(点击标签更换颜色属性)
模态框
CSS
css("color","red") //DOM操作：tag.style.color="red"
链式操作可以一次性添加多个样式
$("p").css("color", "red"); //将所有p标签的字体设置为红色
$("p").css("color","red").css("height","200px").css("background","blue") // 多样式操作
尽管如此, 其实还是很麻烦. 因此可以使用直接传入 json 对象的方式
json 对象语法
内部只有双引号, 类似字典形式, 彼此用逗号隔开
{ "color":"red", "height":"200px", "background-color":"blue" }
多样式操作
$("p").css({
"color":"red",
"height":"200px",
"background-color":"blue"
});
位置操作
offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置 position() // 获取匹配元素相对父元素的偏移 scrollTop() // 获取匹配元素相对滚动条顶部的偏移 scrollLeft() // 获取匹配元素相对滚动条左侧的偏移
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
和 .position()的差别在于：
.position()是相对于相对于父级元素的位移。
栗子：
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>位置相关示例之返回顶部</title> 8 <style> 9 .c1 { 10 width: 100px; 11 height: 200px; 12 background-color: red; 13 } 14 15 .c2 { 16 height: 50px; 17 width: 50px; 18 19 position: fixed; 20 bottom: 15px; 21 right: 15px; 22 background-color: #2b669a; 23 } 24 .hide { 25 display: none; 26 } 27 .c3 { 28 height: 100px; 29 } 30 </style> 31 </head> 32 <body> 33 <button id="b1" class="btn btn-default">点我</button> 34 <div class="c1"></div> 35 <div class="c3">1</div> 36 <div class="c3">2</div> 37 <div class="c3">3</div> 38 <div class="c3">4</div> 39 <div class="c3">5</div> 40 <div class="c3">6</div> 41 <div class="c3">7</div> 42 <div class="c3">8</div> 43 <div class="c3">9</div> 44 <div class="c3">10</div> 45 <div class="c3">11</div> 46 <div class="c3">12</div> 47 <div class="c3">13</div> 48 <div class="c3">14</div> 49 <div class="c3">15</div> 50 <div class="c3">16</div> 51 <div class="c3">17</div> 52 <div class="c3">18</div> 53 <div class="c3">19</div> 54 <div class="c3">20</div> 55 <div class="c3">21</div> 56 <div class="c3">22</div> 57 <div class="c3">23</div> 58 <div class="c3">24</div> 59 <div class="c3">25</div> 60 <div class="c3">26</div> 61 <div class="c3">27</div> 62 <div class="c3">28</div> 63 <div class="c3">29</div> 64 <div class="c3">30</div> 65 <div class="c3">31</div> 66 <div class="c3">32</div> 67 <div class="c3">33</div> 68 <div class="c3">34</div> 69 <div class="c3">35</div> 70 <div class="c3">36</div> 71 <div class="c3">37</div> 72 <div class="c3">38</div> 73 <div class="c3">39</div> 74 <div class="c3">40</div> 75 <div class="c3">41</div> 76 <div class="c3">42</div> 77 <div class="c3">43</div> 78 <div class="c3">44</div> 79 <div class="c3">45</div> 80 <div class="c3">46</div> 81 <div class="c3">47</div> 82 <div class="c3">48</div> 83 <div class="c3">49</div> 84 <div class="c3">50</div> 85 <div class="c3">51</div> 86 <div class="c3">52</div> 87 <div class="c3">53</div> 88 <div class="c3">54</div> 89 <div class="c3">55</div> 90 <div class="c3">56</div> 91 <div class="c3">57</div> 92 <div class="c3">58</div> 93 <div class="c3">59</div> 94 <div class="c3">60</div> 95 <div class="c3">61</div> 96 <div class="c3">62</div> 97 <div class="c3">63</div> 98 <div class="c3">64</div> 99 <div class="c3">65</div> 100 <div class="c3">66</div> 101 <div class="c3">67</div> 102 <div class="c3">68</div> 103 <div class="c3">69</div> 104 <div class="c3">70</div> 105 <div class="c3">71</div> 106 <div class="c3">72</div> 107 <div class="c3">73</div> 108 <div class="c3">74</div> 109 <div class="c3">75</div> 110 <div class="c3">76</div> 111 <div class="c3">77</div> 112 <div class="c3">78</div> 113 <div class="c3">79</div> 114 <div class="c3">80</div> 115 <div class="c3">81</div> 116 <div class="c3">82</div> 117 <div class="c3">83</div> 118 <div class="c3">84</div> 119 <div class="c3">85</div> 120 <div class="c3">86</div> 121 <div class="c3">87</div> 122 <div class="c3">88</div> 123 <div class="c3">89</div> 124 <div class="c3">90</div> 125 <div class="c3">91</div> 126 <div class="c3">92</div> 127 <div class="c3">93</div> 128 <div class="c3">94</div> 129 <div class="c3">95</div> 130 <div class="c3">96</div> 131 <div class="c3">97</div> 132 <div class="c3">98</div> 133 <div class="c3">99</div> 134 <div class="c3">100</div> 135 136 <button id="b2" class="btn btn-default c2 hide">返回顶部</button> 137 <script src="jquery-3.2.1.min.js"></script> 138 <script> 139 $("#b1").on("click", function () { 140 $(".c1").offset({left: 200, top:200}); 141 }); 142 143 144 $(window).scroll(function () { 145 if ($(window).scrollTop() > 100) { 146 $("#b2").removeClass("hide"); 147 }else { 148 $("#b2").addClass("hide"); 149 } 150 }); 151 $("#b2").on("click", function () { 152 $(window).scrollTop(0); 153 }) 154 </script> 155 </body> 156 </html> 157 158 返回顶部示例
尺寸操作
height() width() innerHeight() innerWidth() outerHeight() outerWidth()
文本操作
HTML代码
等价于 innerHTML
html() // 取得第一个匹配元素的html内容 html(val) // 设置所有匹配元素的html内容
标签显示文本（内容）
text() // 取得所有匹配元素的内容 text(val) // 设置所有匹配元素的内容
值（value）
val() // 取得第一个匹配元素的当前值(value属性值 ) val(val) // 设置所有匹配元素的值 val([val1, val2]) // 设置多选的checkbox、多选select的值
栗子:
<label for="c1">女</label> <input name="gender" id="c1" type="radio" value="0"> <label for="c2">男</label> <input name="gender" id="c2" type="radio" value="1">
可以使用： $("input[name='gender']:checked").val()
<input type="checkbox" value="basketball" name="hobby">篮球 <input type="checkbox" value="football" name="hobby">足球
$("[name='hobby']").val(['basketball', 'football']); <select multiple id="s1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> $("#s1").val(["1", "2"])
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>文本操作之登录验证</title> 8 <style> 9 .error { 10 color: red; 11 } 12 </style> 13 </head> 14 <body> 15 16 <form action=""> 17 <div> 18 <label for="input-name">用户名</label> 19 <input type="text" id="input-name" name="name"> 20 <span class="error"></span> 21 </div> 22 <div> 23 <label for="input-password">密码</label> 24 <input type="password" id="input-password" name="password"> 25 <span class="error"></span> 26 </div> 27 <div> 28 <input type="button" id="btn" value="提交"> 29 </div> 30 </form> 31 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 32 <script> 33 $("#btn").click(function () { 34 var username = $("#input-name").val(); 35 var password = $("#input-password").val(); 36 37 if (username.length === 0) { 38 $("#input-name").siblings(".error").text("用户名不能为空"); 39 } 40 if (password.length === 0) { 41 $("#input-password").siblings(".error").text("密码不能为空"); 42 } 43 }) 44 </script> 45 </body> 46 </html> 47 48 自定义登录校验示例
属性操作
用于ID等或自定义属性
attr(attrName) // 返回第一个匹配元素的属性值 attr(attrName, attrValue) // 为所有匹配元素设置一个属性值 attr({k1: v1, k2:v2}) // 为所有匹配元素设置多个属性值 removeAttr() // 从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop() // 获取属性 removeProp() // 移除属性
注意
在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，
在3.x版本的jQuery中则没有这个问题。
为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，
不要使用attr("checked", "checked")。
<input type="checkbox" value="1"> <input type="radio" value="2"> <script> $(":checkbox[value='1']").prop("checked", true); $(":radio[value='2']").prop("checked", true); </script>
prop和attr的区别
attr attribute(属性)
prop property(属性)
虽然都是属性，但他们所指的属性并不相同，
attr所指的属性是HTML标签属性，
prop所指的是DOM对象属性，
可以认为
attr是显式的
而prop是隐式的
栗子
可以看到attr获取一个标签内没有的东西会得到undefined，
而prop获取的是这个DOM对象的属性，因此checked为false。
<input type="checkbox" id="i1" value="1">
$("#i1").attr("checked") // undefined $("#i1").prop("checked") // false
可以看出attr的局限性，attr只限于HTML标签内的属性
而prop获取的是这个DOM对象的属性，选中返回true，没选中返回false。
<input type="checkbox" checked id="i1" value="1">
$("#i1").attr("checked") // checked $("#i1").prop("checked") // true
可以看到prop不支持获取标签的自定义属性
<input type="checkbox" checked id="i1" value="1" me="自定义属性">
$("#i1").attr("me") // "自定义属性" $("#i1").prop("me") // undefined
总结一下
对于标签上有的能看到的属性和自定义属性都用attr
对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop
实际操作
全选,反选,全部取消
文档处理
创建标签
直接字符串写就可以创建
先创建的后的标签缓存在内存, 必须要指定为位置才可以体现在文档中
var div = $("<div></div>") var div_a = $("<div><a></a></div>") var div_a = $("<div></div>").html("<a></a>").attr("id","d1")
作为儿子元素 - 后置
$(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() // 参数
克隆栗子：
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>克隆</title> 8 <style> 9 #b1 { 10 background-color: deeppink; 11 padding: 5px; 12 color: white; 13 margin: 5px; 14 } 15 #b2 { 16 background-color: dodgerblue; 17 padding: 5px; 18 color: white; 19 margin: 5px; 20 } 21 </style> 22 </head> 23 <body> 24 25 <button id="b1">屠龙宝刀，点击就送</button> 26 <hr> 27 <button id="b2">屠龙宝刀，点击就送</button> 28 29 <script src="jquery-3.2.1.min.js"></script> 30 <script> 31 // clone方法不加参数true，克隆标签但不克隆标签带的事件 32 $("#b1").on("click", function () { 33 $(this).clone().insertAfter(this); 34 }); 35 // clone方法加参数true，克隆标签并且克隆标签带的事件 36 $("#b2").on("click", function () { 37 $(this).clone(true).insertAfter(this); 38 }); 39 </script> 40 </body> 41 </html> 42 43 <!DOCTYPE html> 44 <html lang="zh-CN"> 45 <head> 46 <meta charset="UTF-8"> 47 <meta http-equiv="x-ua-compatible" content="IE=edge"> 48 <meta name="viewport" content="width=device-width, initial-scale=1"> 49 <title>克隆</title> 50 <style> 51 #b1 { 52 background-color: deeppink; 53 padding: 5px; 54 color: white; 55 margin: 5px; 56 } 57 #b2 { 58 background-color: dodgerblue; 59 padding: 5px; 60 color: white; 61 margin: 5px; 62 } 63 </style> 64 </head> 65 <body> 66 67 <button id="b1">屠龙宝刀，点击就送</button> 68 <hr> 69 <button id="b2">屠龙宝刀，点击就送</button> 70 71 <script src="jquery-3.2.1.min.js"></script> 72 <script> 73 // clone方法不加参数true，克隆标签但不克隆标签带的事件 74 $("#b1").on("click", function () { 75 $(this).clone().insertAfter(this); 76 }); 77 // clone方法加参数true，克隆标签并且克隆标签带的事件 78 $("#b2").on("click", function () { 79 $(this).clone(true).insertAfter(this); 80 }); 81 </script> 82 </body> 83 </html> 84 85 点击复制按钮
事件
常用事件
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
栗子
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta http-equiv="content-Type" charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <title>Title</title> 7 </head> 8 <body> 9 10 11 <table border="1"> 12 <thead> 13 <tr> 14 <th>#</th> 15 <th>姓名</th> 16 <th>操作</th> 17 </tr> 18 </thead> 19 <tbody> 20 <tr> 21 <td><input type="checkbox"></td> 22 <td>Egon</td> 23 <td> 24 <select> 25 <option value="1">上线</option> 26 <option value="2">下线</option> 27 <option value="3">停职</option> 28 </select> 29 </td> 30 </tr> 31 <tr> 32 <td><input type="checkbox"></td> 33 <td>Alex</td> 34 <td> 35 <select> 36 <option value="1">上线</option> 37 <option value="2">下线</option> 38 <option value="3">停职</option> 39 </select> 40 </td> 41 </tr> 42 <tr> 43 <td><input type="checkbox"></td> 44 <td>Yuan</td> 45 <td> 46 <select> 47 <option value="1">上线</option> 48 <option value="2">下线</option> 49 <option value="3">停职</option> 50 </select> 51 </td> 52 </tr> 53 <tr> 54 <td><input type="checkbox"></td> 55 <td>EvaJ</td> 56 <td> 57 <select> 58 <option value="1">上线</option> 59 <option value="2">下线</option> 60 <option value="3">停职</option> 61 </select> 62 </td> 63 </tr> 64 <tr> 65 <td><input type="checkbox"></td> 66 <td>Gold</td> 67 <td> 68 <select> 69 <option value="1">上线</option> 70 <option value="2">下线</option> 71 <option value="3">停职</option> 72 </select> 73 </td> 74 </tr> 75 </tbody> 76 </table> 77 78 <input type="button" id="b1" value="全选"> 79 <input type="button" id="b2" value="取消"> 80 <input type="button" id="b3" value="反选"> 81 82 83 <script src="jquery-3.3.1.js"></script> 84 <script> 85 86 var flag = false; 87 // shift按键被按下的时候 88 $(window).keydown(function (event) { 89 console.log(event.keyCode); 90 if (event.keyCode === 16){ 91 flag = true; 92 } 93 }); 94 // shift按键被抬起的时候 95 $(window).keyup(function (event) { 96 console.log(event.keyCode); 97 if (event.keyCode === 16){ 98 flag = false; 99 } 100 }); 101 // select标签的值发生变化的时候 102 $("select").change(function (event) { 103 // 如果shift按键被按下，就进入批量编辑模式 104 // shift按键对应的code是16 105 // 判断当前select这一行是否被选中 106 console.log($(this).parent().siblings().first().find(":checkbox")); 107 var isChecked = $(this).parent().siblings().first().find(":checkbox").prop("checked"); 108 console.log(isChecked); 109 if (flag && isChecked) { 110 // 进入批量编辑模式 111 // 1. 取到当前select选中的值 112 var value = $(this).val(); 113 // 2. 给其他被选中行的select设置成和我一样的值 114 // 2.1 找到那些被选中行的select 115 var $select = $("input:checked").parent().parent().find("select") 116 // 2.2 给选中的select赋值 117 $select.val(value); 118 } 119 }); 120 </script> 121 </body> 122 </html> 123 124 按住shift实现批量操作
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>hover示例</title> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 .nav { 14 height: 40px; 15 width: 100%; 16 background-color: #3d3d3d; 17 position: fixed; 18 top: 0; 19 } 20 21 .nav ul { 22 list-style-type: none; 23 line-height: 40px; 24 } 25 26 .nav li { 27 float: left; 28 padding: 0 10px; 29 color: #999999; 30 position: relative; 31 } 32 .nav li:hover { 33 background-color: #0f0f0f; 34 color: white; 35 } 36 37 .clearfix:after { 38 content: ""; 39 display: block; 40 clear: both; 41 } 42 43 .son { 44 position: absolute; 45 top: 40px; 46 right: 0; 47 height: 50px; 48 width: 100px; 49 background-color: #00a9ff; 50 display: none; 51 } 52 53 .hover .son { 54 display: block; 55 } 56 </style> 57 </head> 58 <body> 59 <div class="nav"> 60 <ul class="clearfix"> 61 <li>登录</li> 62 <li>注册</li> 63 <li>购物车 64 <p class="son hide"> 65 空空如也... 66 </p> 67 </li> 68 </ul> 69 </div> 70 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> 71 <script> 72 $(".nav li").hover( 73 function () { 74 $(this).addClass("hover"); 75 }, 76 function () { 77 $(this).removeClass("hover"); 78 } 79 ); 80 </script> 81 </body> 82 </html> 83 84 hover事件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>实时监听input输入值变化</title> 8 </head> 9 <body> 10 <input type="text" id="i1"> 11 12 <script src="jquery-3.2.1.min.js"></script> 13 <script> 14 /* 15 * oninput是HTML5的标准事件 16 * 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化， 17 * 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发 18 * oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代 19 * 使用jQuery库的话直接使用on同时绑定这两个事件即可。 20 * */ 21 $("#i1").on("input propertychange", function () { 22 alert($(this).val()); 23 }) 24 </script> 25 </body> 26 </html> 27 28 input值变化事件
事件绑定
基础方式
基本框架:
.on/off( events [, selector ],function(){})
参数:
on/off // 绑定/移除事件
events //事件类型名称, 字符串形式
selector // 选择器（可选的）
function //事件处理函数, 通常为匿名函数
注意:
hover 这种jQuery中定义的事件就无法用 .on() 方法绑定
可用这种方式:
$('ul').on('mouseenter', 'li', function() { //绑定鼠标进入事件
$(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() { //绑定鼠标划出事件
$(this).removeClass('hover');
});
其他方式
$("div").click(function(){})
$("div").bind("click", function(){})
阻止后续事件执行
return false; // 常见阻止表单提交等
e.preventDefault();
栗子
<script>
$("#b1").click(function (e) {
alert(123);
//return false;
e.preventDefault();
});
</script>
文档加载完毕执行
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
两种写法：
$(document).ready(function(){
// 在这里写你的JS代码...
})
简写：
$(function(){
// 你在这里写你的代码
})
与window.onload的区别
window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
jQuery的这个入口函数无函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）
栗子:
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>文本操作之登录验证</title> 8 <style> 9 .error { 10 color: red; 11 } 12 </style> 13 </head> 14 <body> 15 16 <form action=""> 17 <div> 18 <label for="input-name">用户名</label> 19 <input type="text" id="input-name" name="name"> 20 <span class="error"></span> 21 </div> 22 <div> 23 <label for="input-password">密码</label> 24 <input type="password" id="input-password" name="password"> 25 <span class="error"></span> 26 </div> 27 <div> 28 <input type="button" id="btn" value="提交"> 29 </div> 30 </form> 31 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 32 <script> 33 $("#btn").click(function () { 34 var username = $("#input-name").val(); 35 var password = $("#input-password").val(); 36 37 if (username.length === 0) { 38 $("#input-name").siblings(".error").text("用户名不能为空"); 39 } 40 if (password.length === 0) { 41 $("#input-password").siblings(".error").text("密码不能为空"); 42 } 43 }) 44 </script> 45 </body> 46 </html> 47 48 自定义登录校验示例
事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。
栗子：
表格中每一行的编辑和删除按钮都能触发相应的事件。
$("table").on("click", ".delete", function () {
// 删除按钮绑定的事件
})
动画效果：
// 基本 show([s,[e],[fn]]) hide([s,[e],[fn]]) toggle([s],[e],[fn])
// 滑动 slideDown([s],[e],[fn]) slideUp([s,[e],[fn]]) slideToggle([s],[e],[fn])
// 淡入淡出 fadeIn([s],[e],[fn]) fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) fadeToggle([s,[e],[fn]])
// 自定义（了解即可） animate(p,[s],[e],[fn])
补充方法
each
jQuery.each(collection, callback(indexInArray, valueOfElement))：
描述：
一个通用的迭代函数，它可以用来无缝迭代对象和数组。
数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，
从0到length - 1。其他对象通过其属性名进行迭代。
栗子:
li =[10,20,30,40] $.each(li,function(i, v){ console.log(i, v); //index是索引，ele是每次循环的具体元素。 })
输出： 010 120 230 340
.each(function(index, Element))：
描述：
遍历一个jQuery对象，为每个匹配元素执行一个函数
.each() 方法用来迭代jQuery对象中的每一个DOM元素
每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)
由于回调函数是在当前DOM元素为上下文的语境中触发的
所以关键字 this 总是指向这个元素
栗子:
// 为每一个li标签添加foo
$("li").each(function(){
$(this).addClass("c1");
});
注意:
jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。
当这种情况发生时，它通常不需要显式地循环的 .each()方法：
也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：
$("li").addClass("c1"); // 对所有标签做统一操作
注意：
在遍历过程中可以使用 return false提前结束each循环。
.data()
$(selector).data(name) //从元素返回数据 $(selector).data(name,value) //向元素附加数据
栗子:
$("#btn1").click(function(){
$("div").data("greeting", "Hello World");
});
$("#btn2").click(function(){
alert($("div").data("greeting"));
});
.removeData(key):
移除存放在元素上的数据，不加key参数表示移除所有保存的数据。
栗子:
$("div").removeData("k"); //移除元素上存放k对应的数据