jquery获取所有子元素

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 <html>
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 7         <title>获取DOM节点个数和节点内容</title>
 8         <link rel="stylesheet" href="common.css" type="text/css" />
 9         <script src="jquery-1.5.2.js" type="text/javascript"></script>
10         <script type="text/javascript">
11             $(document).ready( function() {
12                 //children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈）。
13                 //参数可选，添加参数表示通过选择器进行过滤，对元素进行筛选。
14                 var $nodes = $("#root").children();
15                 alert("number of nodes is " + $nodes.length);
16                 var txt = "";
17                 //获取所有子元素并且遍历
18                 $("#root").children().each(function() {
19                     txt += $(this).text()+"<br />";
20                 });
21                 alert($("#root").children().text());
22                 alert($("#root").html());
23                 $('#root').text("Hello World!");
24                 $('#root').html("<b>Go away!</b>")
25             });
26         </script>
27     </head>
28     <body>
29         <div id="root">
30             <div>John</div>
31             <div>Marry</div>
32             <div>Steve</div>
33         </div>
34         
35         <h2>
36             This is h2 title text content!
37         </h2>
38         <p></p>
39         
40         <div id="foot">
41         </div>
42     </body>
43 </html>
posted on 2017-01-18 23:11 Sharpest 阅读(3242) 评论(0) 收藏举报