学习Jquery选择器之后，可以发现与css的选择器几乎相同，可能也就是最新的css选择器还不能在jquery中实现，但那都很少用。
下面是Jquery中常见的选择器：
一、基本选择器
$("div").css("background-color", "red");//表示对所有的div增加背景颜色--红色。$(".divClass").css("background", "gray");//表示对所有class为'divClass'的元素设置背景色--灰色二、层次选择器
//下面这两个都是表示紧邻的下一个同辈元素。如果.spanclass代表span，则后面同辈元素也必须是span
$(".spanclass+span").css("color", "blue").css("font-size", 33);
$(".spanclass").next().next().css("color", "blue").css("font-size", 33);//下面这两个表示所有的后面的同辈元素
$(".spanclass~span").css("color", "blue").css("font-size", 33);
$(".spanclass").nextAll().css("color", "blue").css("font-size", 33);//下面这个表示与其同辈的无论前后的span，不包括本身
$(".spanclass").siblings("span").css("color", "blue").css("font-size", 33);
三、过滤选择器
包括：基本过滤器、内容过滤器、可见性过滤器、属性过滤器、表单过滤器等
下面附详细代码，代码中有各种过滤器使用方法及详细注释。
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9
10 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
11 <style>
12 div {
13 border: 1px solid blue;
14 width: 200px;
15 height: 250px;
16 }
17
18 table td,
19 table th {
20 border: 1px solid red;
21 }
22 </style>
23
24 </head>
25
26 <body>
27
28 <h1><span>Jquery Selector Test子代</span></h1>
29 <h1>
30 <p>aaaaa<span>wo在span中是子代的子代</span></p>
31 </h1>
32 <div id="div1Id" class="divClass" title="div" style="float:left">我是div1
33 <div style="width:100px;height:100px">我是内部div1</div>
34 <div style="width:100px;height:100px">我是内部div2</div>
35 <div style="width:100px;height:100px">我是内部div3</div>
36 </div>
37 <div class="divClass" style="float:left">
38 <div style="width:100px;height:100px">我是内部div</div>
39 <div style="width:100px;height:100px">我是内部div2</div>
40 <div style="width:100px;height:100px">我是内部div3</div>
41 <span>前面的span</span><span class="spanclass">我是div2</span><span>紧跟的部分哈哈</span><span>孙子部分</span></div>
42 <div title="div" class="divClass" style="float:left"><span>我是div3</span>
43 <div style="width:100px;height:100px">我是内部div</div>
44 <div style="width:100px;height:100px">我是内部div2</div>
45 <div style="width:100px;height:100px">我是内部div3</div>
46 </div>
47 <div style="float:left"><span>我是div4</span></div>
48 <div style="float:right;display:none"><span>我是div5</span></div>
49
50 <table>
51 <tr>
52 <th>aaaaaaa</th>
53 <th>aaaaaaa</th>
54 <th>aaaaaaa</th>
55 <th>aaaaaaa</th>
56 <th>aaaaaaa</th>
57 <th>aaaaaaa</th>
58 <th>aaaaaaa</th>
59 <th>aaaaaaa</th>
60 </tr>
61 <tr>
62 <td>bbbbbbb</td>
63 <td>bbbbbbb</td>
64 <td>bbbbbbb</td>
65 <td>bbbbbbb</td>
66 <td>bbbbbbb</td>
67 <td>bbbbbbb</td>
68 <td>bbbbbbb</td>
69 <td>bbbbbbb</td>
70 </tr>
71 <tr>
72 <td>ccccccc</td>
73 <td>ccccccc</td>
74 <td>ccccccc</td>
75 <td>ccccccc</td>
76 <td>ccccccc</td>
77 <td>ccccccc</td>
78 <td>ccccccc</td>
79 <td>ccccccc</td>
80 </tr>
81 <tr>
82 <td>dddddddd</td>
83 <td>dddddddd</td>
84 <td>dddddddd</td>
85 <td>dddddddd</td>
86 <td>dddddddd</td>
87 <td>dddddddd</td>
88 <td>dddddddd</td>
89 <td>dddddddd</td>
90 </tr>
91 </table>
92 <form>
93
94 <input type="text" value="慢慢显示" hidden="true">
95 </form>
96
97
98 <script>
99 //一、基本选择器的使用
100
101 $(document).ready(function() {
102 //dom加载完就执行的部分
103 // $("div").css("background-color", "red");
104
105 })
106
107 $(function() {
108 //$("div").css("background-color", "yellow");
109 })
110 //Jquery可以无限次的写dom加载完之后执行的方法，不同于window.onload,只能写一次
111 $(function() {
112 // $(".divClass").css("background", "gray");
113 })
114
115
116 //二、层次选择器的使用
117 /* $(function() {
118 $("span,.divClass").css("color", "red").css("font-size", 20);
119 }) */
120 //$("h1 span").css("color", "blue"); //这个是h1下所有的子代，孙子辈也可以
121 //$("h1>span").css("color", "blue"); //这个是h1下第一子代，孙子不可以
122 //下面这两个都是表示紧邻的下一个同辈元素。如果.spanclass代表span，则后面同辈元素也必须是span
123 //$(".spanclass+span").css("color", "blue").css("font-size", 33);
124 // $(".spanclass").next().next().css("color", "blue").css("font-size", 33);
125 //下面这两个表示所有的后面的同辈元素
126 //$(".spanclass~span").css("color", "blue").css("font-size", 33);
127 //$(".spanclass").nextAll("span").css("color", "blue").css("font-size", 33);
128 //下面这个表示与其同辈的无论前后的span，不包括本身
129 //$(".spanclass").siblings("span").css("color", "blue").css("font-size", 33);
130
131
132 //三、过滤选择器的使用,一般都是用：。PS:冒号表示过滤的意思。前面不带空格，表示自身筛选，带空格表示子代筛选
133 $(function() {
134
135 //1,基本过滤器
136 //表示table中隔列变色
137 /* $("table th:even").css("background", "red");
138 $("table th:odd").css("background", "blue"); */
139
140 //表示table中隔行变色。
141 /* $("table tr:even").css("background", "yellow");
142 $("table tr:odd").css("background", "gray"); */
143
144 //多个选择器的同时使用，其实是可以的。可以理解为对一堆对象不停的筛选。这可能也是Jquery有名的链式操作了。
145 //下面表示从>0行开始隔行变色
146 $("table tr:gt(0):even").css("background", "yellow");
147 $("table tr:gt(0):odd").css("background", "gray");
148
149 //2,内容过滤器
150 $("div:contains('div4')").css("background", "red");
151 //3,可见性过滤选择器
152 $("div:hidden").show(3000);
153 $("input:hidden").show(3000);
154
155 //4,属性过滤器'
156 //$("div[title=div]").css("background", "blue");
157 // $("div[title!=div]").css("background", "red"); //div的集合中 title不等于div的div的集合。
158 //$("div[id][title=div]").css("background", "blue"); //多个属性过滤器并列使用，不断缩小结果集的过程而已。
159
160 //ps 补充一个基本过滤器和下面比较。这个表示divclass的div后代的中div的第一个设置为黄色。
161 $("div.divClass div:first").css("background", "yellow"); //这个表示选择出所有符合条件对应的div，选取第一个
162 //5,:first-child'注意事项使用子元素过滤器需要冒号前加空格，才会生效
163 $("div.divClass :first-child").css("background", "yellow"); //表示class=divClass的div集合的每一个div子元素第一个子元素设置为yellow
164 $("div.divClass :nth-child(2)").css("background", "red"); //表示class=divClass的div集合每一个div的子元素中第二个子元素设置为yellow
165 })
166 </script>
167
168 </body>
169
170 </html>View Code
后续补充表单过滤器详细代码。。。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
