Analysis of how to use .add() in jquery-JS Tutorial-php.cn

Analysis of how to use .add() in jquery

巴扎黑

Release： 2017-06-24 10:23:00

Original

2968 people have browsed it

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>

Copy after login

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>

Copy after login

The code is as follows:

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

Copy after login

The result is as shown in the figure below Display:

## The css of p and span is equivalent to

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

Copy after login

Example 3:

The code is as follows:

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

Copy after login

The code is as follows:

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

Copy after login

The result is as follows:

clone() means to copy; copy one p and insert Again 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>

Copy after login

The result is as shown below:

##Example 4:

The code is as follows:

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

Copy after login

The code is as follows:

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

Copy after login

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!