Home >Web Front-end >JS Tutorial >Detailed explanation of jQuery's end() method_jquery

Detailed explanation of jQuery's end() method_jquery

WBOYOriginal: 2016-05-16 15:50:151261browse

Definition and usage of end() method:

The

end() method can go back to the last "destructive" operation, that is, change the matching element list to the previous state.
If there are no destructive operations an empty set will be returned.
The concept of destructive operations: refers to any operation that changes the matched elements. Maybe everyone is vague about this concept. Here is an example:

$("li").css("color","red");

The CSS function in the above code is not a destructive operation, because the list of matching elements does not change, but the CSS properties of the text content in the element are changed.

$("li").find(".first")

The above code is a destructive operation because the list of matching elements has changed. For example, if there are three li elements, then the list of matching elements has three elements. However, after filtering using the find() method, there is only one matching element list. element, this means that a "destructive" operation has occurred.
Grammatical structure:

$(selector).end()

Example code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
 $(".first").find(".div").css("color","green"); 
 $(".second").find(".div").end().css("color","blue"); 
 $(".third").find(".js").css("color","blue").end().css("color","red") 
}) 
</script>
</head>
<body>
<div>
 <ul class="first">
  <li>HTML专区</li>
  <li>Javascript专区</li>
  <li class="div">Div+Css专区</li>
  <li>Jquery专区</li>
 </ul>
 <ul class="second">
  <li>HTML专区</li>
  <li>Javascript专区</li>
  <li class="div">Div+Css专区</li>
  <li>Jquery专区</li>
 </ul>
 <ul class="third">
  <li>HTML专区</li>
  <li class="js">Javascript专区</li>
  <li>Div+Css专区</li>
  <li>Jquery专区</li>
 </ul>
</div>
</body>
</html>

The above is the entire content of this article, I hope you all like it.

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：jQuery simply implements verification email format_jqueryNext article：jQuery simply implements verification email format_jquery

See more

Detailed explanation of jQuery's end() method_jquery

Related articles