Detailed explanation of jQuery chain calls

Detailed explanation of jQuery chain calls

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:
  • JQuery special effects and chain call operation examples
  • Python implements an example of chain calls similar to jQuery
  • A brief analysis of jQuery chain calls and show knowledge
  • A brief analysis of jQuery's chain call each function
  • A brief analysis of jQuery's chain call
  • Javascript chain call implementation code (refer to jquery)
  • Imitate the chain call of jQuery each function

<<:  Tutorial diagram of building a Hadoop high-availability cluster based on ZooKeeper

>>:  Multiple ways to calculate age by birthday in MySQL

Recommend

Detailed explanation of the use and differences of various lock mechanisms in Linux

Preface: I believe that those who need to underst...

The process of building and configuring the Git environment in Docker

Configure Git environment in Docker At work, I en...

In-depth understanding of the seven communication methods of Vue components

Table of contents 1. props/$emit Introduction Cod...

CSS example code for setting scroll bar style

The CSS implementation code for setting the scrol...

Four categories of CSS selectors: basic, combination, attribute, pseudo-class

What is a selector? The role of the selector is t...

How to install PHP7 Redis extension on CentOS7

Introduction In the previous article, we installe...

Linux kernel device driver Linux kernel module loading mechanism notes summary

#include <linux/moduleparam.h> 1. Module pa...

An example of how to quickly deploy web applications using Tomcat in Docker

After learning the basic operations of Docker, we...

mysql 5.6.23 winx64.zip installation detailed tutorial

For detailed documentation on installing the comp...

Introduction to the difference between OBJECT and EMBED tags used to display flash content

1. Introduction: If we want to display flash conte...

Solve the problem of being unable to log in when installing MySQL on mac using homebrew

If your computer is a Mac, using homebrew to inst...

How to deploy springcloud project with Docker

Table of contents Docker image download Start mys...

Detailed explanation of Nginx configuration required for front-end

Nginx (engine x) is a lightweight, high-performan...

Summary of basic usage of js array

Preface Arrays are a special kind of object. Ther...

The whole process of developing a Google plug-in with vue+element

Simple function: Click the plug-in icon in the up...