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 ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
Angular表单验证实例详解
Oct 20 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
javascript 面向对象实战思想分享
Sep 07 Javascript
vuex的使用及持久化state的方式详解
Jan 23 Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
Vue3 Composition API的使用简介
Mar 29 Vue.js
JavaScript中document.activeELement焦点元素介绍
Nov 27 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
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
php命令行模式代码实例详解
2021/02/26 PHP
javascript第一课
2007/02/27 Javascript
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
Python脚本处理空格的方法
2016/08/08 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
python实现顺时针打印矩阵
2019/03/02 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
Django ModelForm操作及验证方式
2020/03/30 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
财务会计毕业生自荐信
2013/11/02 职场文书
python基础之类方法和静态方法
2021/10/24 Python
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript