標籤:節點 注意 enable 尋找 包括 tar plain 並且 not
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186 |
jQuery 的選取器可謂之強大無比,這裡簡單地總結一下常用的元素尋找方法 $( "#myELement" ) 選擇id值等於myElement的元素,id值不能重複在文檔中只能有一個id值是myElement所以得到的是唯一的元素 $( "div" ) 選擇所有的div標籤元素,返回div元素數組 $( ".myClass" ) 選擇使用myClass類的css的所有元素 $( "*" ) 選擇文檔中的所有的元素,可以運用多種的選擇方式進行聯合選擇:例如$( "#myELement,div,.myclass" ) 層疊選取器: $( "form input" ) 選擇所有的form元素中的input元素 $( "#main > *" ) 選擇id值為main的所有的子項目 $( "label + input" ) 選擇所有的label元素的下一個input元素節點,經測試選取器返回的是label標籤後面直接跟一個input標籤的所有input標籤元素 $( "#prev ~ div" ) 同胞選取器,該選取器返回的為id為prev的標籤元素的所有的屬於同一個父元素的div標籤 基本過濾選取器: $( "tr:first" ) 選擇所有tr元素的第一個 $( "tr:last" ) 選擇所有tr元素的最後一個 $( "input:not(:checked) + span" ) 過濾掉:checked的選取器的所有的input元素 $( "tr:even" ) 選擇所有的tr元素的第0,2,4... ...個元素(注意:因為所選擇的多個元素時為數組,所以序號是從0開始) $( "tr:odd" ) 選擇所有的tr元素的第1,3,5... ...個元素 $( "td:eq(2)" ) 選擇所有的td元素中序號為2的那個td元素 $( "td:gt(4)" ) 選擇td元素中序號大於4的所有td元素 $( "td:ll(4)" ) 選擇td元素中序號小於4的所有的td元素 $( ":header" ) $( "div:animated" ) 內容過濾選取器: $( "div:contains(‘John‘)" ) 選擇所有div中含有John文本的元素 $( "td:empty" ) 選擇所有的為空白(也不包括文本節點)的td元素的數組 $( "div:has(p)" ) 選擇所有含有p標籤的div元素 $( "td:parent" ) 選擇所有的以td為父節點的元素數組 可視化過濾選取器: $( "div:hidden" ) 選擇所有的被hidden的div元素 $( "div:visible" ) 選擇所有的可視化的div元素 屬性過濾選取器: $( "div[id]" ) 選擇所有含有id屬性的div元素 $( "input[name=‘newsletter‘]" ) 選擇所有的name屬性等於 ‘newsletter‘ 的input元素 $( "input[name!=‘newsletter‘]" ) 選擇所有的name屬性不等於 ‘newsletter‘ 的input元素 $( "input[name^=‘news‘]" ) 選擇所有的name屬性以 ‘news‘ 開頭的input元素 $( "input[name$=‘news‘]" ) 選擇所有的name屬性以 ‘news‘ 結尾的input元素 $( "input[name*=‘man‘]" ) 選擇所有的name屬性包含 ‘news‘ 的input元素 $( "input[id][name$=‘man‘]" ) 可以使用多個屬性進行聯合選擇,該選取器是得到所有的含有id屬性並且那麼屬性以man結尾的元素 子項目過濾選取器: $( "ul li:nth-child(2)" ),$( "ul li:nth-child(odd)" ),$( "ul li:nth-child(3n + 1)" ) $( "div span:first-child" ) 返回所有的div元素的第一個子節點的數組 $( "div span:last-child" ) 返回所有的div元素的最後一個節點的數組 $( "div button:only-child" ) 返回所有的div中只有唯一一個子節點的所有子節點的數組 表單元素選取器: $( ":input" ) 選擇所有的表單輸入元素,包括input, textarea, select 和 button $( ":text" ) 選擇所有的text input元素 $( ":password" ) 選擇所有的password input元素 $( ":radio" ) 選擇所有的radio input元素 $( ":checkbox" ) 選擇所有的checkbox input元素 $( ":submit" ) 選擇所有的submit input元素 $( ":image" ) 選擇所有的image input元素 $( ":reset" ) 選擇所有的reset input元素 $( ":button" ) 選擇所有的button input元素 $( ":file" ) 選擇所有的file input元素 $( ":hidden" ) 選擇所有類型為hidden的input元素或表單的隱藏欄位 表單元素過濾選取器: $( ":enabled" ) 選擇所有的可操作的表單元素 $( ":disabled" ) 選擇所有的不可操作的表單元素 $( ":checked" ) 選擇所有的被checked的表單元素 $( "select option:selected" ) 選擇所有的select 的子項目中被selected的元素 選取一個 name 為”S_03_22″的input text框的上一個td的text值 $(”input[@ name =S_03_22]“).parent().prev().text() 名字以”S_”開始,並且不是以”_R”結尾的 $(”input[@ name ^= ‘S_‘ ]“).not(”[@ name $= ‘_R‘ ]“) 一個名為 radio_01的radio所選的值 $(”input[@ name =radio_01][@checked]“).val(); $( "A B" ) 尋找A元素下面的所有子節點,包括非直接子節點 $( "A>B" ) 尋找A元素下面的直接子節點 $( "A+B" ) 尋找A元素後面的兄弟節點,包括非直接子節點 $( "A~B" ) 尋找A元素後面的兄弟節點,不包括非直接子節點 1. $( "A B" ) 尋找A元素下面的所有子節點,包括非直接子節點 例子:找到表單中所有的 input 元素 HTML 程式碼: <form> <label>Name:</label> <input name= "name" /> <fieldset> <label>Newsletter:</label> <input name= "newsletter" /> </fieldset> </form> <input name= "none" /> jQuery 代碼: $( "form input" ) 結果: [ <input name= "name" />, <input name= "newsletter" /> ] 2. $( "A>B" ) 尋找A元素下面的直接子節點 例子:匹配表單中所有的子級input元素。 HTML 程式碼: <form> <label>Name:</label> <input name= "name" /> <fieldset> <label>Newsletter:</label> <input name= "newsletter" /> </fieldset> </form> <input name= "none" /> jQuery 代碼: $( "form > input" ) 結果: [ <input name= "name" /> ] 3. $( "A+B" ) 尋找A元素後面的兄弟節點,包括非直接子節點 例子:匹配所有跟在 label 後面的 input 元素 HTML 程式碼: <form> <label>Name:</label> <input name= "name" /> <fieldset> <label>Newsletter:</label> <input name= "newsletter" /> </fieldset> </form> <input name= "none" /> jQuery 代碼: $( "label + input" ) 結果: [ <input name= "name" />, <input name= "newsletter" /> ] 4. $( "A~B" ) 尋找A元素後面的兄弟節點,不包括非直接子節點 例子:找到所有與表單同輩的 input 元素 HTML 程式碼: <form> <label>Name:</label> <input name= "name" /> <fieldset> <label>Newsletter:</label> <input name= "newsletter" /> </fieldset> </form> <input name= "none" /> jQuery 代碼: $( "form ~ input" ) 結果: [ <input name= "none" /> ] |
jQuery選取器總結