快捷導航

詳解jQuery 鏈式調(diào)用

更新時間：2021年05月07日 09:33:41 作者：小白可別不舉鐵

這篇文章主要介紹了jQuery 鏈式調(diào)用的相關(guān)資料，幫助大家更好的理解和學習使用jQuery，感興趣的朋友可以了解下

鏈式調(diào)用

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

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

jQuery對象調(diào)用除了節(jié)點關(guān)系的方法之外，其他的方法執(zhí)行后，返回值就是對象自己，可以繼續(xù)鏈式調(diào)用其他的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 () {
      // 鏈式調(diào)用實現(xiàn)  
       $(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")  //父級的兄弟的自己變橘色
     })