溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

jQuery中的關(guān)系查找方法是什么

發(fā)布時(shí)間：2022-03-21 09:14:03 來源：億速云 閱讀：146 作者：小新 欄目：開發(fā)技術(shù)

這篇文章主要介紹了jQuery中的關(guān)系查找方法是什么，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

一、jQuery關(guān)系查找方法

  • $(this):在原生的DOM操作中,事件函數(shù)內(nèi)部都有一個(gè)this關(guān)鍵字指向的就是觸發(fā)事件的事件源;在jQuery中將this關(guān)鍵字傳遞給$()方法,得到的就是指向自己的jQuery對象,這樣就可以使用jQuery方法了.

  • parent()父級:jQuery對象都有一個(gè)parent()方法,得到的是自己的父級,父級得到的也是一個(gè)jQuery對象,可以直接繼續(xù)打點(diǎn)調(diào)用jQuery方法和屬性

  • children()子級:可以得到自己的所有子級元素組成的jQuery對象;得到的子級組成的jQuery對象可以繼續(xù)調(diào)用jQuery方法和屬性

    • children()可以傳遞參數(shù),參數(shù)是字符串格式的選擇器,在選中所有子級的情況下,保留滿足選擇器的部分,進(jìn)行二次選擇.

  • siblings()兄弟:jQuery對象通過調(diào)用siblings()方法可以得到除了自己以外的所有同級元素(兄弟)組成的jQuery對象,找到的只能是親的兄弟,不能是旁系(叔叔家)的兄弟

    • siblings()方法的到的jQuery對象可以進(jìn)行二次選擇,通過給參數(shù)傳遞字符串格式得到選擇器

<head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 400px;
            height: 60px;
            border: 1px solid #000;
            margin-top: 2px;
        }
        .box p,.box h3{
            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>
        <h3>h3</h3>
    </div>
    <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <h3>h3</h3>
    </div>
    <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <h3>h3</h3>
    </div>
    <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <h3>h3</h3>
    </div>
    <script src="../jq/jquery-1.12.4.min.js"></script>
    <script>
        var $p = $("p");
        var $box = $(".box")
        $p.click(function(){
            //點(diǎn)擊自己，發(fā)生顏色改變
            
            //使用$()包裹this，this由指向觸發(fā)事件的原生js對象，變成指向jQuery對象自己
            $(this).css("background-color","pink");
            // $(this).parent() 找到事件源的父級元素
            $(this).parent().css("background-color","skyblue");

            //siblings()
          //  $(this).siblings().css("background-color","purple");
            //除了點(diǎn)擊的以外，它的兄弟都變成了紫色
            // 添加參數(shù)后，會按照指定的選擇器在子級中進(jìn)行二次選擇
            $(this).siblings("h3").css("background", "purple");
            //兄弟元素同時(shí)是好標(biāo)簽

        })

        //通過點(diǎn)擊div 獲取它的子級元素
        $box.click(function(){
            //獲取子級
           // $(this).children().css("background","pink");
            
           // 添加參數(shù)后，會按照指定的選擇器在子級中進(jìn)行二次選擇
            $(this).children("h3").css("background", "orange");

        })

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

二、jQuery其他關(guān)系查找方法

  • find()后代元素:傳遞一個(gè)規(guī)定的選擇器作為參數(shù),查找范圍是jQuery對象的所有后代

兄弟元素

 緊鄰的兄弟元素方法:

  • next()下一個(gè)兄弟

  • prev()前一個(gè)兄弟

  多選方法：

  •   nextAll()后面所有兄弟

  •   preAll()前面所有兄弟

<style>
   *{
     margin: 0;
     padding: 0;
    }
   .box{
      border: 1px solid #000;
      background-color: white;
      width: 500px;
      height: 50px;
      margin-left: 4px;
      margin-top: 4px;
   }
  p{
     width: 50px;
     height: 50px;
     background-color: rgb(185, 185, 185);
     float: left;
     margin-right: 8px;
   }
  
  span{
       float: left;
       width: 50px;
       height: 50px;
       margin-right: 8px;
       background-color: pink;
     }
</style>
   
  <body>
      <div class="box">
          <p></p>
          <p></p>
          <p></p>
          <span></span>
          <span></span>
          <span></span>
      </div>
      <div class="box">
          <p></p>
          <p></p>
          <p></p>
          <span></span>
          <span></span>
          <span></span>
      </div>
      <div class="box">
          <p></p>
          <p></p>
          <p></p>
          <span></span>
          <span></span>
          <span></span>
      </div>
  
  
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
  var $box = $(".box")
  var $p = $("p")
          
  //實(shí)現(xiàn)點(diǎn)擊一個(gè)子級標(biāo)簽，讓它自己變成紅色，使它的前面的兄弟變紫色，后面的兄弟變橘色
  var $child = $box.children();
  $child.click(function(){
     $(this).css("background-color","red")
     .prevAll().css("background-color","purple")
    $(this).css("background-color","red")
     .nextAll().css("background-color","orange")
  
  </script>
</body>

通過傳遞參數(shù)可以進(jìn)行二次選擇，參數(shù)是字符串格式的選擇器，在前面或后面兄弟中選中符合選擇器規(guī)定的部分。

parents()祖先級

通過該方法得到的是指定對象的包含body在內(nèi)的所有祖先級元素組成的jQuery對象

通過傳參進(jìn)行二次選擇，參數(shù)位置是字符串格式的選擇器

代碼示例：

 //實(shí)現(xiàn)點(diǎn)擊一個(gè)子級標(biāo)簽，自己變紅色，使它的祖先級變成藍(lán)色
 // parents（） 查找包含body在內(nèi)的祖先級
 // $(this).css("background-color","red")
 // .parents().css("background-color","skyblue")       
                   
// parents()傳參數(shù)，可以篩選去掉不是div的元素
 $(this).css("background-color", "red")
  .parents("div").css("background-color", "skyblue")
})

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“jQuery中的關(guān)系查找方法是什么”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手