jQuery鏈式調用的詳解

更新時間：2021-06-09 17:02:29 來源：動力節點瀏覽1025次

JQuery對象調用任何方法(除了節點關系方法)執行完后,方法都會有一個返回值,返回值就是jQuery對象自己,這個現象給我們提供了便利,可以對執行結果繼續打點調用jQuery的方法和屬性。即——可以使用jQuery對象進行連續打點調用

jQuery

console.log($(this).css("background-color", "pink").html("hello"));

jQuery對象調用除了節點關系的方法之外，其他的方法執行后，返回值就是對象自己，可以繼續鏈式調用其他的jQuery對象的方法和屬性。這樣可以達到簡化代碼書寫

一個小案例

點擊一個元素，使它自己變粉色，兄弟變黃色，其父級變藍色，父級的兄弟變色，父級的兄弟的自己變橘色

<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>
<!------------------------------------------------------------------->

<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).css("background-color","pink")   //自己變粉色
       .siblings().css("background-color","yellow")  //自己的兄弟變黃色
       .parent().css("background-color","skyblue")   //并且自己的父級變藍色                     .siblings().css("background-color","lightgreen")  //父級的兄弟跟著變成淺綠色
       .children().css("background-color","orange")  //父級的兄弟的自己變橘色
     })

jQuery