Home > Article > Web Front-end > Analysis of how to use .add() in jquery

Analysis of how to use .add() in jquery

巴扎黑Original: 2017-06-24 10:23:002967browse

This article introduces the analysis of the use of .add() in jquery. Friends who need it can refer to

add() to add elements to the set of matching elements. This is the statement in the jquery reference manual. However, the example link provided is wrong, so there is no example description of add(). Here are a few examples to better understand the usage of add().

Example 1

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<style>
p { width:60px; height:60px; margin:10px; float:left; }
p { clear:left; font-weight:bold; font-size:16px;
color:blue; margin:0 10px; padding:2px; }
</style>
<script language="JavaScript" type="text/JavaScript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
 $("p").css("border", "2px solid red").add("p").css("background", "yellow");
});
</script>
</head>
<body>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p>Added this… (notice no border)</p>
</body>
</html>

The result is as shown below:

Explanation: add("p") here means sum, that is, the css of $("p") and the css of p. Note here that p has a border. And p does not.

Example 2

The code is as follows:

<body>
<p>Hello</p><span>Hello Again</span>
</body>

The code is as follows:

$("p").add("span").css("background", "yellow");

The result is as shown in the figure below Display:

## The css of p and span is equivalent to

$("p,span").css("background","yellow");

Example 3:

The code is as follows:

<body>
<p>Hello</p>
</body>

The code is as follows:

$("p").clone().add("<span>Again</span>").appendTo(document.body);

The result is as follows:

clone() means to copy; copy one p and insert 45a2772a6b6107b401db3c9b82c049c2Again54bdf357c58b8a65c66d7c19c8e4d114 into the body of the document.

Insert a sentence here: If clone() is not used, the original p will no longer exist. Look at the following example:

The code is as follows:

<script>
$(document).ready(function(){
  $("p").add("<span>Again</span>").appendTo(document.body);
  alert($("body").html());
});
</script>

<body>
<p>Hello</p>
</body>

The result is as shown below:

##Example 4:

The code is as follows:

<body>
<p>Hello</p><span id="a">Hello Again</span>
</body>

The code is as follows:

$("p").add(document.getElementById("a")).css("background", "yellow");

The result is as follows:

This indicates that the parameters in add() can not only be selectors, but also DOM elements.

The above is the detailed content of Analysis of how to use .add() in jquery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use jquery siblings to get all siblings (siblings) of an elementNext article：Use jquery siblings to get all siblings (siblings) of an element

See more

Analysis of how to use .add() in jquery

Related articles