筛选 查找

children([expr])

概述

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

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

参数

expr

用以过滤子元素的表达式

示例

描述:

查找DIV中的每个子元素。

HTML 代码:

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

jQuery 代码:

$("div").children()

结果:

[ <span>Hello Again</span> ]

描述:

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

HTML 代码:

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

jQuery 代码:

$("div").children(".selected")

结果:

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

closest(expr,[con]|obj|ele)

概述

jQuery 1.3新增。从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。。

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

closest和parents的主要区别是：1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。

closest对于处理事件委托非常有用。

参数

expr

用以过滤元素的表达式。jQuery 1.4开始，也可以传递一个字符串数组，用于查找多个元素。

expr,[context]

expr：用以过滤子元素的表达式

context：DOM元素在其中一个匹配的元素可以被发现。如果没有上下文在当时的情况下通过了jQuery设置将被使用。

jQuery object 

一个用于匹配元素的jQuery对象

element

一个用于匹配元素的DOM元素。

示例

描述:

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

HTML 代码:

<ul><li></li><li></li></ul>

jQuery 代码:

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

结果:

[ul, body]

描述:

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

HTML 代码:

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

jQuery 代码:

$(document).bind("click", function (e) {    $(e.target).c    

find(expr|obj|ele)

概述

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

参数

expr

用于查找的表达式

jQuery object 

一个用于匹配元素的jQuery对象

element

一个DOM元素

示例

描述:

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

HTML 代码:

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

jQuery 代码:

$("p").find("span")

结果:

[ <span>Hello</span> ]

next([expr])

概述

取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

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

参数

expr

用于筛选的表达式

示例

描述:

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

HTML 代码:

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

jQuery 代码:

$("p").next()

结果:

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

描述:

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

HTML 代码:

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

jQuery 代码:

$("p").next(".selected")

结果:

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

nextAll([expr])

概述

查找当前元素之后所有的同辈元素。

可以用表达式过滤

参数

expr

用来过滤的表达式

示例

描述:

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

HTML 代码:

<div></div><div></div><div></div><div></div>

jQuery 代码:

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

结果:

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

nextUntil([exp|ele][,fil])

概述

查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。

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

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

参数

[expr][,filter]String,StringV1.4

expr: 用于筛选祖先元素的表达式。

filter: 一个字符串，其中包含一个选择表达式匹配元素。

[element][,filter]DOMElement,StringV1.6

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

结果:

term 1
definition 1-a
definition 1-b
definition 1-c
definition 1-d
term 2
definition 2-a
definition 2-b
definition 2-c
term 3
definition 3-a
definition 3-b

定义和用法

<dl> 标签定义了定义列表（definition list）。

<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。

offsetParent()

V1.2.6概述

返回第一个匹配元素用于定位的父节点。

这返回父元素中第一个其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 代码:

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

parent([expr])

概述

取得一个包含着所有匹配元素的唯一父元素的元素集合。

你可以使用可选的表达式来筛选。

参数

expr

用来筛选的表达式

示例

描述:

查找每个段落的父元素

HTML 代码:

<div><p>Hello</p><p>Hello</p></div>

jQuery 代码:

$("p").parent()

结果:

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

描述:

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

HTML 代码:

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

jQuery 代码:

$("p").parent(".selected")

结果:

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

parents([expr])

概述

取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。

参数

expr

用于筛选祖先元素的表达式

示例

描述:

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

HTML 代码:

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

jQuery 代码:

$("span").parents()

描述:

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

jQuery 代码:

$("span").parents("p")

parentsUntil([exp|ele][,fil])

概述

查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

如果提供的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 代码:

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

c([expr])

概述

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

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

参数

expr

用于筛选前一个同辈元素的表达式

示例

描述:

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

HTML 代码:

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

jQuery 代码:

$("p").prev()

结果:

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

描述:

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

HTML 代码:

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

jQuery 代码:

$("p").prev(".selected")

结果:

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

prevAll([expr])

概述

查找当前元素之前所有的同辈元素

可以用表达式过滤。

参数

expr

用于过滤的表达式

示例

描述:

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

HTML 代码:

<div></div><div></div><div></div><div></div>

jQuery 代码:

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

结果:

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

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 代码:

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

siblings([expr])

概述

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

参数

expr

用于筛选同辈元素的表达式

示例

描述:

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

HTML 代码:

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

jQuery 代码:

$("div").siblings()

结果:

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

描述:

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

HTML 代码:

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

jQuery 代码:

$("div").siblings(".selected")

结果:

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