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 相关文章推荐
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
Js nodeType 属性全面解析
Nov 14 Javascript
js+html5实现可在手机上玩的拼图游戏
Jul 17 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 Javascript
基于javascript实现页面加载loading效果
Sep 15 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 Javascript
微信小程序实现的一键拨号功能示例
Apr 24 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 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
用php实现百度网盘图片直链的代码分享
2012/11/01 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
深入理解js中this的用法
2016/05/28 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
Python切片操作深入详解
2018/07/27 Python
python实现大转盘抽奖效果
2019/01/22 Python
机器学习实战之knn算法pandas
2019/06/22 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
Python虚拟环境venv用法详解
2020/05/25 Python
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
护士自我评价
2014/02/01 职场文书
中学家长会邀请函
2014/02/03 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
独生子女证明范本
2015/06/19 职场文书
创业计划书之旅游网站
2019/09/06 职场文书