該文章轉(zhuǎn)載自：http://www.cnblogs.com/onlys/articles/jQuery.html

?

　　jQuery的選擇器那絕對最強大的，各種你想不到，原先想總結(jié)一下，沒想到搜索到這個比我總結(jié)更詳細，感謝這位作者，我已用最大的字號標注出來了。?

?

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186

jQuery 的選擇器可謂之強大無比，這里簡單地總結(jié)一下常用的元素查找方法 $("#myELement")??? 選擇id值等于myElement的元素，id值不能重復(fù)在文檔中只能有一個id值是myElement所以得到的是唯一的元素 $("div")?????????? 選擇所有的div標簽元素，返回div元素數(shù)組 $(".myClass")????? 選擇使用myClass類的css的所有元素 $("*")???????????? 選擇文檔中的所有的元素，可以運用多種的選擇方式進行聯(lián)合選擇：例如$("#myELement,div,.myclass") 層疊選擇器： $("form input")???????? 選擇所有的form元素中的input元素 $("#main > *")????????? 選擇id值為main的所有的子元素 $("label + input")???? 選擇所有的label元素的下一個input元素節(jié)點，經(jīng)測試選擇器返回的是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... ...個元素（注意：因為所選擇的多個元素時為數(shù)組，所以序號是從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") 內(nèi)容過濾選擇器： $("div:contains('John')") 選擇所有div中含有John文本的元素 $("td:empty")?????????? 選擇所有的為空（也不包括文本節(jié)點）的td元素的數(shù)組 $("div:has(p)")??????? 選擇所有含有p標簽的div元素 $("td:parent")????????? 選擇所有的以td為父節(jié)點的元素數(shù)組 可視化過濾選擇器： $("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'結(jié)尾的input元素 $("input[name*='man']")????????? 選擇所有的name屬性包含'news'的input元素 $("input[id][name$='man']")??? 可以使用多個屬性進行聯(lián)合選擇，該選擇器是得到所有的含有id屬性并且那么屬性以man結(jié)尾的元素 子元素過濾選擇器： $("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)") $("div span:first-child")????????? 返回所有的div元素的第一個子節(jié)點的數(shù)組 $("div span:last-child")?????????? 返回所有的div元素的最后一個節(jié)點的數(shù)組 $("div button:only-child")?????? 返回所有的div中只有唯一一個子節(jié)點的所有子節(jié)點的數(shù)組 表單元素選擇器： $(":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”結(jié)尾的 $(”input[@ name ^='S_']“).not(”[@ name $='_R']“) 一個名為 radio_01的radio所選的值 $(”input[@ name =radio_01][@checked]“).val(); ?? ?? $("A B") 查找A元素下面的所有子節(jié)點，包括非直接子節(jié)點 $("A>B") 查找A元素下面的直接子節(jié)點 $("A+B") 查找A元素后面的兄弟節(jié)點，包括非直接子節(jié)點 $("A~B") 查找A元素后面的兄弟節(jié)點，不包括非直接子節(jié)點 1. $("A B") 查找A元素下面的所有子節(jié)點，包括非直接子節(jié)點 例子：找到表單中所有的 input 元素 HTML 代碼: <form> <label>Name:</label> <input name="name" /> <fieldset> ??????<label>Newsletter:</label> ??????<input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代碼: $("form input") 結(jié)果: [ <input name="name" />, <input name="newsletter" /> ] 2. $("A>B") 查找A元素下面的直接子節(jié)點 例子：匹配表單中所有的子級input元素。 HTML 代碼: <form> <label>Name:</label> <input name="name" /> <fieldset> ??????<label>Newsletter:</label> ??????<input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代碼: $("form > input") 結(jié)果: [ <input name="name" /> ] 3. $("A+B") 查找A元素后面的兄弟節(jié)點，包括非直接子節(jié)點 例子：匹配所有跟在 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") 結(jié)果: [ <input name="name" />, <input name="newsletter" /> ] 4. $("A~B") 查找A元素后面的兄弟節(jié)點，不包括非直接子節(jié)點 例子：找到所有與表單同輩的 input 元素 HTML 代碼: <form> <label>Name:</label> <input name="name" /> <fieldset> ??????<label>Newsletter:</label> ??????<input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代碼: $("form ~ input") 結(jié)果: [ <input name="none" /> ]

轉(zhuǎn)載于:https://www.cnblogs.com/itjeff/p/5435155.html

總結(jié)

以上是生活随笔為你收集整理的[转]jQuery选择器总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。