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