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 相关文章推荐
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
JSON JQUERY模板实现说明
Jul 03 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 Javascript
elementui实现预览图片组件二次封装
Dec 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 expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
php define的第二个参数使用方法
2013/11/04 PHP
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
2018/11/11 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
使用Python生成url短链接的方法
2015/05/04 Python
python计算auc指标实例
2017/07/13 Python
pandas string转dataframe的方法
2018/04/11 Python
Python中的引用知识点总结
2019/05/20 Python
Python Selenium参数配置方法解析
2020/01/19 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
详解pandas映射与数据转换
2021/01/22 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
自荐信的禁忌和要点
2013/10/15 职场文书
致短跑运动员广播稿
2014/01/09 职场文书
党务公开方案
2014/05/06 职场文书
新农村建设典型材料
2014/05/31 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
办公用房租赁协议书
2014/11/29 职场文书
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫
python对文档中元素删除,替换操作
2022/04/02 Python