jQuery常用知识
: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>
