选择集转移

2020-11-21 20:35:12 作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <style>
        .box{
            
        }
    </style> -->
    <script src="jquery-1.11.3/jquery.min.js"></script>
    <!-- 选择集转移：根据指定标签为参照物，选中其他标签，这种操作叫做选择集转移 -->
    <script>
        $(function(){
            var $div = $("#box1");
            // css参数是一个js对象，js对象和python中字典类似
            // 属性名和css中属性名保持一致
            // 选择上一个同级标签
            $div.prev().css({"color":"red","font-size":"25px"});
            // 选择上面所有同级标签
            $div.prevAll().css({"text-indent":"50px"});
            // 选择下一个同级标签
            $div.next().css({"color":"green"});
            // 选择下面所有同级标签
            $div.nextAll().css({"text-indent":"50px"});
            // 选择同级的其他标签
            $div.siblings().css({"text-decoration":"underline"});
            // 选择父标签
            $div.parent().css({"background":"gray"});
            // 获取所有字标签
            $div.children().css({"color":"red"});
            // 查找指定的标签
            $div.find(".sp1").css({"color":"green"});
        })
    </script>
</head>
<body>
    <div>
        <h3>3级标题</h3>
        <p>hahaha</p>
        <div id="box1"><span>我是</span>一个<span class="sp1">div</span>标签</div>
        <h3>三级标题</h3>
        <p>哈哈哈哈</p>
    </div>
    
</body>
</html>
标签：同级,color,标签,选择,div,转移,css
来源： https://www.cnblogs.com/fangkun/p/14015674.html