jquery_定位元素

更多元素定位方式：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

更多元素选择方式：https://www.w3school.com.cn/jquery/jquery_ref_traversing.asp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script>
    <script type="text/javascript">        
        $(function(){
            // ==================== css选择器获取元素 ========================
            // 通过id定位元素
            div = $('#div1');
            div.css({'color':'red'});

            // 通过class定位元素
            div2 = $('.box');
            div2.css({'color':'green'});

            // 通过name定位元素
            div_name = $("[name=div4]")
            div_name.css("color", "blue")
            
            // 多层级定位元素
            li1 = $('.list1 li');
            li1.css({'background-color':'pink','color':'blue'});

            // 选择元素数组的第2元素。eq的索引从0开始
            li1.eq(1).css("font-size", "30px")

            
            // ==================== 获取后代元素 ========================
            // children()方法只能获取直接后代，后代只能为子
            $('.list2').children("li:first").css("color", "white")

            // find()方法可以获取其内的所有后代，后代可以是子、孙、曾孙，依此类推
            $('.list2').find("li").css({'backgroundColor':'tomato'})
            $('.list2').find(".li4").css("color", "green")

            // ==================== 获取先辈元素 ========================
            // parent()获取直接先辈，先级只能为父
            $("#list2_li").parent().css("font-size", "30px")

            // parents()获取其上的所有先辈，先辈可以是父、爷、祖父，依次类推
            $("#list2_li").parents("div").css("font-weight", "bold")

            // ==================== 获取同辈元素 ========================
            // next()获取同级下一个元素
            $("#list2_li").next().text("同级下一个元素")

            // parents()获取其上的所有先辈，先辈可以是父、爷、祖父，依次类推
            $("#list2_li").prev().text("同级上一个元素")

            // 遍历元素数组，i为索引值，可缺省
            $(".list2").find("li").each(function(i){
                // 当处于function中时，$(this)表示当前操作元素
                if ($(this).text() == 2){   
                    $(this).text("index：" + i)
                }
            })
        });

    </script>
</head>

<body>
    <div id="div1">这是一个div元素</div>

    <div class="box">这是第二个div元素</div>
    <div class="box">这是第三个div元素</div>

    <div name="div4">这是第四个div元素</div>

    <ul class="list1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <div>
        <ul class="list2">
            <li>1</li>
            <li id="list2_li">2</li>
            <li class="li4">3</li>
            <li class="li4">4</li>
        </ul>
    </div>
</body>
</html>

 

posted @ 2022-08-02 11:43  码上测  阅读(327)  评论(0)    收藏  举报