jquery選擇器詳細說明

時間 2019-12-11

原文原文鏈接

　　jquery中選擇器感受是用的特別多而且特別方便的一個方法，今天就在這裏詳細的記載下大多數經常使用的選擇器，一塊兒學習探討。css

　首先介紹的是css3的選擇器，其中包括了標籤選擇器（div），ID選擇器（#ID），類選擇器（.class），羣組選擇器（div1,div2,div3），後代選擇器（div1 div2），通配選擇器（*），僞類選擇器（div:first-child），子選擇器（div > li），臨近選擇器（div + div），屬性選擇器（div[id='ID']）,後代同胞選擇器（div ~ div）等等。
jquery的選擇器徹底繼承了css的選擇器，包括css1,css2以及css3。

 1 <ul class="menu" id="#menu">
 2             <li class="level1">
 3                 <a href="#no1">層次1</a>
 4                 <ul>
 5                     <li>菜單1</li>
 6                     <li>菜單2</li>
 7                     <li>菜單3</li>
 8                     <li>菜單4</li>
 9                 </ul>
10             </li>
11             <li class="level1">
12                 <a href="#no2">層次2</a>
13                 <ul>
14                     <li>菜單1</li>
15                     <li>菜單2</li>
16                     <li>菜單3</li>
17                     <li>菜單4</li>
18                 </ul>
19             </li>
20             <li class="level1">
21                 <a href="#no3">層次3</a>
22                 <ul>
23                     <li>菜單1</li>
24                     <li>菜單2</li>
25                     <li>菜單3</li>
26                     <li>菜單4</li>
27                 </ul>
28             </li>
29             <li class="level1">
30                 <a href="#no4">層次4</a>
31                 <ul>
32                     <li>菜單1</li>
33                     <li>菜單2</li>
34                     <li>菜單3</li>
35                     <li>菜單4</li>
36                 </ul>
37             </li>
38         </ul>

　　其中以上面的html代碼段爲示例，咱們就用jquery去選擇和改變它的樣式，讓他成爲一個咱們平時所熟悉的導航欄。下面是基於上面這個html代碼介紹的jquery經常使用的過濾器html

  1 /**
  2                  * 下面介紹的jquery中最基本的5種選擇器
  3                  */
  4                 //1 ID選擇器,返回的是單個元素
  5                 var $menu = $("#menu");
  6                 //2  類選擇器，返回的是元素集合
  7                 var $level = $(".level1");
  8                 //3 標籤選擇器，返回的是元素集合
  9                 var $li = $("li");
 10                 //4 通配選擇器，返回的是元素集合，下面實例的是返回menu下的全部的元素
 11                 var $all = $("#menu *");
 12                 //5 羣組選擇器，返回的是元素集合，下面實例中返回的是全部的ul和 class = level1的元素
 13                 var $menuAndLevel1 = $("ul,.level1");
 14                 /**
 15                  * 其實咱們已經能夠用上面的選擇器完成大部分的工做了。可是jquery選擇器的魅力不只僅於此。
 16                  * 下面介紹的是jquery的層次選擇器
 17                  */
 18                 
 19                 //1 後代元素選擇器,返回的是元素的集合。這裏返回的包括了#menu下面全部的li元素
 20                 var $childrenLi = $("#menu li");
 21                 //2 直接後代元素選擇器，返回的是元素的集合。這裏返回的#menu下面第一層的li，例子中的是包含class="level1"的li元素
 22                 var $childrenFirstLi = $("#menu>li");
 23                 //3 臨近元素選擇器，返回集合元素。這裏返回的ul集合，若是a的後面不是ul，則返回爲空
 24                 var $nextUl = $("a + ul");
 25                 //4 後代同胞選擇器，返回集合元素。這裏返回的是第一個class="level1"以後的同胞li元素。這裏的first表明的所選集合中的第一個元素，下面會講到。
 26                 var $nextSiblings = $("ul > li:first ~ li");
 27                 //5 其中3中臨近元素選擇器中的方法還可用下面這種方法代替,next()中的參數是一種選擇器，若是沒有參數，則默認選擇下一個元素，至關於next("*")
 28                 //下面的3中方法所獲得的結果是相同的
 29                 var $nextUl2 = $("a").next("ul");
 30                 var $nextUl3 = $("a").next();
 31                 var $nextUl4 = $("a").next("*");
 32                 //6 4中的方法也有能夠代替的方法，nextAll()方法具體和next方法差很少。選擇當前元素以後的所匹配的因此元素
 33                 var $nextSiblings2 = $("ul > li:first").nextAll("li");
 34                 var $nextSiblings3 = $("ul > li:first").nextAll();
 35                 var $nextSiblings4 = $("ul > li:first").nextAll("*");
 36                 //7 jquery中還有一種和nextAll類型，可是不徹底相同的方法。siblings()，其中返回的是所匹配的全部元素，無論位置實在當前元素前面仍是後面
 37                 var $allSiblings = $("ul > li:first").siblings();//返回的結果和上面3個相同。若是選中的li元素是第二個，上面返回3，4的li，而這裏返回1,3,4的li
 38                 
 39                 /**
 40                  * jquery中的過濾選擇器的規則和css中僞類選擇器語法相同，就是經過:開頭
 41                  */
 42                 
 43                 //1 :first 選擇器。返回的是單個元素。返回刪選集合中的第一個li
 44                 var $fisrtLi = $("ul li:first");
 45                 //2 :last 選擇器。返回的是單個元素。返回刪選集合中的最後一個li
 46                 var $lasttLi = $("ul li:last");
 47                 //3 :not 選擇器。返回的是元素集合。返回不包含class的li。not中參數和普通選擇器如出一轍，不用包含單雙引號。
 48                 var $liNotClass = $("li:not(.level1)");
 49                 //4 :even 選擇器。返回的是元素集合。返回選中集合中序列爲偶數的集合。（從0開始，0算作偶數）
 50                 var $evenLi = $("li:even");
 51                 //5 :odd 選擇器。返回的是元素集合。返回所選中集合中序列爲奇數的集合。
 52                 var $oddLi = $("li:odd");
 53                 //6 :eq 選擇器。返回的單個元素。 返回所選擇集合中序列和和傳進來相同的元素。從0開始算起.返回的是第二個li元素（層次1下的第一個li）
 54                 var $indexLi = $("li:eq(1)");
 55                 //7 :gt，:lt 選擇器。gt(index)是返回所選中集合中索引大於index的集合。lt(index)是返回索引小於index的集合
 56                 var $gtIndex = $("li:gt(0)");//返回第一個開始之後的li
 57                 var $ltIndex = $("li:lt(10)");//返回第10個之前的li
 58                 var $bIndex = $("li:lt(10):gt(2)");//返回的元素個數是7個。若是順序呼喚，返回的元素個數是10個
 59                 var $cIndex = $("li:gt(2):lt(10)");//返回的元素個數是10個。由於lt:(10)是對gt(2)之後的集合在過濾。gt(2)返回的個數大於10個
 60                 //8 還有:header（標題元素選擇器，如h1,h2）,:animated(選取正在執行動畫的全部元素),:focus選擇器（選取當前得到焦點的元素）。
 61                 //都是返回元素集合。可是這裏沒用到。因此不詳細介紹了。
 62                 
 63                 /**
 64                  * jquery內容過濾選擇器
 65                  */
 66                 
 67                 //1 文本過濾選擇器。返回的是元素集合。返回文本中包含「層次」的a元素
 68                 var $textA = $("a:contains('層次')");
 69                 //2 :empty 選擇器。返回的是元素集合。返回不包含任何子元素或者文本的空元素。這裏沒有該元素
 70                 //3 :has(selector) 含有選擇器。返回元素集合。下面返回的是全部包含a元素的li元素
 71                 var $hasALi = $("li:has(a)");
 72                 //4 :parant 選擇器。返回元素集合。這個是和empty選擇器相對的選擇器。下面返回包含子元素或文本元素的li
 73                 var $notEmptyLi = $("li:parent");
 74                 //5 :hidden 過濾器。返回元素集合。不可見元素包括任何的隱藏,不論是經過displty:none仍是hidden=hidden或者type="hidden"。
 75                 //6 :visible 過濾器。返回元素集合。返回全部可見的li元素。與:hidden過濾器正好相反。
 76                 var $notHideLi = $("li:visible");
 77                 
 78                 /**
 79                  * jquery屬性過濾選擇器。因爲屬性選擇過濾器平時用的不太多，這裏就簡略介紹下。如下用class舉例，能夠包括全部的屬性。
 80                  * 屬性選擇器直接跟在須要過濾的元素後面，不包含空格。若是含有空格，則會對元素的全部子元素進行屬性過濾。至關於「selector *[]」
 81                  */
 82                 var $li1 = $("li[class]");//選擇屬性中含全部class的li元素
 83                 var $a1 = $("a[href=\\#no1]");//選擇屬性中含有href且href的值爲#no1的元素。#在jquery中是特殊字符。須要轉譯
 84                 var $a2 = $("a[href!=\\#no1]");//返回href不等於#no1的a元素。特別注意，若是a中不含有href，也會被返回
 85                 var $li2 = $("li[class ^= level]")//返回以level開頭的class的li
 86                 var $li3 = $("li[class $= 1]");//返回1結尾的class的li
 87                 var $li4 = $("li[class *= vel]");//返回class中包含vel的li
 88                 var $li5 = $("li[class |= level1]");//返回class等於level1或者以level1爲前綴，後面用連字符'-'的元素。相似level1-no1
 89                 var $li6 = $("li[class ~= level1]");//返回class中用空格分隔的值中包含level1的li元素。相似level1或者level1 level2。這裏返回值同$li5
 90                 var $Li7 = $("li[class ^= lev][class *=vel][class $= 1]");//符合選擇器。選出知足全部條件的元素。每選擇一次，範圍縮小。
 91                 
 92                 
 93                 /**
 94                  * jquery中的子元素過濾器。我的感受這個過濾器十分的方便好用
 95                  */
 96                 
 97                 //1 :nth-child 選擇器。這個選擇器很強大！可使用index（序列，從1開始），even，odd，2n，2n-1，3n（n都是從1開始）等等。
 98                 //其中所過濾元素的索引是在其父元素下面的索引，而不是所篩選出來的集合中的索引。這點很重要，也是和eq的區別之一。
 99                 //eq的索引是篩選出來的集合的索引。nth-child的規則和css中的規則如出一轍，詳細能夠參考css的規則
100                 var $everyFirstLi = $("li:nth-child(1)");//這裏返回的li有5個。只要li元素在其父元素下是第一個元素，就會被篩選出來
101                 var $firstLi = $("li:first-child");//同上，也是返回5個li元素
102                 var $lastLi = $("li:last-child");//只要li元素是在其父元素的最後一個，就會被篩選出來
103                 var $everyLastLi = $("li:nth-last-child(2)");//只要li在其父元素的倒數第二個，就會被返回
104                 var $onlyLi = $("li:only-child");//返回父元素中僅有一個li的li。這個返回爲空
105                 
106                 
107                 /**
108                  * 還有表單元素過濾，因爲這裏時間問題。就不寫表單元素了。可是表單過濾器能夠稍微介紹下。返回的都是元素集合
109                  * :enabled 選取全部可用元素   $(":enabled");
110                  * :disabled 選取全部不可用元素 $(":disabled");
111                  * :checked 選取單選框或複選框中勾選中的元素 $(":checked");
112                  * :selected 選取下拉框中選中的選項元素 $(":selected");
113                  * :input 選取全部的<input> <textarea> <select> <button> 元素。$(":input"); 
114                  * :text 選取全部單行文本框 $(":text");
115                  * :password 選取全部密碼框 $(":password");
116                  * :radio 選取全部單選框 $(":radio");
117                  * :checkbox 選取全部多選框 $(":checkbox");
118                  * :submit 選取全部提交按鈕 $(":submit");
119                  * :image 選取全部圖像按鈕 $(":image");
120                  * :reset 選取全部重置按鈕 $(":reset");
121                  * :button 選取全部按鈕 $(":button");
122                  * :file 選取文件上傳域 $(":file");
123                  * :hidden 選取全部不可見元素 $(":hidden");
124                  * 
125                  * 上面的元素是等同於$("*:enabled");固然*也能夠換成其餘的選擇器或者選擇器組合
126                  * 到這裏jquery的選擇器介紹的基本差很少了。有了這麼多的選擇器，選擇本身想要的元素實在過輕而易舉了
127                  */

　　基於上面的選擇器種類，能夠隨便組合幾種就能夠寫出一個普通的手風琴系列的導航菜單，我這裏就隨便寫一個。經過兩行代碼就能夠實現整個導航菜單，足以體現jquery中選擇器的強大之處，固然讀者可使用比我下面這個簡單的多的多的方法實現導航菜單。若是html中代碼寫的巧妙會更簡便，這裏只作示範用不講究那麼多了。 jquery

1             $(document).ready(function(){
2                 $("#menu li[class=level1]:not(:first) ul").hide();//把不是第一個的包含ul的li的ul給隱藏掉
3                 $("ul a[href ^= \\#no]").on("click",function(e){//給href中以#no開頭的a綁定點擊事件
4                     $(this).nextAll("ul").filter(":first").show(500);//點擊a元素的全部後面的同胞Ul中的第一個ul。這個不能用find。find是對其子元素的篩選
5                                                                      //filter是對集合自己的篩選
6                     $(this).parent().siblings().find("ul:has(li):contains('菜單')").hide(500);//隱藏a元素的父元素li的全部同胞li(不區分元素)，用find
7                                                                                              //篩選出包含li元素而且ul中含有菜單文本的ul元素並隱藏
8                 });
9             });