jQuery關係查找方法

時間 2021-04-01

標籤 javascript css java jquery 函數 this code 對象事件欄目 JQuery 简体版

原文原文鏈接

jQuery關係查找方法

$(this):在原生的DOM操做中,事件函數內部都有一個this關鍵字指向的就是觸發事件的事件源;在jQuery中將this關鍵字傳遞給$()方法,獲得的就是指向本身的jQuery對象,這樣就能夠使用jQuery方法了.
parent()父級:jQuery對象都有一個parent()方法,獲得的是本身的父級,父級獲得的也是一個jQuery對象,能夠直接繼續打點調用jQuery方法和屬性
children()子級:能夠獲得本身的全部子級元素組成的jQuery對象;獲得的子級組成的jQuery對象能夠繼續調用jQuery方法和屬性
- children()能夠傳遞參數,參數是字符串格式的選擇器,在選中全部子級的狀況下,保留知足選擇器的部分,進行二次選擇.
siblings()兄弟:jQuery對象經過調用siblings()方法能夠獲得除了本身之外的全部同級元素(兄弟)組成的jQuery對象,找到的只能是親的兄弟,不能是旁系(叔叔家)的兄弟
- siblings()方法的到的jQuery對象能夠進行二次選擇,經過給參數傳遞字符串格式獲得選擇器

<head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 400px;
            height: 60px;
            border: 1px solid #000;
            margin-top: 2px;
        }
        .box p,.box h2{
            float: left;
            width: 60px;
            height: 60px;
            margin-right: 20px;
            background-color: rgb(164, 247, 233);
        }
    </style>
</head>
<body>
    <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <h2>h2</h2>
    </div>
    <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <h2>h2</h2>
    </div>
    <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <h2>h2</h2>
    </div>
    <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <h2>h2</h2>
    </div>
    <script src="../jq/jquery-1.12.4.min.js"></script>
    <script>
        var $p = $("p");
        var $box = $(".box")
        $p.click(function(){
            //點擊本身，發生顏色改變
            
            //使用$()包裹this，this由指向觸發事件的原生js對象，變成指向jQuery對象本身
            $(this).css("background-color","pink");
            // $(this).parent() 找到事件源的父級元素
            $(this).parent().css("background-color","skyblue");

            //siblings()
          //  $(this).siblings().css("background-color","purple");
            //除了點擊的之外，它的兄弟都變成了紫色
            // 添加參數後，會按照指定的選擇器在子級中進行二次選擇
            $(this).siblings("h2").css("background", "purple");
            //兄弟元素同時是好標籤

        })

        //經過點擊div 獲取它的子級元素
        $box.click(function(){
            //獲取子級
           // $(this).children().css("background","pink");
            
           // 添加參數後，會按照指定的選擇器在子級中進行二次選擇
            $(this).children("h2").css("background", "orange");

        })

        //查找兄弟元素  sinblings（）
        // 寫在$P方法中
    </script>
</body>