TOP

jQuery

概念

轻量级的多兼容的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实现批量操作
keydown和keyup事件组合按住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事件
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值变化事件
实时监听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对应的数据
posted @ 2018-11-27 15:17  羊驼之歌  阅读(264)  评论(0)  编辑  收藏  举报