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实现的网页局布刷新效果
Dec 01 Javascript
通过百度地图获取公交线路的站点坐标的js代码
May 11 Javascript
JavaScript基础语法让人疑惑的地方小结
May 23 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
node.js中的dns.getServers方法使用说明
Dec 08 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
完美实现仿QQ空间评论回复特效
May 06 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
Jul 14 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 Javascript
js数组的基本使用总结
Jan 18 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
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
显示js对象所有属性和方法的函数
2009/10/16 Javascript
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
2017/03/21 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
Vue.set()实现数据动态响应的方法
2018/02/07 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
windows下安装python paramiko模块的代码
2013/02/10 Python
django接入新浪微博OAuth的方法
2015/06/29 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
总经理秘书工作职责
2013/12/26 职场文书
女方回门宴答谢词
2014/01/14 职场文书
30年同学聚会感言
2014/01/30 职场文书
安全月活动总结
2014/05/05 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
2014年工人工作总结
2014/11/25 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
如何使用SQL Server语句创建表
2022/04/12 SQL Server