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 相关文章推荐
JQuery 学习笔记 选择器之四
Jul 23 Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
node.js express中app.param的用法详解
Jul 16 Javascript
微信小程序支付之c#后台实现方法
Oct 19 Javascript
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
JavaScript模拟实现自由落体效果
Aug 28 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 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
一个ubbcode的函数,速度很快.
2006/10/09 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
JavaScript中Function详解
2015/02/27 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
python实现巡检系统(solaris)示例
2014/04/02 Python
Python3写入文件常用方法实例分析
2015/05/22 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
python 消费 kafka 数据教程
2019/12/21 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
澳大利亚在线奢侈品时尚零售平台:Azura Runway
2021/01/13 全球购物
string = null 和string = ''的区别
2013/04/28 面试题
公司总经理岗位职责范本
2014/08/15 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
2015年推普周活动总结
2015/03/27 职场文书
父亲去世追悼词
2015/06/23 职场文书
SpringRetry重试框架的具体使用
2021/07/25 Java/Android
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python