选择器（

ancestor descendant

概述

在给定的祖先元素下匹配所有的后代元素

参数

ancestorSelectorV1.0

任何有效选择器

descendantSelectorV1.0

用以匹配元素的选择器，并且它是第一个选择器的后代元素

示例

描述:

找到表单中所有的 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" /> ]

parent > child

概述

在给定的父元素下匹配所有的子元素

参数

parent

任何有效选择器

child

用以匹配元素的选择器，并且它是第一个选择器的子元素

示例

描述:

匹配表单中所有的子级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" /> ]

prev + next

概述

匹配所有紧接在 prev 元素后的 next 元素

参数

prev

任何有效选择器

nextSelectorV1.0

一个有效选择器并且紧接着第一个选择器

示例

描述:

匹配所有跟在 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" /> ]

prev ~ siblings

概述

匹配 prev 元素之后的所有 siblings 元素

参数

prev

任何有效选择器

siblings

一个选择器，并且它作为第一个选择器的同辈

示例

描述:

找到所有与表单同辈的 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" /> ]