层级选择器

层级选择器详解

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 98 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/loongforever/p/7995141.html

文章标签：

#javascript #ViewUI

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级选择器</title>

    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function () {

            //获取id为d的元素的所有标签为a的后代元素
            var obj1 = $("#d a");
            alert(obj1.text());

            //获取id为d的元素的所有标签为a的直接子元素
            var obj2 = $("#d > a");
            alert(obj2.text());

            //获取id为d的元素的下一个标签为p的兄弟元素
            var obj3 = $("#d + p");
            alert(obj3.text());

            //获取id为d的元素的下一个标签为a的兄弟元素
            var obj3 = $("#d + a");
            alert(obj3.text());

            //获取id为d的元素的所有兄弟标签中标签名为p的
            var obj4 = $("#d ~ p");
            alert(obj4.text());
        })
    </script>
</head>
<body>

<div id="d">
    <a>aaa</a>

    <p>
        <a>bbb</a>
    </p>

    <a>ccc</a>
</div>

<a>ddd</a>
<p>eee</p>
<p>fff</p>

</body>
</html>