jQuery的選擇器可謂之強大無比，這里簡單地總結一下常用的元素查找方法

$("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" /> ]

轉載于:https://www.cnblogs.com/jackhuclan/archive/2008/11/20/1337741.html

總結

以上是生活随笔為你收集整理的浅谈jQuery的选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。