jQuery快速入門
知識內容：javascript
1.jQuery大體瞭解css
2.jQuery基礎語法html
3.jQuery事件java
4.jQuery實例python
5.jQuery動畫效果jquery
6.jQuery補充web
預備知識：DOM基本操做與事件ajax
參考：編程
http://www.cnblogs.com/liwenzhou/p/8178806.htmljson
jQuery官網：https://jquery.com/
jQuery中文文檔：http://jquery.cuishifeng.cn/
1、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對象
2、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() // 顯示或隱藏一個元素
3、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 })
4、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 width: 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 width: 20%; 15 height: 100%; 16 background-color: rgb(47, 53, 61); 17 } 18 19 .right-menu { 20 width: 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 width: 100px; 12 height: 200px; 13 background-color: red; 14 } 15 16 .c2 { 17 height: 50px; 18 width: 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 width: 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 width: 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 width: 100%; 23 height: 100%; 24 background: black; 25 opacity: 0.5; 26 z-index: 80; 27 } 28 .modal{ 29 width: 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.登陸註冊示例
5、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>
6、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())
相關文章
- 1. jQuery快速入門
- 2. 快速入門Jquery
- 3. JQuery快速入門-簡介
- 4. jQuery Mobile 快速入門
- 5. JQuery快速入門-Ajax
- 6. JQuery(一)：快速入門
- 7. jQuery框架快速入門
- 8. jQuery教程——jQuery的快速入門
- 9. ES6快速入門 ES6 快速入門
- 10. jQuery UI 之 LigerUI 快速入門
- 更多相關文章...
- • SQL 快速參考 - SQL 教程
- • Eclipse 快速修復 - Eclipse 教程
- • YAML 入門教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. jQuery快速入門
- 2. 快速入門Jquery
- 3. JQuery快速入門-簡介
- 4. jQuery Mobile 快速入門
- 5. JQuery快速入門-Ajax
- 6. JQuery(一)：快速入門
- 7. jQuery框架快速入門
- 8. jQuery教程——jQuery的快速入門
- 9. ES6快速入門 ES6 快速入門
- 10. jQuery UI 之 LigerUI 快速入門