標籤：
人的一生常處於抉擇之中，如：念哪一間大學？選哪一種職業？娶哪一種女子？……等等傷腦筋的事情。一個人抉擇力的有無，可以顯示其人格成熟與否。
倒是哪些胸無主見的人，不受抉擇之苦。因為逢到需要決定的時候，他總是求詢別人說："嘿，你看怎麼做？"
大凡能夠成大功業的人，都是抉擇力甚強的人。他知道事之成敗，全在乎已沒有人可以代勞，更沒有人能代你決定。 在抉擇的哪一刻，成敗實已露出端倪。 美文欣賞完了，是不是可以一心來閱讀我的文章了呢？靜下心來，這期的文檔含金量都比較大，一定要好好吸收！下面說說我們這章的主要內容：jQuery選取器說到選取器大部分的人會想到CSS(Cascading Style Sheets,層疊樣式表)，jQuery選取器具有良好的瀏覽器安全色性優勢：（1）簡介的寫法（2）支援CSS1.0到CSS3.0選取器（3）完善的處理機制一：基本選取器：標籤選取器、類別選取器、ID選取器、並集選取器、交集選取器、全域選取器#myid 返回: <jQuery對象>匹配一個id為myid的元素。element 返回: <jQuery對象> 數組匹配所有的element元素.myclass 返回: <jQuery對象> 數組匹配所有class為myclass的元素* 返回: <jQuery對象> 數組匹配所有元素。該選取器會選擇文檔中所有的元素，包括html，head，bodyselector1,selector2,selectorN 返回: <jQuery對象> 數組匹配所有滿足selector1或selector2或selectorN的元素
案例：
1 <title>jQuery基本選取器</title> 2 <style type="text/css"> 3 #box { 4 /*background-color:pink;*/ 5 border:2px solid black; 6 padding:5px; 7 } 8 </style> 9 <script src="js//jquery-1.12.3.min.js"></script>10 <script type="text/javascript">11 $(function () {12 $("#box").css("background-color","yellow");13 $("h2").click(function () {14 $("h3").css("background-color", "orange");15 });16 });17 18 </script>19 </head>20 <body>21 <div id="box">id為box的div22 <h2 class="title">class為title的h2</h2>23 <h3 class="title">class位title的h3</h3>24 <h3>熱門排行</h3>25 <dl>26 <dt><img src="img\1.jpg" width="300px" height="300px" alt="美女圖片"/></dt>27 <dt class="title">打美女</dt>28 <dd>色色遊戲</dd>29 <dd>QQ遊戲</dd>30 </dl>31 </div>32 </body>
二：層次選取器:後代選取器、子選取器、相鄰元素選取器和同輩元素選取器
1 elementParent elementChild 返回: <jQuery對象> 數組2 匹配elementParent下的所有子項目elementChild。例如：$("div p") 選擇所有div下的p元素3 elementParent > elementChild 返回: <jQuery對象> 數組4 匹配elementParent下的子項目elementChild。例如：$("div>p") 選擇所有上階項目為div的p元素5 prev+next 返回: <jQuery對象> 數組6 匹配prev同級之後緊鄰的元素next。例如：$("h1+div") 選擇所有div同級之前為h1的元素（<h1 /><div />）7 prev ~ siblings 返回: <jQuery對象> 數組8 匹配prev同級之後的元素siblings。例如：$("h1~div") 可以匹配（<h1 /><div /><div />）
三 ：屬相選取器：
1 jQuery 使用 XPath 運算式來選擇帶有給定屬性的元素。2 $("[href]") 選取所有帶有 href 屬性的元素。3 $("[href=‘#‘]") 選取所有帶有 href 值等於 "#" 的元素。4 $("[href!=‘#‘]") 選取所有帶有 href 值不等於 "#" 的元素。5 $("[href$=‘.jpg‘]") 選取所有 href 值以 ".jpg" 結尾的元素。
案例：
1 <title>英雄聯盟</title> 2 3 <script src="js//jquery-1.12.3.min.js"></script> 4 <script type="text/javascript"> 5 $(function () { 6 $("p").click(function () { 7 $(".txt_box>.current").css("background-color", "#6FF"); 8 $("p > span").css("background-color", "#F9F").next("background-color", "#F06"); 9 $("strong~span").css("color", "#00C");10 });11 });12 </script>13 </head>14 <body>15 <h1>《英雄聯盟》</h1>16 <p>《英雄聯盟》，簡稱LOL</p>17 <p>那個<strong>Riot Games</strong>開發..<span>nagegeeeg...18 <strong>魔獸爭霸</strong>19 啥啥啥....</span><a href="#">更多詳情</a></p>20 <h2>目錄</h2>21 <ul class="txt_box">22 <li class="current">Team Dev</li>23 <li>遊戲周邊</li>24 <li>遊戲介紹</li>25 <li>配置需求</li>26 <li>遊戲背景</li>27 </ul>28 </body>
四：通過條件過濾選取元素
1.簡單過濾選取器
（1）:first 選取器。選擇第一個匹配元素。 $("td:first").css("border","2px solid blue");
（2）:last 選取器。選擇最後一個匹配元素。 $("td:last").css("border","2px solid blue");
（3）:odd 選取器。選擇所有基數元素。 $("td:odd").css("border","2px solid blue");
（4）:even 選取器。選擇所有偶數元素。 $("td:even").css("border","2px solid blue");
（5）:eq(index) 選取器。從匹配的集合中選擇索引等於給定值的元素。 $(td:eq(0))".css("border","2px solid blue");
（6）:gt(index) 選取器。索引大於給定值的所有元素。
（7）:lt(index) 選取器。索引小於給定值的所有元素。
（8）:not(selector...) 選取器。去除某些選取器後的所有元素。 $("td:not(:first,:last)").css(...);
（9）:header 選取器。選擇所有諸如 h1,h2,h3 之類的標題元素。 $(":header")
（10）:animated 選取器。選擇所有正在執行動畫效果的元素。 $(td:animated);
可見與不可見：
：visible選取所有可見的元素
：hidden選取所有的隱藏元素
案例：
1 <title>近期熱門欄目</title> 2 <style type="text/css"> 3 4 </style> 5 <script src="js//jquery-1.12.3.min.js"></script> 6 <script type="text/javascript"> 7 $(function () { 8 $("li:even").css("background-color", "#CCC"); 9 });10 $(function () {11 $(".mydiv").css("background-color", "#FF99CC");12 });13 $(function () {14 $(".one").click(function () {15 $(".myclass:hidden").show();16 });17 });18 </script>19 </head>20 <body>21 <p>淘樂，更多生活，<strong>快樂</strong>就在你身邊</p>22 <strong>近期熱門</strong><p class="one">（更多）</p>23 <ul>24 <li>發的v數</li>25 <li>的我看到健康</li>26 <li class="mydiv">顛三倒四女</li>27 <li>分地點VB</li>28 <li>梵蒂岡獨女</li>29 <li>我七號的劇本就</li>30 <li>DVD看劇本</li>31 <li>大酒店及刺</li>32 <li class="myclass">發貨對話的</li>33 <li class="myclass">一定會發動機</li>34 <li class="myclass">傻逼舉不勝舉</li>35 </ul>36 </body>
選取器這塊我覺得我講的不是很好，因為有太多的功能沒有給大家展示，等會給大家出一套關於jQuery的面試題！有興趣可以看看
人生的路很長，路有很多分支，每個分支都對應著不一樣的未來，然而你選擇了現在的這條路你就必須走下去
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
