jQuery的end()方法使用详解

前端技术 2023/09/09 JavaScript

end()方法的定义和用法:

end()方法能够回到最近的一个\"破坏性\"操作之前，即将匹配的元素列表变为前一次的状态。
如果没有破坏性操作将返回一个空集。
破坏性操作的概念:指任何改变所匹配元素的操作。可能大家对这个概念比较模糊，举个例子:

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

以上代码的CSS函数就不是一个破坏性操作，因为匹配元素列表并没有发生变化，改变的是元素中的文本内容的CSS属性。

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

以上代码就是一个破坏性操作，因为匹配元素的列表发生了变化，比如有三个li元素，那么匹配元素的列表有三个元素，但是经过使用find()方法筛选以后，匹配元素列表只有一个元素了，这就是发生了\"破坏性\"操作。
语法结构:

$(selector).end()

实例代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>phpstudy</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>

以上所述就是本文的全部内容了，希望大家能够喜欢。

本文地址：https://www.stayed.cn/item/25170

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案