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 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 Javascript
详谈JS中实现种子随机数及作用
Jul 19 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
vue.js动态数据绑定学习笔记
May 19 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
JavaScript闭包相关知识解析
Oct 19 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
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
js获取div高度的代码
2008/08/09 Javascript
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
js导出txt示例代码
2014/01/14 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
python读写LMDB文件的方法
2018/07/02 Python
python编程使用协程并发的优缺点
2018/09/20 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
Python理解递归的方法总结
2019/01/28 Python
安纳塔拉酒店度假村及水疗官方网站:Anantara Hotel
2016/08/25 全球购物
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
初入社会应届生求职信
2013/11/18 职场文书
师范类求职信
2014/06/21 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
2014年电厂工作总结
2014/12/04 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书