JQuery入门（四）JQuery遍历元素

最新推荐文章于 2024-08-12 06:06:08 发布

程序猴jwang

最新推荐文章于 2024-08-12 06:06:08 发布

阅读量8k

点赞数 4

分类专栏： JQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_21046965/article/details/84435909

版权

JQuery 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

前言

通过前面的了解，我们知道了基本的JQuery选择器，本章学习JQuery的元素遍历

方法

1.概念

我们了解了JQuery的选择器的相关知识，也清楚了层级选择器的概念，那么如果说我们要找很深层的元素对象怎么办呢？那么使用层级选择器当然可以，但是我们为了更加友好的表达，通常使用相关的方法进行获取。

本章讲解的实例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JQuery</title>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">

		</script>
	</head>
	<body>
		<div>
			<form action="#" method="post" id="ff">
				<h5>注册信息</h5>
				用户名：<input type="text" name="username" id="username" value="张三"/><span id="usernameSpan"></span><br/>
				性&nbsp;&nbsp;&nbsp;&nbsp;别：<input type="radio" name="sex" value="男" checked="checked"/>男<input type="radio" name="sex" value="女"/>女<span></span><br/>
				爱&nbsp;&nbsp;&nbsp;&nbsp;好:<input type="checkbox" name="hobby" value="足球" />足球<input type="checkbox" name="hobby" value="游泳"/>游泳
				<input type="checkbox" name="hobby" value="棋牌" />棋牌<span></span><br/>
				毕业院校：<select name="school" id="school" class="sd">
							<option value="--请选择--">--请选择--</option>
							<option value="清华大学">清华大学</option>
							<option value="北京大学">北京大学</option>
							<option value="挖掘机技术学院">挖掘机技术学院</option>
						</select><span></span><br/>
				个人简介：<textarea rows="3" cols="20" name="introduce" id="introduce"></textarea><span></span><br/>
				<input type="button" value="提交" onclick="sub();"/>&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" name="" id="" value="重置" />
			</form>
		</div>
	</body>
</html>

2.JQuery元素遍历

1）查找父元素

语法1：子元素对象.parent():该方法返回子元素的直接父元素的对象

语法2：子元素对象.parents()：该方法返回子元素的所有父元素

语法3：子元素对象.parents(元素)：该方法返回指定的父元素对象

实例：获取h5标签的父元素div

$(function(){
	console.log($("h5").parents("div"));
});

2）查找子元素

语法1：父元素对象.children() :该方法返回父元素对象的所有直接子元素

语法2：父元素对象.children(元素) :该方法返回父元素对象的指定直接子元素

语法3：父元素对象.find(元素)：该方法返回父元素的指定子元素对象

实例：获取id为ff的元素下的id为school的元素对象

$(function(){
	console.log($("#ff").find("#school"));
});

3）查找兄弟元素

语法1：元素对象.next()：该方法返回元素对象紧挨着的下一个元素对象

语法2：元素对象.prev()：该方法返回元素对象紧挨着的上一个元素对象

实例：获取h5标签的下一个元素对象

$(function(){
	console.log($("h5").next());
});

4）过滤指定元素

语法：元素对象集合.eq(index)：该方法返回元素集合中的指定下标的元素对象，index从0开始，类似于Java数组下标

实例：遍历id为ff的元素下所有input子标签

$(function(){
	var ch = $("#ff").find("input");
	console.log(ch.length);
	for (var i=0; i <ch.length; i++) {
		console.log(ch.eq(i));
	}
});

以上就是常用的JQuery遍历的方法，可以适当的替代复杂的选择器！

下面是其他方法以供参考

附录：JQuery遍历方法大全

方法	描述
add()	把元素添加到匹配元素的集合中
addBack()	把之前的元素集添加到当前集合中
andSelf()	在版本 1.8 中被废弃。addBack() 的别名
children()	返回被选元素的所有直接子元素
closest()	返回被选元素的第一个祖先元素
contents()	返回被选元素的所有直接子元素（包含文本和注释节点）
each()	为每个匹配元素执行函数
end()	结束当前链中最近的一次筛选操作，并把匹配元素集合返回到前一次的状态
eq()	返回带有被选元素的指定索引号的元素
filter()	把匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素
find()	返回被选元素的后代元素
first()	返回被选元素的第一个元素
has()	返回拥有一个或多个元素在其内的所有元素
is()	根据选择器/元素/jQuery 对象检查匹配元素集合，如果存在至少一个匹配元素，则返回 true
last()	返回被选元素的最后一个元素
map()	把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象
next()	返回被选元素的后一个同级元素
nextAll()	返回被选元素之后的所有同级元素
nextUntil()	返回介于两个给定参数之间的每个元素之后的所有同级元素
not()	从匹配元素集合中移除元素
offsetParent()	返回第一个定位的父元素
parent()	返回被选元素的直接父元素
parents()	返回被选元素的所有祖先元素
parentsUntil()	返回介于两个给定参数之间的所有祖先元素
prev()	返回被选元素的前一个同级元素
prevAll()	返回被选元素之前的所有同级元素
prevUntil()	返回介于两个给定参数之间的每个元素之前的所有同级元素
siblings()	返回被选元素的所有同级元素
slice()	把匹配元素集合缩减为指定范围的子集