jquery二

ancestor descendant

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

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
在给定的父级元素下匹配所有的子元素。

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元素。

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元素。

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" />