jQuery的end()方法

end方法的定义

end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。

如果没有筛选操作将返回一个空集。

先看例子帮助分析

两端代码的效果是一样的

<ul class="first">
   <li class="foo">list item 1</li>
   <li>list item 2</li>
   <li class="bar">list item 3</li>
</ul>

<script>
    $('.first').find('.foo').css('background-color', 'red');//设置ul中第一个li的背景色为红色
    $('.first').find('.bar').css('background-color', 'green');//设置ul中第三个li的背景色为绿色
</script>

<ul class="first">
   <li class="foo">list item 1</li>
   <li>list item 2</li>
   <li class="bar">list item 3</li>
</ul>

<script>
    $('.first').find('.foo')
    .css('background-color', 'red')//设置ul中第一个li的背景色为红色
    .end().find('.bar')
    .css('background-color', 'green');//设置ul中第三个li的背景色为绿色
</script>

先看下面这个链式操作，用find找到对应的后代后又.css设置了其样式。

 $('.first').find('.foo').css('background-color', 'red')

这就是链式操作，可以在选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来，它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。

现在再来分析end的定义。
       end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。

$('.first').find('.foo')

是当前链条中在end之前的最近的筛选操作，它返回的是find筛选DOM元素集的jquery对象，然后.css不是筛选操作，只是设置css样式，再后面就是end方法，这时候调用end方法就是将匹配元素集还原为之前的状态（使结果集退了一步），也就是未筛选前$('.first')返回的DOM元素集的jquery对象，这样后面就可以继续使用链式操作（在同一个节点做不同的筛选操作）。

如果不使用命令链，我们一般也是像第一个例子那样，通过变量名来调用之前的对象。