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学习笔记 更改jQuery对象
Sep 19 Javascript
用js实现in_array的方法
Nov 05 Javascript
Javascript Objects详解
Sep 04 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
简单三步实现报表页面集成天气
Dec 15 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 Javascript
Vue实现验证码功能
Dec 03 Javascript
ant design vue中表格指定格式渲染方式
Oct 28 Javascript
vue 函数调用加括号与不加括号的区别
Oct 29 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使之能同时支持GIF和JPEG
2006/10/09 PHP
php快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
js 动态选中下拉框
2009/11/26 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
python二分查找算法的递归实现方法
2016/05/12 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
详解Django中异步任务之django-celery
2020/11/05 Python
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
婴儿地球:Baby Earth
2018/12/25 全球购物
主要的Ajax框架都有什么
2013/11/14 面试题
公积金转移接收函
2014/01/11 职场文书
《临死前的严监生》教学反思
2014/02/13 职场文书
公司门卫岗位职责
2014/03/15 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
初婚初育证明范本
2015/06/18 职场文书
详解Laravel服务容器的优势
2021/05/29 PHP