jQuery的end()方法使用详解


Posted in Javascript onJuly 15, 2015

end()方法的定义和用法:

end()方法能够回到最近的一个"破坏性"操作之前,即将匹配的元素列表变为前一次的状态。
如果没有破坏性操作将返回一个空集。
破坏性操作的概念:指任何改变所匹配元素的操作。可能大家对这个概念比较模糊,举个例子:

$("li").css("color","red");

以上代码的CSS函数就不是一个破坏性操作,因为匹配元素列表并没有发生变化,改变的是元素中的文本内容的CSS属性。

$("li").find(".first")

以上代码就是一个破坏性操作,因为匹配元素的列表发生了变化,比如有三个li元素,那么匹配元素的列表有三个元素,但是经过使用find()方法筛选以后,匹配元素列表只有一个元素了,这就是发生了"破坏性"操作。
语法结构:

$(selector).end()

实例代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三水点靠木</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
 $(".first").find(".div").css("color","green"); 
 $(".second").find(".div").end().css("color","blue"); 
 $(".third").find(".js").css("color","blue").end().css("color","red") 
}) 
</script>
</head>
<body>
<div>
 <ul class="first">
  <li>HTML专区</li>
  <li>Javascript专区</li>
  <li class="div">Div+Css专区</li>
  <li>Jquery专区</li>
 </ul>
 <ul class="second">
  <li>HTML专区</li>
  <li>Javascript专区</li>
  <li class="div">Div+Css专区</li>
  <li>Jquery专区</li>
 </ul>
 <ul class="third">
  <li>HTML专区</li>
  <li class="js">Javascript专区</li>
  <li>Div+Css专区</li>
  <li>Jquery专区</li>
 </ul>
</div>
</body>
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
javascript Excel操作知识点
Apr 24 Javascript
初步认识JavaScript函数库jQuery
Jun 18 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
prettier自动格式化去换行的实现代码
Aug 25 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 Javascript
angular异步验证器防抖实例详解
Mar 31 Javascript
浅谈$(document)和$(window)的区别
Jul 15 #Javascript
浅谈window对象的scrollBy()方法
Jul 15 #Javascript
jQuery的bind()方法使用详解
Jul 15 #Javascript
纯JavaScript实现的分页插件实例
Jul 14 #Javascript
javascript实现网页字符定位的方法
Jul 14 #Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 #Javascript
jquery获得当前html页面源码的方法
Jul 14 #Javascript
You might like
奇怪的PHP引用效率问题分析
2012/03/23 PHP
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
8个必备的PHP功能开发
2015/10/02 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
Vue之Watcher源码解析(1)
2017/07/19 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
基于python 取余问题(%)详解
2020/06/03 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
《长江之歌》教学反思
2014/04/17 职场文书
学校与家长安全责任书
2014/07/23 职场文书
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript