jQuery入門——選擇器

時間 2019-12-05

原文原文鏈接

jQuery選擇器能夠分爲四類：基礎選擇器，層級選擇器，屬性選擇器，過濾選擇器javascript

基礎選擇器：css

 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="../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>

層級選擇器：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="../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>

屬性選擇器：java

 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="../js/jQuery-3.2.1.js"></script>
 9 <script type="text/javascript">
10     $(function() {
11         //選擇指定屬性的值是指定值的元素
12         $("[href='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="baidu.com">去百度</a>
24     <a href="com.mysql.jdbc.Driver">新浪</a>
25     <p href="com.mysql.jdbc.Driver">我是p</p>
26 </body>
27 </html>

過濾選擇器：這就比較多了，總的來講就是以":"開頭的選擇器，下面舉幾個例子。mysql

 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="../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="五一假期，我要學習" />
41     <input type="hidden" value="我是隱藏的input" />
42     <input type="button" id="show" value="點我顯示一個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>

1. jQuery（1）----入門&選擇器
2. jQuery入門、jQuery選擇器、jQuery操做
3. jQuery入門、jQuery選擇器、jQuery操作
4. JQuery入門 0x1 jQuery選擇器
5. JQuery快速入門-選擇器
6. jQuery-jQuery選擇器
7. jQuery選擇器
8. jQuery 選擇器
9. jquery選擇器
10. JQuery選擇器
更多相關文章...
• Memcached入門教程 - NoSQL教程
• jQuery Mobile 表單選擇菜單 - jQuery Mobile 教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。