jQuery常用知識
阿新 • • 發佈：2018-06-04
scrip 可用 常用 return -c lec osi 偶數 list
:first // 第一個 :last // 最後一個 :eq(index)// 索引等於index的那個元素 :even // 匹配所有索引值為偶數的元素，從 0 開始計數 :odd // 匹配所有索引值為奇數的元素，從 0 開始計數 :gt(index)// 匹配所有大於給定索引值的元素 :lt(index)// 匹配所有小於給定索引值的元素 :not(元素選擇器)// 移除所有滿足not條件的標簽 :has(元素選擇器)// 選取所有包含一個或多個標簽在其內的標簽(指的是從後代元素找)
屬性選擇器： <input type="text"> <input type="password"> <input type="checkbox"> $("input[type=‘checkbox‘]");// 取到checkbox類型的input標簽 $("input[type!=‘text‘]");// 取到類型不是text的input標簽
表單對象屬性查找 <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> $("input:enabled") // 找到可用的input標簽
addClass();// 添加指定的CSS類名。 removeClass();// 移除指定的CSS類名。 hasClass();// 判斷樣式存不存在 toggleClass();// 切換CSS類名，如果有就移除，如果沒有就添加。
重點記憶---JQuery鏈式調用
當一個參數需要同時調用多個方法時，正常的做法是 obj = Obj(); obj.init(); obj.setFlag()； 但是如果你在每個方法裏面加上return this，返回當前對象 function obj(){ ... return this; } function init(){ ... return this; } function setFlag(){ ... return this; } ，那你就可以這麽寫 Obj().init().setFlag(); 這個寫法就是鏈式調用使得代碼更優雅，美觀，節省代碼量，更加效率。但是並不是在哪種情況下都適用的：因為返回的都是對象本身，也就是說沒有返回值，所以這種方法不一定在任何環境下都適合。
jQuery練習--左側菜單
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>左側菜單作業</title> 6 <style> 7 body { 8 margin: 0 auto; 9 background-color: white; 10 } 11 12 ul { 13 list-style-type: none; 14 margin: 0; 15 padding: 0; 16 } 17 18 .hide { 19 display: none; 20 } 21 22 /*左側菜單樣式*/ 23 24 .left { 25 width: 200px; 26 height: 100%; 27 position: fixed; 28 top: 0; 29 left: 0; 30 background-color: gray; 31 } 32 33 .c1 { 34 width: 190px; 35 margin: 0; 36 padding-top: 20px; 37 padding-left: 10px; 38 } 39 40 .c1:hover { 41 background-color: blue; 42 } 43 44 .content { 45 margin-left: 20px; 46 } 47 48 .content li { 49 margin-left: -20px; 50 margin-bottom: 5px; 51 padding-left: 30px; 52 } 53 54 .content li:hover { 55 background-color: red; 56 } 57 </style> 58 </head> 59 <body> 60 <div class="left"> 61 <div id="d1" class="c1">菜單一</div> 62 <div class="content hide"> 63 <ul> 64 <li>內容一</li> 65 <li>內容二</li> 66 <li>內容三</li> 67 <li>內容四</li> 68 </ul> 69 </div> 70 71 <div id="d2" class="c1">菜單二</div> 72 <div class="content hide"> 73 <ul> 74 <li>內容一</li> 75 <li>內容二</li> 76 <li>內容三</li> 77 <li>內容四</li> 78 </ul> 79 </div> 80 81 <div id="d3" class="c1">菜單三</div> 82 <div class="content hide"> 83 <ul> 84 <li>內容一</li> 85 <li>內容二</li> 86 <li>內容三</li> 87 <li>內容四</li> 88 </ul> 89 </div> 90 </div> 91 92 <!--導入jquery--> 93 <script src="jquery-3.3.1.min.js"></script> 94 95 <script> 96 $(‘.c1‘).click(function () { 97 $(‘.content‘).addClass(‘hide‘); 98 $(this).next().removeClass(‘hide‘) 99 }); 100 </script> 101 </body> 102 </html>
jQuery常用知識