整shi人的end();

最新推荐文章于 2023-02-21 21:19:46 发布

爆米花机枪手

最新推荐文章于 2023-02-21 21:19:46 发布

阅读量1.4k

点赞数 1

分类专栏： Web前端文章标签： jquery

本文链接：https://blog.csdn.net/qqHJQS/article/details/48015351

版权

Web前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

今天晚上给小伙伴们一起交流学习jQueryDom操作的时候，遇到end()方法，然后在一起纠结了很长一段时间，jQuery文档上说的很笼统，一定要细细的品位才能知道个大概

End the most recent filtering operation in the current chain and return the set of matched elements to its previous state.
结束当前链中最近的过滤操(有的成为破坏性)作并返回匹配的元素集合到其之前的状态。

然后jQuery1.7的文档给出了这样一个例子

<div></div><div></div>

 $("<p/>")
   .appendTo("div")
   .addClass("test")
   .end()
   .addClass("test2");

运行后的结果就是

<div><p class="test test2"></p></div>
<div><p class="test"></p></div>

一直没有搞不清为什么第一个div里会添加两个class，而第二个只有一个。。。就这个问题几个小伙伴在一起讨论来讨论去（都没用过end）；
各种找资料，不一会，全部都蒙圈了，后来使用火狐调试，一步一步的运行，有了眉目

1.$('<p/>').appendTo('div')返回的是：[p,p]对象数组，即新增后的两个p标签；
2.$('<p/>').appendTo('div').addClass('c1')返回的是：[p.c1,p.c1]对象数组，即添加了c1类样式后的p对象数组；
3.$('<p/>').appendTo('div').addClass('c1').end()返回的是[p.c1],是第1个<div>中的<p>,在2操作中，最后“破坏”的是第2个<div>中的 <p>,所以他的前一次操作的对象是第1个<div>中的<p>,返回的就是它;
4.$('<p/>').appendTo('div').addClass('c1').end().addClass('c2')返回的仍然是第1个<div>中的<p>;

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

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

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

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

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

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>脚本之家</title>
<script type="text/javascript" src="../js/jquery-1.7.2.min.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")
 //$(".third").css("color","red") 
 $(".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>

被注释的部分就相当于最右一句，这个end需要慢慢的体会！
今晚，抱着“破坏性”入睡吧。。。

爆米花机枪手

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
整shi人的end();

今天晚上给小伙伴们一起交流学习jQueryDom操作的时候，遇到end()方法，然后在一起纠结了很长一段时间，jQuery文档上说的很笼统，一定要细细的品位才能知道个大概End the most recent filtering operation in the current chain and return the set of matched elements to its previous
复制链接

扫一扫

专栏目录