版权声明：程序猴jwang版权所有 https://blog.csdn.net/qq_21046965/article/details/84435909
前言
通过前面的了解，我们知道了基本的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/>
性 别：<input type="radio" name="sex" value="男" checked="checked"/>男<input type="radio" name="sex" value="女"/>女<span></span><br/>
爱 好:<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();"/> <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() | 把匹配元素集合缩减为指定范围的子集 |