jQuery遍历

来源：互联网发布：linux 终端快捷键编辑：程序博客网时间：2024/06/06 07:34

一、jQuery遍历的简介

jQuery遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”(或选取)HTML元素。以某个选择开始，并沿着这个选择移动，移动，直到抵达期望的元素为止。

通过jQuery遍历，能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对DOM进行遍历。

<div>元素是<ul>的父元素，同时是其中所有内容的祖先。
<ul>元素是<li>元素的父元素，同时是<div>的子元素。
左边的<li>元素是<span>的父元素，<ul>的子元素，同时是<div>的后代。
<span>元素是同胞（拥有相同的父元素）。
两个<li>元素是同胞（拥有相同的父元素）。
右边的<li>元素是<b>的父元素，<ul>的子元素，同时是<div>的后代。
<b>元素是右边的<li>的子元素，同时是<ul>和<div>的后代。

提示：祖先是父、祖父、曾祖父等等。后代是子、孙等等。同胞拥有相同的父。

二、jQuery遍历 —祖先

祖先是父、祖先或曾祖父等等。通过jQuery，能够向上遍历DOM树，以查找元素的祖先。

向上遍历DOM树的方法：

parent()
parents()
parentsUntil()

1.jQuery parent()方法

parent()方法返回被选元素的直接父元素。

该方法只会向上一级对DOM树进行遍历。

2.jQuery parents()方法

parents()方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素(<html>)。

注意：也可以使用可选参数来过滤对祖先元素的搜索，比如

$("span").parents("ul");

返回所有<span>元素的所有祖先，并且它是<li>元素

3.jQuery parentsUntil()方法

parentsUntil()方法返回介于两个给定元素之间的所有祖先元素

比如： $("span").parentsUntil("div");

就是返回介于<span> 和 <div>之间的所有祖先元素

遍历的参考手册：http://www.w3school.com.cn/jquery/jquery_ref_traversing.asp

jQuery遍历函数包括了用于筛选、查找和串联元素的方法。

.add()将元素添加到匹配元素的集合中。

定义和用法

add()方法将元素添加到匹配元素的集合中。

语法1

.add(selector)

selector —字符串值，表示查找供添加到匹配元素集合的元素的选择器表达式

语法2

.add(elements)

elements —添加到匹配元素集合的一个或多个元素

语法3

.add(html)

html — 添加到匹配元素集合的HTML片段

语法4

.add(jQueryObject)

jQueryObject — 添加到匹配元素集合的已有jQuery对象

语法5

.add(selector,context)

selector — 字符串，表示查找供添加到匹配元素集合的元素的选择器表达式

context — 选择器开始进行匹配的位置。

.andSelf()把堆栈中之前的元素集添加到当前集合中。

.children()获得匹配元素集合中每个元素的所有子元素。

.closest()从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。

.contents()获得匹配元素集合中每个元素的子元素，包括文本和注释节点。

.each()对 jQuery对象进行迭代，为每个匹配元素执行函数。

.end()结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态。

.eq()将匹配元素集合缩减为位于指定索引的新元素。

.filter()将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。

.find()获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。

.first()将匹配元素集合缩减为集合中的第一个元素。

.has()将匹配元素集合缩减为包含特定元素的后代的集合。

.is()根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。

.last()将匹配元素集合缩减为集合中的最后一个元素。

.map()把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery对象。

.next()获得匹配元素集合中每个元素紧邻的同辈元素。

.nextAll()获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。

.nextUntil()获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。

.not()从匹配元素集合中删除元素。

.offsetParent()获得用于定位的第一个父元素。

.parent()获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。

.parents()获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。

.parentsUntil()获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止。

.prev()获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。

.prevAll()获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。

.prevUntil()获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。

.siblings()获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。

.slice()将匹配元素集合缩减为指定范围的子集。

三、jQuery遍历 —后代

通过jQuery，我们能够向下遍历DOM树。以查找元素的后代。

有两种向下遍历DOM树的jQuery方法：

children()
find()

1.jQuery children()方法

返回被选元素的所有直接子元素

$(document).ready(function(){

$("div").children();

});

找到每个<div>元素的所有直接子元素

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

返回类名为”1”的所有<p>元素，并且它们是<div>的直接子元素

2.jQuery find()方法

返回被选元素的后代元素，一路向下知道最后一个后代

$("div").find("span");返回属于 <div> 后代的所有 <span>元素

$("div").find("*");返回 <div> 的所有后代：

四、jQuery遍历 —同胞

通过jQuery可以在DOM树中遍历元素的同胞元素，即DOM树中水平遍历，常见的方法有：

siblings()
next()
nextUntil()
prev()
prevAll()
prevUntil()

jQuery siblings()方法

sibling()方法返回被选元素的所有同胞元素。

$("h2").siblings();返回<h2>的所有同胞元素

注意：我们可以使用可选参数来过滤对同胞元素的搜索

$("h2").siblings("p");返回属于<h2>的同胞元素的所有<p>元素

2.jQuery next()方法

返回被选元素的下一个同胞元素。该方法只返回一个元素。

3.nextAll()方法

返回被选元素的所有跟随的同胞元素。

4.nextUntil()方法

返回介于两个给定参数之间的所有跟随的同胞元素

五、jQuery遍历 —过滤

缩小搜索元素的范围，三个基本的过滤方法是：first(),last()和eq(),他们允许我们基于其在一组元素中的位置来选择一个特定的元素。其他过滤方法，比如filter()和not()允许选取匹配或不匹配某项指定标准的元素。

first()方法

返回被选元素的首个元素

2.last()方法

返回被选元素的最后一个元素

3.eq()方法

返回被选元素中带有指定索引号的元素，索引号从0开始。

$("p").eq(1); 选取第二个<p>元素（索引号是1）

4.filter()方法

我们规定一个标准，不匹配的元素会被从集合中删除，返回匹配的元素。

$("p").filter(".intro");返回带有类名”intro”的所有<p>元素

5.not()方法

返回不匹配标准的所有元素，有filter()相反

$("p").not(".intro");返回不带类名”intro”的所有<p>元素

0 0