jQuery中的end()方法
.end()返回: jQuery
描述: 终止在当前链的最新过滤操作,并返回匹配的元素的以前状态。
添加的版本: 1.0.end()
这个方法不接受任何参数。
大多数 jQueryDOM遍历 方法来操作 jQuery 对象实例,并创建一个新的对象,匹配一个不同的 DOM 元素集合。当发生这种情况时,实际上是新的元素集合被压入到对象内部维护的栈中。每次过滤方法都会被压入栈中。当我们需要返回到前一个状态时,我们可以使用end() 进行出栈操作,来返回栈中的前一个状态。
假设页面上有几个短的列表
<ul class="first"><li class="foo">list item 1</li><li>list item 2</li><li class="bar">list item 3</li>
</ul>
<ul class="second"><li class="foo">list item 1</li><li>list item 2</li><li class="bar">list item 3</li>
</ul>
end() 方法主要用于 jQuery 的链式属性中。当没有使用链式用法时,我们通常只是调用变量名上的前一个对象,所以我们不需要操作栈。使用 end() 时,我们可以一次性调用所有需要的方法:
$(‘ul.first’).find(’.foo’).css(‘background-color’, ‘red’)
.end().find(’.bar’).css(‘background-color’, ‘green’);
在上面的代码中,首先在链式用法中只在第一个列表中查找样式为 foo 的项目,并将其背景色变成红色。然后 end() 返回调用 find() 之前的状态。因此,第二次 find() 将只会查找
- 中的 ‘.bar’,而不是继续在
- 中进行查找,结果是将匹配到的元素的背景色变成绿色。上述代码的最终结果是,第一个列表中的第 1 和第 3 个列表项的背景色有颜色,而第二个列表中的任何项目都没有背景色。
对于一个长的 jQuery 链式写法,可以使用结构块的写法,让其具有很好的可读性,即:将 end() 方法与其对应的过滤方法写在一个嵌套块中,例如:
$('ul.first').find('.foo').css('background-color', 'red')
.end().find('.bar').css('background-color', 'green')
.end();
最后的end()是不必要的,我们丢弃紧随其后的jQuery对象。然而,当编写这种形式的代码,end()提供了可视化的对称性和完整性,至少一些开发者的眼中,更具可读性,这样存在一些性能成本,因为它是一个额外的函数调用。
例子:
Example: 选择所有的段落,在其中查找 span 元素,之后再恢复到选择段落的状态。
<!DOCTYPE html>
<html>
<head><style>p, div { margin:1px; padding:1px; font-weight:bold;font-size:16px; }div { color:blue; }b { color:red; }</style><script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body><p>Hi there <span>how</span> are you <span>doing</span>?</p><p>This <span>span</span> is one ofseveral <span>spans</span> in this<span>sentence</span>.</p><div>Tags in jQuery object initially: <b></b></div><div>Tags in jQuery object after find: <b></b></div><div>Tags in jQuery object after end: <b></b></div>
<script>
jQuery.fn.showTags = function (n) {var tags = this.map(function () {return this.tagName;}).get().join(", ");$("b:eq(" + n + ")").text(tags);return this;
};$("p").showTags(0).find("span").showTags(1).css("background", "yellow").end().showTags(2).css("font-style", "italic");</script></body>
</html>
Demo:
Example: Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.
Demo:
jQuery中的end()方法相关推荐
- 用JQuery中的Ajax方法获取web service等后台程序中的方法
用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...
- jQuery中animate( )的方法及$(“body“).animate({‘scrollTop‘:top},500)不被Firefox支持问题的解决
jQuery中animate( )的方法及$("body").animate({'scrollTop':top},500)不被Firefox支持问题的解决 参考文章: (1)jQu ...
- jquery中的map()方法与js中的map()方法
1.jquery中的map()方法 首先看一个简单的实例: $("p").append( $("input").map(function(){ return $ ...
- jQuery 中的 end 方法
如有错误,欢迎批评指正! jQuery 中的 end 方法,我从 stackoverflow 上的一个回答开始讲: 原文链接: What does the .end() function do in ...
- 原生JS中的三大家族(offset/scroll/client)与jQuery中对应的方法
JS中的offset家族: 一.offsetEWidth与offsetHeight: 获取的是元素的实际宽高 = width + border + padding 注意点: 1.可以获取行内及内嵌的宽 ...
- ajax远程调用,jquery中的ajax方法怎样通过JSONP进行远程调用
关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用 首先介绍下$.ajax的参数 type:请求方式 GET/ ...
- JQuery中ajax,get方法在asmx中的使用
喜大普奔,今天终于完成了一个月前就想完成的一个代码实现.就是在点击一个按钮后禁用按钮,弹出正在操作的提示框,执行完事件后再启用按钮. 以前的想法是Ajax和aspx联用,这样,省页面,也不用对后台代码 ...
- js中的onclick事件和JQuery中的click方法以及on方法事件用法总结
1.onclick是绑定的事件(它是一个事件),注意该事件绑定只是JacaScript中有(js中的),Jquery中并没有此事件,告诉浏览器在鼠标点击时候要做什么 2.click方法(jquery中 ...
- 关于JQuery中的appendTo方法
JQuery中的appendTo方法是会改变页面原有的结构,包括原从页面中取到结构的地方,比如如下代码(代码来自慕课网): <!DOCTYPE html> <html> < ...
- jQuery 中的 get() 方法
jQuery 中的 get() 方法 开发工具与关键技术:Microsoft Visual Studio,jQuery知识 作者:张智鹏 撰写时间:2020 年 8 月 17 日 在 jQuery 中 ...
最新文章
- DIV+CSS一行两列布局
- SprintBoot中如何构造Bean原理分析
- 基于指令和混合的前端通用埋点方案
- 绝了!这款工具让 SpringBoot 不再需要Controller、Service、DAO、Mapper!
- python3解析json数据_Python3高级教程
- Jquery怎样返回上一页
- Android Studio 版本号详解
- 大学计算机一级考试内容和范围,大学计算机一级考试.doc
- 从编译器层面理解C#中的闭包的这个坑!
- 计算机沟通方式,雅思阅读练习:计算机改变沟通方式
- Remove Assignments to Parameters(移除对参数的赋值)
- eureka注册中心之服务提供者
- python批量导入网页信息_python批量导入数据进Elasticsearch的实例
- 【英语学习】【Daily English】U13 Holiday L02 That's supposedly the best time of year to go
- docker hub push_Docker系列-(2) 镜像制作与发布
- 第1章——操作系统概论
- 1.4.1 启动与销毁Activity
- Chrome OS 开发者版现可备份和恢复 Linux 容器
- Matlab读取图像数据并写入TXT
- Python 追加 Excel 数据
热门文章
- 编译之 jack-server报错
- Linux安装 Oracle 19C 实操
- 苏州源特国产隔离DC-DC电源芯片替代SN6505/SGM46000/MAX256/B0505-1W的方案
- 正则表达式(RegExp)
- 关于tomcat启动时的警告 :maxActive is not used inDBCP2
- NB-IoT智能配电柜测温监测系统解决方案
- C# .Net 使用多个Dbcontext
- 解决了联想i908手机SIM卡注册失败、受限服务的BUG
- OpenGL 图形学基础知识汇总
- Wireshark分析实际报文理解SSL(TLS)协议