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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
jQuery语法总结和注意事项小结
Nov 11 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
使用jquery制作弹出框效果
Apr 03 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
vue生命周期实例小结
Aug 15 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
通过实例解析vuejs如何实现调试代码
Jul 16 Javascript
vue动态设置路由权限的主要思路
Jan 13 Vue.js
浅谈$(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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
php 常用的系统函数
2017/02/07 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
python实现class对象转换成json/字典的方法
2016/03/11 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
python中删除某个元素的方法解析
2019/11/05 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
python连接PostgreSQL过程解析
2020/02/09 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
基于Python绘制个人足迹地图
2020/06/01 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
新闻专业本科生的自我评价分享
2013/11/20 职场文书
大二法学专业职业生涯规划范文
2014/02/12 职场文书
美容院合作经营协议书
2014/10/10 职场文书
刑事撤诉申请书
2015/05/18 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题