jQuery之dom操作(遍历节点)
children()/children(selector) -- 只考虑子元素,不考虑其他后代元素
next()/next(selector) -- 下一个兄弟节点
prev()/prev(selector) -- 上一个兄弟节点
siblings()/siblings(selector) -- 其他兄弟节点
find(selector) -- 从某个节点开始查找后代中满足selector的节点
parent() -- 父节点
示例代码:/jQuery01/WebRoot/dom/d7.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>遍历节点</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$('#b1').click(function(){
//children()/children(selector) --只考虑子元素,不考虑其他后代元素
//var $obj = $('#d1').children();
//获取后代中所有的div子节点
var $obj = $('#d1').children('div');
//length属性:获得jQuery对象包含的dom对象个数
//alert($obj.length);
//next()/next(selector) -- 下一个兄弟节点
//$('#d4').next().css('color','red');
//$('#d4').next('p').css('color','red');
//prev()/prev(selector) -- 上一个兄弟节点
//$('#d4').prev().css('color','red');
//siblings()/siblings(selector) -- 其他兄弟节点
//$('#d3').siblings('div').css('font-size','60px');
//find(selector)--从某个节点开始查找后代中满足selector的节点
//$('#d1').find('span').css('font-size','60px');
//parent() -- 父节点
alert($('#d2').parent().attr('id'));
});
});
</script>
</head>
<body style="font-size:30px;">
<div id="d1">
<div id="d2">hello 1</div>
<div id="d3">
hello 2
<span>1111</span>
</div>
<div id="d4">hello 3</div>
<p>hello 4</p>
</div>
<input id="b1" type="button" value="遍历节点"><br/>
</body>
</html>