一、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>元素