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图片轮播的具体实现
Sep 11 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
Node.js实用代码段之正确拼接Buffer
Mar 17 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
JS打印彩色菱形的实例代码
Aug 15 Javascript
vue实现百度下拉列表交互操作示例
Mar 12 Javascript
基于JavaScript实现单例模式
Oct 30 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
vue中jsonp插件的使用方法示例
Sep 10 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
提问的智慧(2)
2006/10/09 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
python实现批量转换图片为黑白
2020/06/16 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
2014年扶贫帮困工作总结
2014/12/09 职场文书
详解PHP Swoole与TCP三次握手
2021/05/27 PHP
Python pandas之求和运算和非空值个数统计
2021/08/07 Python
Java spring单点登录系统
2021/09/04 Java/Android
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python