JQuery⼊门（四）JQuery遍历元素
前⾔
通过前⾯的了解，我们知道了基本的JQuery选择器，本章学习JQuery的元素遍历
⽅法
1.概念
我们了解了JQuery的选择器的相关知识，也清楚了层级选择器的概念，那么如果说我们要很深层的元素对象怎么办呢？那么使⽤层级选
择器当然可以，但是我们为了更加友好的表达，通常使⽤相关的⽅法进⾏获取。
本章讲解的实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JQuery</title>
jquery在一个元素后追加标签
<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></s 爱    ；好:<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遍历⽅法⼤全
⽅法描述
把元素添加到匹配元素的集合中
addBack()把之前的元素集添加到当前集合中
andSelf()在版本 1.8 中被废弃。addBack() 的别名
返回被选元素的所有直接⼦元素
返回被选元素的第⼀个祖先元素
返回被选元素的所有直接⼦元素（包含⽂本和注释节点）
为每个匹配元素执⾏函数
end()结束当前链中最近的⼀次筛选操作，并把匹配元素集合返回到前⼀次的状态
返回带有被选元素的指定索引号的元素
把匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素
返回被选元素的后代元素
返回被选元素的第⼀个元素
返回拥有⼀个或多个元素在其内的所有元素
根据选择器/元素/jQuery 对象检查匹配元素集合，如果存在⾄少⼀个匹配元素，则返回 true
返回被选元素的最后⼀个元素
map()把当前匹配集合中的每个元素传递给函数，产⽣包含返回值的新 jQuery 对象
返回被选元素的后⼀个同级元素
返回被选元素之后的所有同级元素
返回介于两个给定参数之间的每个元素之后的所有同级元素
从匹配元素集合中移除元素
返回第⼀个定位的⽗元素
返回被选元素的直接⽗元素
返回被选元素的所有祖先元素
返回介于两个给定参数之间的所有祖先元素
返回被选元素的前⼀个同级元素
返回被选元素之前的所有同级元素
返回介于两个给定参数之间的每个元素之前的所有同级元素
返回被选元素的所有同级元素
把匹配元素集合缩减为指定范围的⼦集

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。