JQuery语法

基本筛选器：

1 $("li").first().css("color","red");  //取第一个
2 $("li").eq(2).css("color","red");  //按照索引取第三个
3 $("li").gt(2).css("color","red");  //按照索引取第三个后面的
4 $("li").lt(2).css("color","red");  //按照索引取第三个前面的

属性选择器：

1 $("[name='kevin']");
2 $("[name='kevin'][id='p']");

>>>>>>>>>>>>>>>>>>>>>>>>>>>>括号里面必须为列表

查找筛选器：

 1 $("div").children("test");    //子代
 2 $("div").find("test");        //条件查找
 3 $("div").next();              //下一个
 4 $("test").nextAll();          //后面及所有
 5 $("test").nextUntil();        //按照范围条件找后面的  开区间不包括两边
 6 $("div").prev();              //上一个
 7 $("div").prevAll();           //前面及所有
 8 $("div").prevUntil();         //按照范围条件找前面的  开区间不包括两边
 9 $("test").parent();           //查找父级标签元素
10 $("test").parents();          //多个父级元素
11 $("test").parentsUntil();     //按照范围条件找父级元素  开区间不包括两边
12 $("div").siblings();          //查找兄弟元素

左侧菜单列表的简单实现：

HTML代码块：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link href="menu.css" rel="stylesheet" type="text/css">
 7 </head>
 8 <body>
 9 <script src="jquery-3.3.1.min.js"></script>
10 <script src="menu.js"></script>
11 <div class="about">
12     <div class="menu">
13 
14         <div class="item">
15             <div class="title" onclick="show(this)">前端</div>
16             <div class="conn hide">
17                 <div>HTML</div>
18                 <div>css</div>
19                 <div>JavaScript</div>
20             </div>
21         </div>
22 
23         <div class="item">
24             <div class="title" onclick="show(this)">数据库</div>
25             <div class="conn hide">
26                 <div>SQL server</div>
27                 <div>MySQL</div>
28                 <div>Oracle</div>
29             </div>
30         </div>
31 
32         <div class="item">
33             <div class="title" onclick="show(this)">语言</div>
34             <div class="conn hide">
35                 <div>python</div>
36                 <div>java</div>
37                 <div>go</div>
38             </div>
39         </div>
40 
41     </div>
42     <div class="article"></div>
43 
44 </div>
45 
46 </body>
47 </html>

css代码块：

 1 .about {
 2      100%;
 3     height: 1000px;
 4     background-color: #b4b4b4;
 5 }
 6 .menu{
 7      20%;
 8     height: 350px;
 9     float: left;
10     background-color: cadetblue;
11 }
12 .hide{
13     display: none;     //隐藏下拉列表属性 不显示  通过hide来控制
14 }
15 .article{
16      70%;
17     height: 500px;
18     float: left;
19     background-color: lightgray;
20 }
21 .title{
22     background-color: darksalmon;
23     line-height: 40px;
24 }

javascript代码块：

1 function show(self) {
2     $(self).next().removeClass('hide');
3     $(self).parent().siblings().children('.conn').addClass('hide');
4 }          //hide有则隐藏 无则显示

$相当于jQuery对象