jQuery中end()方法用法实例


Posted in Javascript onJanuary 08, 2015

本文实例讲述了jQuery中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" />

<meta name="author" content="https://3water.com/" />

<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>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
jQuery Autocomplete自动完成插件
Jul 17 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
Jul 12 Javascript
javascript中的return和闭包函数浅析
Jun 06 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
Apr 03 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
JS原型和原型链原理与用法实例详解
Feb 05 Javascript
JavaScript如何优化逻辑判断代码详解
Jun 08 Javascript
vue实现拖拽交换位置
Apr 07 Vue.js
jQuery中contents()方法用法实例
Jan 08 #Javascript
jQuery中andSelf()方法用法实例
Jan 08 #Javascript
jQuery中add()方法用法实例
Jan 08 #Javascript
javascript 动态创建表格
Jan 08 #Javascript
javascript实现避免页面按钮重复提交
Jan 08 #Javascript
Node.js 制作实时多人游戏框架
Jan 08 #Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 #Javascript
You might like
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
用PHP和ACCESS写聊天室(十)
2006/10/09 PHP
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
vuex存储token示例
2019/11/11 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
大学军训的体会
2014/11/08 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL