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中eq和get的区别与使用方法
Apr 14 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
详解Vue监听数据变化原理
Mar 08 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
基于require.js的使用(实例讲解)
Sep 07 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 Javascript
JS指定音频audio在某个时间点进行播放
Nov 28 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 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 Ajax中文乱码问题解决方法
2009/02/27 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
js防止页面被iframe调用的方法
2014/10/30 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
50道外企软件测试面试题
2014/08/18 面试题
室内设计专业学生的自我评价分享
2013/11/27 职场文书
大学生就业推荐信范文
2013/11/29 职场文书
教师自我评价范文
2013/12/16 职场文书
单位领导证婚词
2014/01/14 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
助学金感谢信
2015/01/20 职场文书
助学感谢信范文
2015/01/21 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python
vue判断按钮是否可以点击
2022/04/09 Vue.js