jQuery遍历学习笔记

jQuery遍历

jQuery后代遍历

jQuery children（）
该方法只能查找指定元素的第一层子元素，语法结构.children（［selector］）
selector参数为可选内容，用于进一步筛选需要匹配的子元素。如果不填写任何参数，则表示查找所有的子元素。
例如$（“p”）.children（）
表示查找页面上所有段落元素<\p>的子元素。
1
$（“p”）.children（“.style”）
表示查找页面上所有段落元素<\p>中class=“style”的子元素。
jQuery find（）
该方法可用于查找指定元素的所有后代元素，语法结构为.find（selector）
可以进一步筛选需要匹配的元素，例如$（“p”）.find（“span”）
表示在段落元素<\p>中找到所有的<\span>元素。
selector参数位置也可以填入元素对象，例如上述代码可以改写为以下
1
2
var spans=$（“span”）；
$（“p”）.find（spans）；

jQuery同胞遍历

同胞遍历指的是以指定元素为出发点，遍历与该元素具有相同，父元素的同胞元素，直到全部查找完毕。

jQuery siblings（）
该方法可以查找指定元素的所有同胞元素，语法结构为.siblings（［selector］）
可以通过改变参数的值进一步筛选，需要匹配的同胞元素，如果不填写任何参数则表示查找所有的同胞元素，比如$（“p”）.siblings（）
表示查找段落元素<\p>的所有同胞元素。

1	$（“p”）.siblings（“.style”）

该代码表示查找所有与段落元素<\p>具有相同的父元素并且class=“style”的元素

jQuery next（）、nextAll（）和nextUntil（）

next（）该方法可以查找指定元素的下一个同胞元素，语法结构为.next（［selector ］）可以通过改变参数的词进一步筛选需要匹配的同胞元素，如果不填写任何参数则表示查找指定元素的下一个同胞元素。例如$（“p”）.next（）该代码表示，查找段落元素的下一个同胞元素。如果加上参数可以进一步匹配同胞元素，例如$（“p”）.next（“.style”）表示查找段落元素的下一个同胞元素，并且该元素必须带有class=style属性的元素。
nextAll（）
该方法可以查找指定元素后面的所有同胞元素，语法结构.nextAll（［selector ］）参数的意义和选取同上。
nextUntil（）
该方法可以查找从指定元素开始往后水平遍历，直到指定元素结束的所有同胞元素，不包括作为结束标识的元素本身，语法结构为.nextUntil（［selector ］［filter］）selector 参数意义和选取同上。filter参数表示进一步筛选指定范围内的同胞元素。

jQuery prev（）、prevAll（）、prevUntil（）

prev（）该方法可以查找指定元素的前一个同胞元素，语法结构为.prev（［selector ］）参数选取和意义和next（）同
prevAll（）
该方法可以查找指定元素前面的所有同胞元素，语法结构为.prevAll（［selector ］）参数选取和意义和nextAll（）同。
该方法可以查找从指定元素开始往前水平遍历直到指定元素结束的所有同胞元素，不包括作为结束标识的元素本身，语法结构为.prevUntil（［selector ］［filter］）参数选取和意义同nextUntill（）。

jQuery祖先遍历

祖先遍历指的是以指定元素为出发点遍历该元素的父、祖父、曾祖父元素等，直到全部查找完毕。

jQuery parent（）
该方法可以查找指定元素的直接父元素，语法结构.parent（［selector ］）参数选取和意义同上。

jQuery parents（）
该方法可以查找指定元素的所有祖先元素，语法结构为.parents（［selector ］）参数选取和意义同上。

jQuery parentsUntil（）
该方法可以查找指定元素的所有祖先元素，语法结构为.parentsUntil（［selector ］［filter］）参数选取和意义同上。

遍历方法

jQuery提供了一个each方法，使用它可以遍历数组、对象并进行处理，而不需要使用繁琐的循环语句

遍历HTML元素对象

1
2
3

$(selector).each(function([index]){
	//处理代码，this关键字指向当前的对象，index代表当前序号，可选参数
	})

举例如下：

$(function(){
	$("img").each(function(index){
	alert(this.src);
	if(index!=1){
	this.src="../img/163.png";
					}
				});
			});

在each方法的回调函数中，可以使用this关键字访问到当前遍历的相应HTML元素对象，它的index参数是可选的，表示当前遍历的元素的序号。

遍历数组对象

语法格式为

1
2
3

$.each(array,function([index]){
	//处理代码，this关键字指向当前的对象，index代表当前序号，可选参数
	})；

举例如下

var myArray=["abc","def","ghi"];
			$.each(myArray, function(index) {
				alert("第"+index+"项的值为："+this);
			});

会依次输出数组中的每一项字符串

遍历JSON对象

语法格式为

1
2
3

$.each(object,function(key){
	//处理代码，key代表属性
	})；

举例如下

var data={"name":"黄波","age":40,"course":"HTML5应用开发"};
			$.each(data, function(key) {
				alert(key+"="+data[key]);
			});

会一次输出对象中的对象和属性。