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 相关文章推荐
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
12条写出高质量JS代码的方法
Jan 07 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
关于jquery中attr()和prop()方法的区别
May 28 jQuery
详解AngularJS 过滤器的使用
Jun 02 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 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
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
PHP关联链接常用代码
2012/11/05 PHP
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
javascript 禁止复制网页
2009/06/11 Javascript
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
js获取IFRAME当前的URL的方法
2013/11/13 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
JavaScript位置参数实现原理及过程解析
2020/09/14 Javascript
Python用Bottle轻量级框架进行Web开发
2016/06/08 Python
机器学习python实战之手写数字识别
2017/11/01 Python
单链表反转python实现代码示例
2018/02/08 Python
基于Python开发chrome插件的方法分析
2018/07/07 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
python实现两个文件夹的同步
2019/08/29 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
Reebonz中国官网:新加坡奢侈品购物网站
2017/03/17 全球购物
简单叙述一下MYSQL的优化
2016/05/09 面试题
大一期末自我鉴定
2013/12/13 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书
Python必备技巧之函数的使用详解
2022/04/04 Python