标签：jquery
今天晚上给小伙伴们一起交流学习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需要慢慢的体会！
今晚，抱着“破坏性”入睡吧。。。
版权声明：本文为博主原创文章，未经博主允许不得转载。
标签：jquery
原文地址：http://blog.csdn.net/qqhjqs/article/details/48015351
