一．什么是遍历？
jQuery 遍历，意为“查找”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。
以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家
族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍
历。
图示解释：
<div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。
<ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素
左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
两个 <li> 元素是同胞（拥有相同的父元素）。
右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
提示：祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。
二．遍历的方法
2-1
向上遍历
DOM
树
parent()
:返回被选元素的
直接父元素
。
parents()
:
返回被选元素的
所有祖先元素
，它一路向上直到文档的根元素
(<html>)
。
parentsUntil()
:
返回
介于两个给定元素之间的所有祖先元素
。
2-2
向下遍历
DOM
树
children()
: 返回被选元素的所有
直接子元素
。
find()
:
返回被选元素的
所有的后代元素
，
一路向下
直到最后一个后代。
2-3
水平遍历
DOM
树
siblings ()
:返回被选元素的所有同胞元素。
next ( ):
返回被选元素的下一个同胞元素。
nextAll
( ):
返回被选元素的所有跟随的同胞元素。
nextUntil
( ):
返回介于两个给定参数之间的所有跟随的同胞元素。
prev
( ) :
返回被选元素的上一个同胞元素
prevAll
( ) :
返回被选元素前面所有的同胞元素。
prevUntil(
):
返回被选元素之前介于两个给定参数之间所有的同胞元素。
2-4
过滤
备注
:
此过滤为对象的方法，不同于选择器
通用语法
:
$(selector).first()
、
$(selector).last()
、
$(selector).eq()
、
$(selector).fiter()
、
$(selector).not()
、
$(selector).is()
first ()
:返回被选元素的首个元素。
last ():
返回被选元素的最后一个元素。
eq( ):
返回被选元素中带有指定索引号的元素。
filter
( ):
规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素被返回。
例如: $("li").filter(":not(:contains('暗香'))").removeClass()
not( ):
返回不匹配标准的所有元素
is( ):
根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。
$("selector").has("sub_selector").length
用来检测某个子元素是否存在 存在为 1 否则为 0
Example:
console.log( $("li").eq(1).has("span").length)
2-5
jQuery
中
each
遍历的三种方法
$().each()
1
、普通遍历
$('div').each(function (){
//code
});
-----------------------------------------------------------------------------------
2
、选择器
+
遍历
向后遍历
向前遍历
$('div').each(function (i){
i
就是索引值
this
表示获取遍历每一个
dom
对象
//this.html(“”)
});
Js
与
jq
语法对比
Dom
结构
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
Js
写法
:
var pObj=document.getElementsByTagName("p");//
数组
for(var i=0; i<pObj.length; i++){
pObj[i].index=i;
pObj[i].οnclick=function(){
alert(this.index)
}
Jq
写法
:
$("p").each(function(i){
$(this).click(function(){
alert(i);
})
})
-----------------------------------------------------------------------------------
3
、选择器
+
遍历
$('div').each(function (index,domEle){
index
就是索引值
domEle
表示获取遍历每一个
dom
对象
});
------------------------------------------------------------------------------------------
4
、更适用的遍历方法[json]
1
）先获取某个集合对象
2
）遍历集合对象的每一个元素
var d=$("div");
$.each(obj,function (index,domEle){
obj
是要遍历的集合
i
ndex
就是索引值
domEle
表示获取遍历每一个
dom
对象
});
三:jQuery 遍历函数参考手册
扫一扫
5098
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
