children():只考虑子元素而不考虑其他后代元素
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.11.2.js" type="text/javascript"></script>
<script type="text/javascript"> $(function () { var $body = $("body").children();
var $p = $("p").children();
var $ul = $("ul").children(); alert($body.length); //2个元素
alert($p.length); //0个元素
alert($ul.length); //3个元素 for (var i = 0; i < $ul.length; i++) { alert($ul[i].innerHTML);//
} });
</script>
</head>
<body>
<p>
你喜欢的水果是?</p>
<ul>
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ul>
</body>
</html>
next():后面紧邻的同辈元素
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.11.2.js" type="text/javascript"></script>
<script type="text/javascript"> $(function () { var $p1 = $("p").next(); //next()方法 后面紧邻的同辈元素
var $p2 = $p1.children(); for (var i = 0; i < $p2.length; i++) { alert($p2[i].innerHTML);
} });
</script>
</head>
<body>
<p>
你喜欢的水果是?</p>
<ul>
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ul>
</body>
</html>
prev():前面紧邻的同辈元素
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.11.2.js" type="text/javascript"></script>
<script type="text/javascript"> $(function () { var $ul = $("ul").prev(); //前面紧邻的同辈元素
alert($ul.text()); });
</script>
</head>
<body>
<p>
你喜欢的水果是?</p>
<ul>
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ul>
</body>
</html>
closest():取得最近的匹配元素,首先检查当前元素是否匹配,如果匹配则直接返回元素本身,如果不匹配则向上查找父元素
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.11.2.js" type="text/javascript"></script>
<script type="text/javascript"> $(function () { $(document).bind("click", function (e) {
$(e.target).closest("li").css("color","green");
}); });
</script>
</head>
<body>
<p>
你喜欢的水果是?</p>
<ul>
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ul>
</body>
</html>
siblings():前后所有的同辈元素
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript"> $(function () { $(".level1>a").click(function () {
$(this).addClass("current") //给当前元素添加"current"属性
.next().show() //下一个元素显示
.parent().siblings().children("a").removeClass("current")//父辈的同辈元素的子元素<a>移除"current"样式
.next().hide();//它们的下一个元素隐藏
return false;
});
}); </script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul class="menu">
<li class="level1"><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >衬衫</a>
<ul class="level2">
<li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >短袖衬衫</a></li>
<li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >长袖衬衫</a></li>
<li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >短袖T恤</a></li>
<li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >长袖T恤</a></li>
</ul>
</li>
<li class="level1"><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >卫衣</a>
<ul class="level2">
<li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >开襟卫衣</a></li>
<li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >套头卫衣</a></li>
<li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >运动卫衣</a></li>
<li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >童装卫衣</a></li>
</ul>
</li>
<li class="level1"><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >裤子</a>
<ul class="level2">
<li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >短裤</a></li>
<li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >休闲裤</a></li>
<li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >牛仔裤</a></li>
<li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >免烫卡其裤</a></li>
</ul>
</li>
</ul>
</div>
</form>
</body>
</html>
