1. 向上遍历 DOM 树，查找元素的祖先。

　　parent() 方法，parents() 方法，parentsUntil() 方法。

<!DOCTYPE html>
<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(){ 
            //parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
            //parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
            //parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
            $("#btn_parent").click(function(){
                $("#myDiv3").parent().css({"color":"red","border":"3px solid red"});
            });
            $("#btn_parents").click(function(){
                $("#myDiv3").parents().css({"color":"red","border":"3px solid red"});
            });
            $("#btn_parentsUntil").click(function(){
                $("#myDiv3").parentsUntil("body").css({"color":"red","border":"3px solid red"});
            });
        });
    </ >
</head>
<body>
    <button type="button" id="btn_parent">parent</button><br/>
    <button type="button" id="btn_parents">parents</button><br/>
    <button type="button" id="btn_parentsUntil">parentsUntil</button><br/>
    <div id="myDiv1" style="width:210px;height:90px;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:30px;padding: 10px;border:2px solid yellow;" >
            </div>
        </div>
    </div>   
</body>
</html>

\"\"　　\"\"

\"\"　　\"\"

 

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

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

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

精彩发现

热门标签

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

相关文章