jQuery常用的层次选择器

最新推荐文章于 2025-09-04 18:55:33 发布

weixin_30408309

最新推荐文章于 2025-09-04 18:55:33 发布

阅读量79

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/john568300/p/6420948.html

常用层次选择器

儿子

手机品牌

苹果
华为
vivo

电脑品牌

苹果
联想
戴尔

销量排行

vivo
苹果
华为

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>常用层次选择器</title>
    <script src="scripts/jquery-3.1.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            //选择ul下的所有的li
            //var $li = $("ul li");
            //alert($li.length);
            //alert($li.html());

            /*for(var i=0;i<$li.length;i++){
                var li = $li[i];
                alert(li.innerHTML);
            }*/
            //s1>s2  s1匹配的元素下的匹配的s2 只找第一个 不找后面的
            /*var $h3 = $("body>h3");
            alert($h3.length);*/
            //pre+next紧接在h3后面的ul
            /*var $ul = $("h3+ul");
            alert($ul.length);*/
            //pre~全部的 重复的默认算一次
            var $all = $("h3~ul");
            alert($all.length);
        });

    </script>
</head>
<body>
    <h3>儿子</h3>
    <div>
        <div>
            <h3>手机品牌</h3>
            <ul>
                <li>苹果</li>
                <li>华为</li>
                <li>vivo</li>
            </ul>
            <h3>电脑品牌</h3>
            <ul>
                <li>苹果</li>
                <li>联想</li>
                <li>戴尔</li>
            </ul>
        </div>
        <div>
            <h3>销量排行</h3>
            <ol>
                <li>vivo</li>
                <li>苹果</li>
                <li>华为</li>

            </ol>
        </div>
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/john568300/p/6420948.html