jQuery的DOM操作之遍历节点
2017-08-17 18:41
681 查看
1. children()方法：
该方法用于取得匹配元素的子元素集合。
[html] view
plain copy
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $body=$("body").children();
var $p=$("p").children();
var $ul=$("ul").children();
alert($body.length);
alert($p.length);
alert($ul.length);
for(var i=0,len=$ul.length;i<len;i++){
alert($ul[i].innerHTML);
}
});
</script>
</head>
<body>
<p></p>
<ul>
<li>java</li>
<li>python</li>
<li>c++</li>
</ul>
</body>
</html>
2. next()方法：
该方法用于取得匹配元素后面紧邻的同辈元素。
[html] view
plain copy
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $p_next=$("p").next();
alert($p_next.html());
});
</script>
</head>
<body>
<p></p>
<ul>
<li>java</li>
<li>python</li>
<li>c++</li>
</ul>
</body>
</html>
3. prev()方法：
该方法用于取得匹配元素前面紧邻的同辈元素。
[html] view
plain copy
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $ul_prev=$("ul").prev();
alert($ul_prev.text());
});
</script>
</head>
<body>
<p>我是一个段落</p>
<ul>
<li>java</li>
<li>python</li>
<li>c++</li>
</ul>
</body>
</html>
4. siblings()方法：
该方法用于取得匹配元素前后所有的同辈元素。
[html] view
plain copy
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.c1{
color:red;
font-weight:bold
}
</style>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").click(function(){
$("#d2").siblings().removeClass("c1");
});
});
</script>
</head>
<body>
<p class="c1">我是第一段</p>
<p class="c1" id="d2">我是第二段</p>
<p class="c1">我是第三段</p>
<input type="button" value="测试siblings()方法">
</body>
</html>
访问这个页面：
单击按钮后页面变为：
除此之外，jQuery还有很多遍历节点的方法，例如closest()，find()，filter()，nextAll()，prevAll()，parent()和parents()等
该方法用于取得匹配元素的子元素集合。
[html] view
plain copy
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $body=$("body").children();
var $p=$("p").children();
var $ul=$("ul").children();
alert($body.length);
alert($p.length);
alert($ul.length);
for(var i=0,len=$ul.length;i<len;i++){
alert($ul[i].innerHTML);
}
});
</script>
</head>
<body>
<p></p>
<ul>
<li>java</li>
<li>python</li>
<li>c++</li>
</ul>
</body>
</html>
2. next()方法：
该方法用于取得匹配元素后面紧邻的同辈元素。
[html] view
plain copy
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $p_next=$("p").next();
alert($p_next.html());
});
</script>
</head>
<body>
<p></p>
<ul>
<li>java</li>
<li>python</li>
<li>c++</li>
</ul>
</body>
</html>
3. prev()方法：
该方法用于取得匹配元素前面紧邻的同辈元素。
[html] view
plain copy
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $ul_prev=$("ul").prev();
alert($ul_prev.text());
});
</script>
</head>
<body>
<p>我是一个段落</p>
<ul>
<li>java</li>
<li>python</li>
<li>c++</li>
</ul>
</body>
</html>
4. siblings()方法：
该方法用于取得匹配元素前后所有的同辈元素。
[html] view
plain copy
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.c1{
color:red;
font-weight:bold
}
</style>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").click(function(){
$("#d2").siblings().removeClass("c1");
});
});
</script>
</head>
<body>
<p class="c1">我是第一段</p>
<p class="c1" id="d2">我是第二段</p>
<p class="c1">我是第三段</p>
<input type="button" value="测试siblings()方法">
</body>
</html>
访问这个页面：
单击按钮后页面变为：
除此之外，jQuery还有很多遍历节点的方法，例如closest()，find()，filter()，nextAll()，prevAll()，parent()和parents()等
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Jquery中的DOM操作 (八.遍历节点)
- JQuery_dom属性操作、节点遍历及包裹
- jQuery基础教程之DOM操作-遍历节点-siblings()方法
- jQuery遍历DOM节点操作之filter()方法详解
- jQuery基础教程之DOM操作-遍历节点-find()方法
- jQuery遍历DOM节点操作之filter()方法详解
- jQuery基础教程之DOM操作-遍历节点-children()方法
- jQuery基础教程之DOM操作-遍历节点-filter()方法
- jQuery基础教程之DOM操作-遍历节点-parent()方法
- JavaScript之jQuery-3 jQuery操作DOM(查询、样式操作、遍历节点、创建插入删除、替换、复制)
- jQuery之dom操作(遍历节点)
- jQuery基础教程之DOM操作-遍历节点-parents()方法
- jQuery基础教程之DOM操作-遍历节点-prev()方法
- 3.2.11: jQuery的DOM操作之遍历节点
- jQuery基础教程之DOM操作-遍历节点-prevAll()方法
- jQuery的DOM操作之遍历节点
- jQuery基础教程之DOM操作-遍历节点-prevUntil()方法
- jQuery基础教程之DOM操作-遍历节点-next()方法
- jQuery总结2（DOM操作和遍历）
- jquery中DOM节点操作（六）