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 相关文章推荐
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
JavaScript arguments 多参传值函数
Oct 24 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
vue.js动态数据绑定学习笔记
May 19 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 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计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
php检测文件编码的方法示例
2014/04/25 PHP
php学习笔记之基础知识
2014/11/08 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
2019/08/14 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
python批量制作雷达图的实现方法
2016/07/26 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
python对文件的操作方法汇总
2020/02/28 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
一些.net面试题
2014/10/06 面试题
网络编程中设计并发服务器,使用多进程与多线程,请问有什么区别?
2016/03/27 面试题
前台文员职责范本
2014/03/07 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
青年文明号申报材料
2014/12/23 职场文书
小学运动会入场口号
2015/12/24 职场文书
nginx设置资源请求目录的方式详解
2022/05/30 Servers
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技