层级选择器

 

1. ancestor descendant:在给定的祖先元素下匹配所有的子孙元素。

示例：找到表单中的所有input元素。

HTML代码： <form><label>aaa</label><input type="button" /><input type="radio" /></form>

jQuery代码：$("form input");

2. 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");

注意：上例得到的结果是所有在<form></form>里边的<input name="name" />；而不包含<input name="newsletter" />以及<form>外边的 <input name="none" />。

3. prev+next: 匹配所有紧跟在prev元素后的next元素。

示例：查找所有紧跟在<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" />，而不包含<input name="none" />。

4. prev~siblings:匹配与prev同辈的siblings元素 。

 示例：查找所有与表单<form>同辈的<input>元素。

HTML代码：<form>

 

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://yardan.blogbus.com/logs/30829148.html

  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery代码：$("form～input");

结果： <input name="none" />