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 相关文章推荐
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
javascript如何操作HTML下拉列表标签
Aug 20 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 Javascript
微信小程序数字滚动插件使用详解
Feb 02 Javascript
深入了解javascript 数组的sort方法
Jun 01 Javascript
vue实现简单loading进度条
Jun 06 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
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
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
Jquery easyUI 更新行示例
2014/03/06 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
耐克美国官网:Nike.com
2016/08/01 全球购物
国际花店:Pickup Flowers
2020/04/10 全球购物
护士试用期自我鉴定
2014/02/08 职场文书
会计核算科岗位职责
2014/03/19 职场文书
男女朋友协议书
2014/04/23 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
导游词之清晏园
2019/11/22 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
Python基础 括号()[]{}的详解
2021/11/07 Python