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>