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 相关文章推荐
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
javascript 处理null及null值示例
Jun 09 Javascript
JavaSacript中charCodeAt()方法的使用详解
Jun 05 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
Js的Array数组对象详解
Feb 22 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 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
linux iconv方法的使用
2011/10/01 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
php实现利用phpexcel导出数据
2013/08/24 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
python实现telnet客户端的方法
2015/04/15 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
python 伯努利分布详解
2020/02/25 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
商务会议邀请函
2014/01/09 职场文书
秦兵马俑教学反思
2014/02/07 职场文书
表决心的诗句大全
2014/03/11 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
2014年质量工作总结
2014/11/22 职场文书
会计求职自荐信
2015/03/26 职场文书
预备党员考察意见范文
2015/06/01 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书