jQuery 筛选查找

最新推荐文章于 2022-12-10 22:38:21 发布

vvvac1314

最新推荐文章于 2022-12-10 22:38:21 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： java

本文链接：https://blog.youkuaiyun.com/vvvac1314/article/details/12960469

java 专栏收录该内容

10 篇文章

订阅专栏

children([expr])

概述

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

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

参数

expr (可选)String

用以过滤子元素的表达式

示例

描述:

查找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, [context])

概述

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

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

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

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

参数

exprString, Array

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

context (可选)Element, jQuery

作为待查找的 DOM 元素集、文档或 jQuery 对象。

示例

描述:

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

HTML 代码:

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).closest("li").toggleClass("hilight");

});

find(expr)

概述

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

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

参数

exprString

用于查找的表达式

示例

描述:

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

HTML 代码:

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

jQuery 代码:

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

结果:

[ <span>Hello</span> ]

offsetParent()

概述

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

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

parent([expr])

概述

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

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

参数

expr (可选)String

(可选)用来筛选的表达式

示例

描述:

查找每个段落的父元素

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 (可选)String

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

示例

描述:

找到每个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([expr])

概述

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

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

参数

expr (可选)String

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

示例

描述:

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

HTML 代码:

<li class="item-ii">II

<li class="item-b">B

</ul>

</li>

</ul>

</li>

</ul>

jQuery 代码:

$('li.item-a').parentsUntil('.level-1')

.css('background-color', 'red');

next([expr])

概述

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

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

参数

expr (可选)String

用于筛选的表达式

示例

描述:

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

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 (可选)String

(可选)用来过滤的表达式

示例

描述:

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

HTML 代码:

jQuery 代码:

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

结果:

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

nextUntil([expr])

概述

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

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

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

参数

expr (可选)String

(可选)用来过滤的表达式

示例

描述:

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

HTML 代码:

<dl>

<dd>definition 1-a</dd>

<dd>definition 1-b</dd>

<dd>definition 1-c</dd>

<dd>definition 1-d</dd>

<dd>definition 2-a</dd>

<dd>definition 2-b</dd>

<dd>definition 2-c</dd>

<dd>definition 3-a</dd>

<dd>definition 3-b</dd>

</dl>

jQuery 代码:

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

prev([expr])

概述

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

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

参数

expr (可选)String

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

示例

描述:

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

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 (可选)String

用于过滤的表达式

示例

描述:

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

HTML 代码:

jQuery 代码:

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

结果:

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

prevUntil([expr])

概述

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

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

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

参数

expr (可选)String

(可选)用来过滤的表达式

示例

描述:

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

HTML 代码:

<dl>

<dd>definition 1-a</dd>

<dd>definition 1-b</dd>

<dd>definition 1-c</dd>

<dd>definition 1-d</dd>

<dd>definition 2-a</dd>

<dd>definition 2-b</dd>

<dd>definition 2-c</dd>

<dd>definition 3-a</dd>

<dd>definition 3-b</dd>

</dl>

jQuery 代码:

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

siblings([expr])

概述

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

参数

expr (可选)String

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

示例

描述:

找到每个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> ]