首页 > 代码库 > jQuery入门——选择器

jQuery入门——选择器

jQuery选择器可以分为四类:基础选择器,层级选择器,属性选择器,过滤选择器

基础选择器:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>基本选择器</title>
 6 <style type="text/css">
 7 </style>
 8 <script type="text/javascript" src=http://www.mamicode.com/"../js/jQuery-3.2.1.js"></script>
 9 <script type="text/javascript">
10     /*
11       基本选择器:
12          1.交集(AB) 一个元素,必须保证AB两个属性同时具备。
13            $("input[name]").css("color", "red");
14          2.并集  (A,B,C) 满足任何一个逗号的分区都会被锁定
15           $("div,span").css("color", "red");
16          3.全局
17           $("*").css("color", "red");
18      */
19     $(function() {
20         //交集选择器
21         //$("ul#second").css("color", "red");
22         //并集选择器
23         //$("ul#second,div").css("color", "red");
24         //html
25         $("*").css("color", "red");
26     });
27 </script>
28 </head>
29 <body>
30     <ul>
31         <li class="myred">上海</li>
32         <li class="myred">北京</li>
33         <li id="gz">广州</li>
34     </ul>
35 
36     <ul id="second">
37         <li class="myred">上海</li>
38         <li class="myred">北京</li>
39         <li id="gz">广州</li>
40     </ul>
41     <div>我是div</div>
42 
43 </body>
44 </html>

层级选择器:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>层级选择器</title>
 6 <style type="text/css">
 7 </style>
 8 <script type="text/javascript" src=http://www.mamicode.com/"../js/jQuery-3.2.1.js"></script>
 9 <script type="text/javascript">
10     $(function() {
11         //后代:子元素的子元素也可以被锁定到
12         //$("html body ul li").css("color","red");
13 
14         //子选择器   直接子元素
15         $("#bigbox>p>span").css("color","red");
16 
17         //相邻选择器 +   直接相邻,一般是后一个
18         //$("ul+div").css("color","red");
19 
20         //同辈  ~ 与family同辈的所有div,不包含family
21         //$("#family~div").css("color", "red");
22     });
23 </script>
24 </head>
25 <body>
26     <div id="family">
27         <div id="father">1</div>
28         <div id="mother">2</div>
29         <div id="samllthree">3</div>
30     </div>
31     <div>
32         一个div
33     </div>
34     <ul>
35         <li class="myred">上海</li>
36         <li class="myred">北京</li>
37         <li id="gz">广州</li>
38     </ul>
39     <div id="bigbox">
40         <p>我是p标签
41         <span>一个span</span>
42         </p>
43         <div id="small">我是小的div</div>
44     </div>
45     <p>我是小武,我骄傲,我傲娇</p>
46 </body>
47 </html>

属性选择器:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>属性选择器</title>
 6 <style type="text/css">
 7 </style>
 8 <script type="text/javascript" src=http://www.mamicode.com/"../js/jQuery-3.2.1.js"></script>
 9 <script type="text/javascript">
10     $(function() {
11         //选择指定属性的值是指定值的元素
12         $("[href=http://www.mamicode.com/‘baidu.com‘]").css("color","red");
13         //选择指定属性是以给定元素结尾的元素
14         $("[href$=‘Driver‘]").css("color","red");
15         //选择指定属性具有包含一个给定的子字符串的元素
16         $("[href*=‘com‘]").css("color", "red");
17         //选择指定属性就是以给定字符串开始的元素
18         $("[href^=‘com‘]").css("color", "red");
19     });
20 </script>
21 </head>
22 <body>
23     <a href=http://www.mamicode.com/"baidu.com">去百度</a>
24     <a href=http://www.mamicode.com/"com.mysql.jdbc.Driver">新浪</a>
25     <p href=http://www.mamicode.com/"com.mysql.jdbc.Driver">我是p</p>
26 </body>
27 </html>

过滤选择器:这就比较多了,总的来说就是以":"开头的选择器,下面举几个例子。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>过滤选择器</title>
 6 <style type="text/css">
 7 </style>
 8 <script type="text/javascript" src=http://www.mamicode.com/"../js/jQuery-3.2.1.js"></script>
 9 <script type="text/javascript">
10     $(function() {
11         //基本过滤选择器   first last odd even
12         //$("li:odd").css("color","red");
13         /* $("li:eq(2)").css("color","red"); */
14         // $("li").eq(2).css("color","red");
15         /* $("li:gt(2)").css("color","red"); */
16         //$(":header").css("color","red");
17         /* $("[name=txtName]").focus();
18         $(":focus").css("color","red"); */
19         $("#run").click(function() {
20             $("div:not(:animated)").animate({
21                 width : "+=200"
22             }, 1000);
23         });
24         $("#show").click(function() {
25             $(":hidden").show(3000);
26         });
27     });
28 </script>
29 </head>
30 <body>
31     <ul>
32         <li>农村包围城市</li>
33         <li>武装夺取政权</li>
34         <li>敌进我退,敌退我扰,敌疲我打</li>
35         <li>农村包围城市</li>
36         <li>武装夺取政权</li>
37         <li>敌进我退,敌退我扰,敌疲我打</li>
38     </ul>
39     <h2>过滤选择器专题</h2>
40     <input name="txtName" value=http://www.mamicode.com/"五一假期,我要学习" />
41     <input type="hidden" value=http://www.mamicode.com/"我是隐藏的input" />
42     <input type="button" id="show" value=http://www.mamicode.com/"点我显示一个p" />
43     <!-- 伪造隐藏元素 -->
44     <p style="display: none;">我是隐藏的</p>
45     <button id="run">Run</button>
46     <div style="width: 200px; height: 200px; border: 1px solid red;">我是div</div>
47 </body>
48 </html>

 

jQuery入门——选择器