前端开发利器jQuery-筛选器之查找

共计 7100 个字符，预计需要花费 18 分钟才能阅读完成。

jQuery筛选器之查找

筛选器	描述
`$("SET").children([expr]);`	取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
`$("SET").find(expr/obj/ele);`	搜索所有与指定表达式匹配的元素
`$("SET").closest(expr/object/element);`	从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素
`$("SET").next([expr]);`	取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
`$("SET").nextAll([expr]);`	查找当前元素之后所有的同辈元素
`$("SET").nextUntil([exp/ele][,fil]);`	查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止
`$("SET").offsetParent();`	返回第一个匹配元素用于定位的父节点
`$("SET").parent([expr]);`	取得一个包含着所有匹配元素的唯一父元素的元素集合
`$("SET").parents([expr]);`	取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。
`$("SET").parentsUntil([expr/element][,filter]);`	查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止
`$("SET").prev([expr]);`	取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
`$("SET").prevAll([expr]);`	查找当前元素之前所有的同辈元素
`$("SET").prevUntil([exp/ele][,fil]);`	查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止
`$("SET").siblings([expr]);`	取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

jQuery筛选器之查找示例

$("SET").children([expr]);

可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。

参数	描述
`expr`	用以过滤子元素的表达式

查找DIV中的每个子元素。

HTML代码:

`1`	`<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>`

jQuery代码:

`1`	`$("div").children();`

结果:

`1`	`[ <span>Hello Again</span> ]`

在每个div中查找 .selected 的类。

HTML代码:

`1`	`<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>`

jQuery代码:

`1`	`$("div").children(".selected");`

结果:

`1`	`[ <p class="selected">Hello Again</p> ]`

$("SET").find(expr/obj/ele);

这个函数是找出正在处理的元素的后代元素的好方法,所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

参数	描述
`expr`	用于查找的表达式
`jQuery object`	一个用于匹配元素的jQuery对象
`element`	一个DOM元素

从所有的段落开始，进一步搜索下面的span元素。与$("p span");相同。

HTML代码:

`1`	`<p><span>Hello</span>, how are you?</p>`

jQuery代码:

`1`	`$("p").find("span");`

结果:

`1`	`[ <span>Hello</span> ]`

$("SET").closest(expr/object/element);

closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。closest对于处理事件委托非常有用。

参数	描述
`expr`	用以过滤元素的表达式。
`jQuery object`	一个用于匹配元素的jQuery对象
`element`	一个用于匹配元素的DOM元素

展示如何使用clostest查找多个元素

HTML代码:

`1`	`<ul><li></li><li></li></ul>`

jQuery代码:

`1`	`$("li:first").closest(["ul", "body"]);`

结果:

`1`	`[ul, body]`

展示如何使用clostest来完成事件委托。

HTML代码:

<ul>
    <li><b>Click me!</b></li>
    <li>You can also <b>Click me!</b></li>
</ul>

jQuery代码:

1
2
3

$(document).bind("click", function (e) {
    $(e.target).closest("li").toggleClass("hilight");
});

$("SET").next([expr]);

这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。

参数	描述
`expr`	用于筛选的表达式

找到每个段落的后面紧邻的同辈元素

HTML代码:

`1`	`<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>`

jQuery代码:

`1`	`$("p").next();`

结果:

`1`	`[ <p>Hello Again</p>, <div><span>And Again</span></div> ]`

找到每个段落的后面紧邻的同辈元素中类名为selected的元素。

HTML代码:

`1`	`<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>`

jQuery代码:

`1`	`$("p").next(".selected");`

结果:

`1`	`[ <p class="selected">Hello Again</p> ]`

$("SET").nextAll([expr]);

属性	描述
`expr`	用来过滤的表达式

给第一个div之后的所有元素加个类

HTML代码:

`1`	`<div></div><div></div><div></div><div></div>`

jQuery代码:

`1`	`$("div:first").nextAll().addClass("after");`

结果:

`1`	`[ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ]`

$("SET").nextUntil([exp|ele][,fil]);

如果提供的jQuery代表了一组DOM元素，.nextUntil()方法也能让我们找遍所有元素所在的DOM树，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了下面所有找到的同辈元素，但不包括那个选择器匹配到的元素。

如果没有选择器匹配到，或者没有提供参数，那么跟在后面的所有同辈元素都会被选中。这就跟用没有提供参数的.nextAll()效果一样。

[expr][,filter]

expr: 用于筛选祖先元素的表达式
filter: 一个字符串，其中包含一个选择表达式匹配元素|

[element][,filter]

element: 用于筛选祖先元素的DOM元素。
filter: 一个字符串，其中包含一个选择表达式匹配元素。

给#term-2后面直到dt前的元素加上红色背景

HTML代码:

<dl>
  <dt>term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</dd>

  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>

  <dt>term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>

jQuery代码:

$('#term-2').nextUntil('dt').css('background-color', 'red');

var term3 = document.getElementById("term-3");
$("#term-1").nextUntil(term3, "dd").css("color", "green");

$("SET").offsetParent();

这返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。

设置最近的祖先定位元素的背景颜色

HTML代码:

<div style="width:70%;position:absolute;left:100px;top:100px">
  <div style="margin:50px;background-color:yellow">
     <p>点击下面的按钮可以设置本段落的最近的父（祖先）元素的背景色。</p>
   <div>
</div>
<button>点击这里</button>

jQuery代码:

1
2
3

$("button").click(function(){
    $("p").offsetParent().css("background-color","red");
});

$("SET").parent([expr]);

参数	描述
`expr`	用来筛选的表达式

查找每个段落的父元素

HTML代码:

`1`	`<div><p>Hello</p><p>Hello</p></div>`

jQuery代码:

`1`	`$("p").parent();`

结果:

`1`	`[ <div><p>Hello</p><p>Hello</p></div>]`

查找段落的父元素中每个类名为selected的父元素。

HTML代码:

`1`	`<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>`

jQuery代码:

`1`	`$("p").parent(".selected");`

结果:

`1`	`[ <div class="selected"><p>Hello Again</p></div> ]`

$("SET").parents([expr]);

参数	描述
expr	用于筛选祖先元素的表达式

找到每个span元素的所有祖先元素。

HTML代码:

`1`	`<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>`

jQuery代码:

`1`	`$("span").parents();`

找到每个span的所有是p元素的祖先元素。

jQuery代码:

`1`	`$("span").parents("p");`

$("SET").parentsUntil([expr/element][,filter]);

如果提供的jQuery代表了一组DOM元素，.parentsUntil()方法也能让我们找遍所有元素的祖先元素，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个返回的jQuery对象里包含了下面所有找到的父辈元素，但不包括那个选择器匹配到的元素。

[expr][,filter]

expr: 用于筛选祖先元素的表达式
filter: 一个字符串，其中包含一个选择表达式匹配元素。

[element][,filter]

element: 用于筛选祖先元素的DOM元素
filter: 一个字符串，其中包含一个选择表达式匹配元素。

查找item-a的祖先，但不包括level-1

HTML代码:

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

jQuery代码:

`1`	`$('li.item-a').parentsUntil('.level-1').css('background-color', 'red');`

$("SET").prev([expr]);

可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素

属性	描述
`expr`	用于筛选前一个同辈元素的表达式

找到每个段落紧邻的前一个同辈元素。

HTML代码:

`1`	`<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>`

jQuery代码:

`1`	`$("p").prev();`

结果:

`1`	`[ <div><span>Hello Again</span></div> ]`

找到每个段落紧邻的前一个同辈元素中类名为selected的元素。

HTML代码:

`1`	`<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>`

jQuery代码:

`1`	`$("p").prev(".selected");`

结果:

`1`	`[ <p class="selected">Hello Again</p> ]`

$("SET").prevAll([expr]);

属性	描述
`expr`	用于过滤的表达式

给最后一个之前的所有div加上一个类

HTML代码:

`1`	`<div></div><div></div><div></div><div></div>`

jQuery代码:

`1`	`$("div:last").prevAll().addClass("before");`

结果:

`1`	`[ <div class="before"></div>, <div class="before"></div>, <div class="before"></div> ]`

$("SET").prevUntil([exp/ele][,fil]);

如果提供的jQuery代表了一组DOM元素，.prevUntil()方法也能让我们找遍所有元素所在的DOM树，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了前面所有找到的同辈元素，但不包括那个选择器匹配到的元素。

如果没有选择器匹配到，或者没有提供参数，那么排在前面的所有同辈元素都会被选中。这就跟用没有提供参数的.prevAll()效果一样。

[expr][,filter]

expr: 用于筛选祖先元素的表达式
filter: 一个字符串，其中包含一个选择表达式匹配元素。

[element][,filter]

element: 用于筛选祖先元素的DOM元素
filter: 一个字符串，其中包含一个选择表达式匹配元素。

给#term-2前面直到dt前的元素加上红色背景

HTML代码:

<dl>
  <dt>term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</dd>

  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>

  <dt>term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>

jQuery代码:

`1`	`$('#term-2').prevUntil('dt').css('background-color', 'red');`

$("SET").siblings([expr]);

找到每个div的所有同辈元素。

HTML代码:

`1`	`<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>`

jQuery代码:

`1`	`$("div").siblings();`

结果:

`1`	`[ <p>Hello</p>, <p>And Again</p> ]`

找到每个div的所有同辈元素中带有类名为selected的元素。

HTML代码:

`1`	`<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>`

jQuery代码:

`1`	`$("div").siblings(".selected");`

结果:

`1`	`[ <p class="selected">Hello Again</p> ]`