jQuery的end()方法使用详解

下面是 "jQuery的end()方法使用详解" 的完整攻略。

一、概述

end()方法可以返回到前一个链式操作中的元素集合。如果在当前链式操作过程中使用了多个方法来筛选元素，那么end()方法可以回到最开始筛选的元素集合。

二、语法

end()方法的语法如下：

$(selector)
    .method1()
    .method2()
    .end();

# 三、参数

end()方法不需要参数。

四、示例说明

示例1

下面是一些 HTML 代码：

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

下面是代码片段：

$("ul")
  .find("li")
  .css("background-color", "yellow")
  .end();

$("li:first")
  .css("background-color", "green")
  .end()
  .css("background-color", "red");

这个例子中，我们首先筛选出ul元素，然后通过find()方法获取到所有的li元素，给这些元素设置了背景色为黄色。之后我们使用end()方法返回到了最初的 ul 元素集合，此时对这个 ul 元素设置属性和样式不会影响到内部的元素。

接着我们通过选择器选择了第一个li元素，将其背景色设置成绿色。然后我们再次通过end()方法返回到最初的ul元素集合，但是这个 end() 方法并没有保存状态，而是丢弃了我们之前设置的li:first选择器。所以，我们使用end()方法后，设置样式的代码会作用在整个ul上，而不是仅仅作用于内部的li元素。

最后我们再次调用end()方法回到最初的集合，再调用css()方法将所有的li元素的背景色设置为红色。

示例2

下面这个例子中，我们要查找 class 为selected的元素，并且将它们的背景色设置为紫色。然后我们再次通过end()方法返回到在selection方法中的状态，将这些元素隐藏。

下面是 HTML 代码：

<ul>
  <li class="selected">List Item 1</li>
  <li>List Item 2</li>
  <li class="selected">List Item 3</li>
</ul>

下面是代码片段：

$("ul")
  .find(".selected")
    .css("background-color", "purple")
  .end()
  .hide("slow");

这个例子中，我们首先选择了ul元素，然后使用find()方法查找class为selected的元素，并给它们的背景色设置为紫色。此时我们使用了end()方法返回到了我们在selection方法中的状态，接着使用了hide()方法将选择器所选中的元素隐藏起来。

五、总结

end() 方法可以返回到前一个链式操作中的元素集合。如果在当前链式操作过程中使用了多个方法来筛选元素，那么end()方法可以回到最开始筛选的元素集合。使用end()方法可以使得代码更加简洁明了，避免重复的代码。