Detailed explanation of jQuery chain calls

Chain calls
A small case

Chain calls

After the jQuery object calls any method (except the node relationship method), the method will have a return value, which is the jQuery object itself. This phenomenon provides us with convenience, and we can continue to call jQuery methods and properties on the execution results. That is, you can use the jQuery object to make continuous dot calls

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

In addition to the node relationship methods, after the execution of other methods of the jQuery object, the return value is the object itself, and you can continue to call the methods and properties of other jQuery objects in a chain. This simplifies code writing

A small case

Click an element to make itself pink, its siblings yellow, its parent blue, its parent's siblings color, and its parent's siblings itself orange

<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 () {
      // Chain call implementation $(this).css("background-color","pink") //Change itself to pink.siblings().css("background-color","yellow") //Own brothers change to yellow.parent().css("background-color","skyblue") //And its parent changes to blue.siblings().css("background-color","lightgreen") //The brothers of the parent change to light green.children().css("background-color","orange") //The brothers of the parent change to orange})

The above is the detailed explanation of jQuery chain call. For more information about jQuery chain call, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in: