jQuery中的end()方法

来源：互联网发布：一件代发淘宝发货编辑：程序博客网时间：2024/04/28 23:12

定义和用法

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

以上是官方说法，比较难理解。

还是用一个例子来说明

<!DOCTYPE html>
<html>
<head>
<style>p { margin:10px; padding:10px; }</style>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>
<p><span>Hello</span>, how are you?</p>
<script>$("p").find("span").end().css("border", "2px red solid");</script>
</body>
</html>

$("p").find("span")表示查找P元素下的SPAN元素

但是我想更改P的边框，这时我就要返回到P元素（即从SPAN返回到P,就是还原为之前的状态)

$("p").find("span").end()这个语句就返回来了。

$("p").find("span").end().css("border", "2px red solid")把P的边框设置了。

-------------------

对于end()方法，jQuery文档是这样解释的：jQuery回到最近的一个"破坏性"操作之前。即: 将匹配的元素列表变为前一次的状态。

但给的例子并不是很明显，相信不少人并没有理解它的用法。

下边我们以一个非常简单的例子来说明下用法，html代码如下：

<div id="test">
    <h1>jQuery end()方法</h1>
    <p>讲解jQuery中end()方法。</p>
</div>
JS代码：

$(document).ready(function() {
    $("#test").click(function() {
        $(this).find("p").hide().end().hide();
    });
});
点击id为test的div时，首先找到div里边的p标签，将其隐藏。接下来使用end()方法结束了对p标签的引用，此时返回的是#test(jQuery对象)，从而后边的hide()方法隐藏了div。这样相信大家已经理解了jQuery中end()方法。

----------------------

0 0