今天晚上给小伙伴们一起交流学习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需要慢慢的体会!
今晚,抱着“破坏性”入睡吧。。。