jQuery

時間 2019-12-01

標籤 jquery 欄目 JQuery 简体版

原文原文鏈接

概念

輕量級的多兼容的JavaScript庫css

網址： 
　　http://jquery.com

中文API： 
　　http://jquery123.com

優點

文件小 　　核心文件小html

代碼少 　　功能實現所需代碼少jquery

簡潔　　　鏈式操做間接web

可讀性強 　相比起來jsjson

多兼容 　多瀏覽器兼容數組

插件多 　　插件豐富,能夠實現更多炫酷的操做瀏覽器

基礎語法

$(selector).action()

jQuery對象

用jQuery選擇器查出來的就是jQuery對象緩存

jQuery對象可使用jQuery方法，不能使用DOM的方法app

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對應的數據

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

jQuery

概念

優點

基礎語法

jQuery對象

DOM對象和jQuery對象轉換

原生 --- > jquery

jquery ----> 原生

選擇器

基本選擇器

栗子

其餘補充

層級選擇器

篩選器

基本篩選器

屬性篩選器

子元素篩選器

表單篩選器

表單對象屬性

篩選器方法

下一個元素

上一個元素

父親元素

兒子和兄弟元素

查找

篩選

補充

操做標籤

樣式操做

樣式類

CSS

json 對象語法

多樣式操做

位置操做

尺寸操做

文本操做

HTML代碼

值（value）

屬性操做

用於ID等或自定義屬性

用於checkbox和radio

prop和attr的區別

文檔處理

建立標籤

做爲兒子元素 - 後置

做爲兒子元素 - 後置

做爲兄弟元素 - 後置

做爲兄弟元素 - 前置

移除 / 清空 元素

替換

克隆

事件

經常使用事件

事件綁定

阻止後續事件執行

文檔加載完畢執行

事件委託

動畫效果：

補充方法

each

.each(function(index, Element))：

.data()

.removeData(key):

移除 / 清空元素