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 相关文章推荐
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
Javascript 判断函数类型完美解决方案
Sep 02 Javascript
20款超赞的jQuery插件 Web开发人员必备
Feb 26 Javascript
表单元素与非表单元素刷新区别详细解析
Nov 06 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
JavaScript 中的12种循环遍历方法【总结】
May 31 Javascript
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
原生JS实现分页
Apr 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
PHP 函数语法介绍一
2009/06/14 PHP
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
python求pi的方法
2014/10/08 Python
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
python列出目录下指定文件与子目录的方法
2015/07/03 Python
python定位xpath 节点位置的方法
2019/08/27 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
附答案的Java面试题
2012/11/19 面试题
外贸业务员岗位职责
2013/11/24 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
详解python的内存分配机制
2021/05/10 Python