关于jQuery中end()的定义和用法

灰太狼 2024-03-27 09:26 49阅读 0赞

![6f2d89dc823cc7843a58a29eaf7acfbd.jpeg][]

**end()定义和用法**

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 redsolid");</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代码如下：

<divid="test">

<h1>jQueryend()方法</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()方法。

\----------------------

<script type="text/javascript"src="jquery.js"></script>

<script type="text/javascript">

<!--

$(function()\{

$("<input type="button" value="click me"/><input type="button" value="triggleclick me" /><input type="button"value="detach handle" /><inputtype="button" value="show/hide text"/>").appendTo($("body"));

$("input\[type="button"\]").eq(0).click(function()\{

alert("youclicked me!");

\})

.end().eq(1).click(function()\{

$("input\[type="button"\]:eq(0)").trigger("click");

\})

.end().eq(2).click(function()\{

$("input\[typw="button"\]:eq(0)").unbind("click");

\})

.end().eq(3).toggle(function()\{

$(".panel").hide("slow");

\},function()\{

$(".panel").show("slow");

\});

\})

//-->

</script>

<style type="text/css">

.panel\{

padding:20px;

background-color:\#000066;

color:\#FFFFFF;

font-weight:bold;

width:200px;

height:50px;

\}

</style>

<div class="panel">welcome tojQuery!</div>

文章来源：微点阅读 [https://www.weidianyuedu.com][https_www.weidianyuedu.com]

[6f2d89dc823cc7843a58a29eaf7acfbd.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/52f2ab0b201e43cc8a0e9fc3e4e26685.png
[https_www.weidianyuedu.com]: https://www.weidianyuedu.com

发表评论取消回复

表情：

评论列表（有 0 条评论，49人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery中end()的定义与用法介绍

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1] 定义和用法 end() 方法结束当前链条中的最近的筛选操作

蔚落/ 2024年03月29日 14:40/ 0 赞/ 53 阅读

相关 jQuery中end()的定义与用法介绍

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1] 定义和用法 end() 方法结束当前链条中的最近的筛选操作

Dear 丶/ 2024年03月29日 14:40/ 0 赞/ 56 阅读

相关关于jQuery中end()的定义和用法

![6f2d89dc823cc7843a58a29eaf7acfbd.jpeg][] end()定义和用法 end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还

灰太狼/ 2024年03月27日 09:26/ 0 赞/ 50 阅读

相关【C++】endl ends flush 的用法

int main() { cout<<"1"; cout<<"2"<<flush; //刷新缓冲区（看不

╰+哭是因爲堅強的太久メ/ 2022年11月27日 12:07/ 0 赞/ 80 阅读

相关 SQL中的Case When Else End的用法

最近在对hive做优化时遇到了Case When Else End语法，所以就总结一下相关的知识给大家分享一下，具体的格式如下：条件判断语句 update： u

淩亂°似流年/ 2022年10月16日 07:47/ 0 赞/ 144 阅读

相关 JQuery中attr()和prop()用法和区别

jquery attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到a

忘是亡心i/ 2022年06月09日 14:40/ 0 赞/ 183 阅读

相关 jQuery中的html()、text()和val()的用法

1.html() 获得的是第一个符合要求的标签中的所有内容，例如： var content = $("li").html(); <li>111<p>999

╰半橙微兮°/ 2021年11月29日 13:18/ 0 赞/ 254 阅读

相关 jQuery中的html()、text()和val()的用法

1.html() 获得的是第一个符合要求的标签中的所有内容，例如： var content = $("li").html(); <li>111<p>999

叁歲伎倆/ 2021年10月23日 12:28/ 0 赞/ 279 阅读

相关 Jquery 关于span标签的取值赋值用法

span是最简单的容器，可以当作一个形式标签，其取值赋值方法有别于一般的页面元素 //赋值 $("spanid").html(value)

梦里梦外;/ 2021年07月24日 18:46/ 0 赞/ 425 阅读

相关 Jquery的.contents()和.end()方法

`.contents()` 返回: jQuery > 描述: 获得匹配元素集合中每个元素的子元素，包括文字和注释节点。给定一个`jQuery`对象，表示一个`DOM

叁歲伎倆/ 2021年07月04日 19:54/ 0 赞/ 349 阅读