Detailed explanation of jQuery chain calls
Chain callsAfter 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 caseClick 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:
|
<<: Tutorial diagram of building a Hadoop high-availability cluster based on ZooKeeper
>>: Multiple ways to calculate age by birthday in MySQL
Recommend
Nginx reverse proxy configuration removes prefix
When using nginx as a reverse proxy, you can simp...
VMWare virtual machine 15.X LAN network configuration tutorial diagram
Recently, I have been working on several virtual ...
About input file control and beautification
When uploading on some websites, after clicking t...
Introduction to user management under Linux system
Table of contents 1. The significance of users an...
A brief introduction to Linux performance monitoring commands free
When the system encounters various IO bottlenecks...
In-depth understanding of umask in new linux file permission settings
Preface The origin is a question 1: If your umask...
The complete implementation process of Sudoku using JavaScript
Table of contents Preface How to solve Sudoku Fil...
Understanding MySQL precompilation in one article
1. Benefits of precompilation We have all used th...
How to set the border of a web page table
<br />Previously, we learned how to set cell...
How to implement CSS to display ellipsis when single-line or multi-line text overflows
1. Single row overflow 1. If a single line overfl...
Docker container operation instructions summary and detailed explanation
1. Create and run a container docker run -it --rm...
Simple implementation of handheld barrage function + text shaking special effects code based on JS
There was a shaking barrage on TikTok a while ago...
Mysql view the maximum number of connections and modify the maximum number of connections
MySQL View the maximum number of connections and ...
How to install ZSH terminal in CentOS 7.x
1. Install basic components First, execute the yu...
Some suggestions for HTML beginners and novices, experts can ignore them
Feelings: I am a backend developer. Sometimes when...