Detailed example of jQuery's chain programming style

Detailed example of jQuery's chain programming style

The implementation principle of chain programming

jQuery allows us developers to always use dot syntax to call our own methods. The main reason is that jQuery uses js objects internally to implement it.

In jQuery, if you keep operating on the same element or other related elements (sibling elements, parent-child elements), you can use the . syntax (dot syntax) and keep writing.

$("#box").css("background", "pink").css("font-size":"29px");
$("#box").siblings().css("background", "");

can be written as:

$("#box").css("background", "pink").siblings().css("background", "red");

To implement chain programming, the jQuery selector itself is a jQuery object. jQuery uses this internally to return itself.

    //In js, declare an object var obj = {  
         name:"Name", 
        desc: function(){   
        console.log(this); // Print the current object console.log(this.name); // Call the property of the object return this; // The principle of chain programming is that after calling the method, the method itself returns the object.
},  
      read: function(){  
        console.log("hello!");    
        return this; 
    }}

jQuery's chain programming style example

First, I will use a case to demonstrate jQuery's chain programming style. First write a page to display a list. The code is as follows:

<body>
    <div>
        <ul class="menu">
            <li class="level1">
                <a href="#">Fruit</a>
                <ul class="level2">
                    <li><a href="#">Apple</a></li>
                    <li><a href="#">Pineapple</a></li>
                    <li><a href="#">Cantaloupe</a></li>
                </ul>
            </li>
            <li class="level1">
                <a href="#">Staple Food</a>
                <ul class="level2">
                    <li><a href="#">Noodles</a></li>
                    <li><a href="#">Mantou</a></li>
                    <li><a href="#">Rice</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>

<script type="text/javascript">
    $(function() {
        $(".level1 > a").click(function() {
            $(this).addClass("current").next().show().parent.siblings().children("a").removeClass("current").next().hide();
            return false;
        });
    });
</script>

The effect after the code is executed is shown in the figure below:

The expansion effect of the above code is achieved through jQuery's chain operation. All operations of adding the current class, method calls for querying child elements, and calls to animation methods are performed on the same element. Therefore, after obtaining a jQuery object, all subsequent method and attribute calls are called continuously through ".". This mode is a chain operation.

In order to increase the readability and maintainability of the code, we modify the above chain code format as follows:

<script type="text/javascript">
    $(function() {
        $(".level1 > a").click(function() {
            // Add the current style to the current element $(this).addClass("current")
                // The next element is displayed.next().show()
                // Remove the current style from the child element a of the parent element's sibling element.parent.siblings().children("a").removeClass("current")
                // Their next element is hidden.next().hide();
            return false;
        });
    });
</script>

After adjusting the standard format, the code is easier to read and more convenient for subsequent maintenance.

At the same time, when we perform chain operations on the same jQuery object, we mainly follow the following three format specifications.

(1) For no more than three operations on the same object, they can be written directly in one line. The code is as follows:

<script type="text/javascript">
    $(function() {
        $("li").show().unbind("click");
    });
</script>

(2) For multiple operations on the same object, it is recommended to write one operation per line. The code is as follows:

<script type="text/javascript">
    $(function() {
        $(this).removeClass("mouseout")
            .addClass("mouseover")
            .stop()
            .fadeTo("fast", 0.5)
            .fadeTo("fast", 1)
            .unbind("click")
            .click(function() {
                .......
            });
    });
</script>

(3) For a small number of operations on multiple objects, you can write one line for each object. If sub-elements are involved, consider appropriate indentation. The code is as follows:

<script type="text/javascript">
    $(function() {
        $(this).addClass("highLight")
            .children("a").show().end()
            .siblings().removeClass("highLight")
            .children("a").hide();
    });
</script>

The above is about jQuery's chain programming style.

Summarize

This is the end of this article about jQuery chain programming style. For more relevant jQuery chain programming content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Use JavaScript chain programming to simulate Jquery functions

<<:  Analysis of the Poor Performance Caused by Large Offset of LIMIT in MySQL Query

>>:  Detailed explanation of the installation process of Jenkins on CentOS 7

Recommend

Analysis of mysql view functions and usage examples

This article uses examples to illustrate the func...

What do CN2, GIA, CIA, BGP and IPLC mean?

What is CN2 line? CN2 stands for China Telecom Ne...

A complete record of the process of building mobile applications using Vue Native

Table of contents Preface Features of Vue Native ...

Dockerfile echo specifies the method of implementing multiple lines of text in the specified file

Add multiple lines to the specified file in Docke...

Native js to realize a simple snake game

This article shares the specific code of js to im...

Set the width of the table to be fixed so that it does not change with the text

After setting the table width in the page to width...

Docker case analysis: Building a MySQL database service

Table of contents 1 Create configuration and data...

Prevent HTML and JSP pages from being cached and re-fetched from the web server

After the user logs out, if the back button on the...

MySQL password contains special characters & operation of logging in from command line

On the server, in order to quickly log in to the ...

Quickly master the use of Docker to build a development environment

As the platform continues to grow, the project...

Mysql error: Too many connections solution

MySQL database too many connections This error ob...

How to implement the King of Glory matching personnel loading page with CSS3

Those who have played King of Glory should be fam...

Nginx Service Quick Start Tutorial

Table of contents 1. Introduction to Nginx 1. Wha...

How to build a tomcat image based on Dockerfile

Dockerfile is a file used to build a docker image...

Solution to overflow:hidden failure in CSS

Cause of failure Today, when I was writing a caro...