向下遍历 DOM 树，查找元素的后代。children() 方法，find() 方法。

<html>
<head>
<  http-equiv="Content-Type" content="text/html; charset=utf-8"/>
< >My Test JQuery</ >
    <  type="text/ " src="./js/jquery-1.10.2.min.js"></ >
    <  type="text/ " >    
        $(function(){ 
            //children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。
            //find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
            $("#btn_children1").click(function(){
                $("#myDiv1").children().css({"color":"red","border":"3px solid red"});
            });
            $("#btn_children2").click(function(){
                $("#myDiv1").children("div.class1").css({"color":"red","border":"3px solid red"});
            });
            $("#btn_find1").click(function(){
                $("#myDiv1").find("div").css({"color":"red","border":"3px solid red"});
            });
            $("#btn_find2").click(function(){
                $("#myDiv1").find("*").css({"color":"red","border":"3px solid red"});
            });
        });
    </ >
</head>
<body>
    <button type="button" id="btn_children1">children</button><br/>
    <button type="button" id="btn_children2">children_class1</button><br/>
    <button type="button" id="btn_find1">findDiv</button><br/>
    <button type="button" id="btn_find2">find*</button><br/>
    <div id="myDiv1" style="width:210px;height:140px;padding: 10px;border:2px solid blue;">
        <div id="myDiv2" style="width:140px;height:60px;padding: 10px;border:2px solid green;" >
            <div id="myDiv3" style="width:70px;height:40px;padding: 10px;border:2px solid yellow;" >
                <p id="myP1" style="width:50px;height:20px;padding: 3px;border:2px solid black;" >
                </p>
            </div>
        </div>
        <div Class="class1" style="width:140px;height:30px;padding: 10px;border:2px solid green;" >
        </div>
    </div>   
</body>
</html>

\"\"  \"\" \"\"

\"\"  \"\"

 

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章