Explication détaillée de la méthode end() de jQuery

Explication détaillée de la méthode end() de jQuery_jquery

WBOY

Libérer： 2016-05-16 15:50:15

original

1259 Les gens l'ont consulté

Définition et utilisation de la méthode end() :

La méthode

end() peut revenir à la dernière opération "destructive", c'est-à-dire modifier la liste des éléments correspondants à l'état précédent.
S'il n'y a pas d'opérations destructives, un ensemble vide sera renvoyé.
La notion d'opérations destructives : désigne toute opération modifiant les éléments appariés. Peut-être que tout le monde est vague sur ce concept. Voici un exemple :

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

Copier après la connexion

La fonction CSS dans le code ci-dessus n'est pas une opération destructrice, car la liste des éléments correspondants ne change pas, mais les propriétés CSS du contenu du texte dans l'élément sont modifiées.

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

Copier après la connexion

Le code ci-dessus est une opération destructrice car la liste des éléments correspondants a changé. Par exemple, s'il y a trois éléments li, alors la liste des éléments correspondants a trois éléments. Cependant, après filtrage à l'aide de la méthode find(), il n'y a qu'un seul élément de liste d'éléments correspondant, cela signifie qu'une opération "destructrice" a eu lieu.
Structure grammaticale :

$(selector).end()

Copier après la connexion

Exemple de 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>

Copier après la connexion

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.