1.children()方法
该方法用于取得匹配元素的子元素集合
此处使用本章开头所画的那颗DOM树的结构,如图3-36所示；
node2:/var/www/html#cat a44.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>dom</title>
</head>
<body>
<p titile="选择你最喜欢的水果.">你最喜欢的水果是?</p>
<ul>
<li titile='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
</html>
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="a44.js"></script>
根据DOM树的结构,可以知道各个元素之间的关系以及它们子节点的个数
<body>元素下有<p>和<ul>两个子元素,<p>元素没有子元素,<ul>元素有3个<li>子元素
下面使用children()方法来获取匹配元素的所有子元素的个数
jQuery代码如下:
node2:/var/www/html#cat a44.js
var $body = $("body").children();
var $p=$("p").children();
var $ul=$("ul").children();
alert($body.length); //<body>元素下有2个子元素
alert($p.length); //<p>元素下有0个子元素
alert($ul.length); //<ul>元素下有3个子元素
for(var i=0,len=$ul.length;i<len;i++){
alert($ul[i].innerHTML);
}