基本筛选器：
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对象