jQuery之選取器

標籤：指定   disable   bsp   class選取器   ast   等等   多個   ade   允許   

　　選取器允許你對元素組合單個元素進行操作；CSS3中的選取器在jQuery中也適用，如id選取器、class選取器、標籤選取器、屬性選取器、後代選取器等等。

　　將選取器作為參數傳給$()或者jQuery()，返回包含零個或一個DOM元素集合的jQuery對象。

基本選取器（*、id、class、element、selector1,selector2,selectorN）

 1 //  選擇所有元素 2 $("*") 3  4 //  選擇id為app的元素 5 $("#app") 6  7 // 選擇class為app的元素 8 $(".app") 9 10 // 選擇所有div元素11 $("div")12 13 // 選擇所有div、p、li元素14 $("div,p,li")

 層級選取器（後代選取器、兄弟元素選取器）

 1 //   後代選取器，包括子子孫孫 2 $("form input")    //  選擇form中的所有input元素 3 $("#main div")    //  選擇id為main的元素中的所有div 4  5 //   子項目選取器，只選擇兒子輩的元素 6 $("form > input")   //  選擇form中所有兒子為input的元素 7  8 //   兄弟元素選取器，必須具有相同的父元素 9 $("div ~ p")    //  選擇div元素後面的且具有相同父元素的所有p元素10 $("div + p")    //  選擇緊跟在div元素後的p元素，即相鄰的p元素，如：<div></div><p></p>（假設其具有相同父元素）

偽類別選取器

 1  //  基本過濾選取器 2  $("tr:first")               //  選擇所有tr元素中的第一個  3  $("tr:last")                //  選擇所有tr元素中的最後一個  4  $("input:not(:checked)")    //  不包含checked的選取器的所有的input元素  5  $("tr:even")                //  選擇所有的tr元素中索引為偶數的tr元素（注意：因為所選擇的多個元素時為數組，所以序號是從0開始）  6  $("tr:odd")                 //  選擇所有的tr元素中索引為奇數的tr元素 7  $("td:eq(2)")               //  選擇所有td元素中索引為2的td元素  8  $("td:gt(4)")               //  選擇td元素中索引大於4的所有td元素  9  $("td:lt(4)")               //  選擇td元素中索引小於4的所有的td元素 10  $(":header") 11  $("div:animated") 12  13  //  內容過濾選取器14  $("div:contains(‘John‘)")    //  選擇所有div中含有John文本的元素 15  $("td:empty")                //  選擇所有的空（也不包括文本節點）的td元素16  $("div:has(p)")              //  選擇所有含有p標籤的div元素 17 $("td:parent")                //  選擇所有含有子項目或者文本的td元素18 19 //  可視化過濾選取器20  $("div:hidden")            //  選擇所有的被hidden的div元素 21  $("div:visible")           //  選擇所有的可視化的div元素 22   23 //  子項目過濾選取器24  $("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)") 25  $("div span:first-child")          //  選擇div中的第一個孩子且標籤名為span元素26  $("div span:last-child")           //  選擇div中的最後一個孩子且標籤名為span元素27  $("div button:only-child")         //  選擇div中button是唯一子項目的button元素28  $("div span:nth-of-type(2)")       //  選擇所有div中的第二個span元素 29  30 //表單元素選取器： 31  $(":input")                //  選擇所有的表單輸入元素，包括input, textarea, select 和 button 32  $(":text")                 //  選擇所有的text input元素 33  $(":password")             //  選擇所有的password input元素 34  $(":radio")                //  選擇所有的radio input元素 35  $(":checkbox")             //  選擇所有的checkbox input元素 36  $(":submit")               //  選擇所有的submit input元素 37  $(":image")                //  選擇所有的image input元素 38  $(":reset")                //  選擇所有的reset input元素 39  $(":button")               //  選擇所有的button input元素 40  $(":file")                 //  選擇所有的file input元素 41  $(":hidden")               //  選擇所有類型為hidden的input元素或表單的隱藏欄位 42 43 //表單元素過濾選取器44  $(":enabled")                  //   選擇所有的可操作的表單元素 45  $(":disabled")                 //   選擇所有的不可操作的表單元素 46  $(":checked")                  //   選擇所有的被checked的表單元素 47  $("select option:selected")    //   選擇所有的select的子項目中被selected的元素 

屬性選取器

 1 //   選擇帶有某個屬性的元素 2 $("[name]")    //  選擇所有帶有name屬性的元素 3 $("div[id]")      //  選擇所有帶有id屬性的div元素 4  5 //    選擇指定屬性值的元素 6 $("[type=‘text‘]")    //  選擇所有type屬性為text的元素 7 $("a[href=‘button.html‘]")    //  選擇所有href屬性為button.html的a元素 8 $("[type!=‘button‘]")    //  選擇所有type屬性不為button的元素 9 $("[type$=‘button‘]")    //  選擇所有type屬性以button結尾的元素10 $("[type^=‘button‘]")    //  選擇所有type屬性以button開始的元素11 $("[type|=‘button‘]")12 $("[type*=‘button‘]")13 $("[type~=‘button‘]")

jQuery之選取器