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 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
javascript GUID生成器实现代码
Oct 31 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
Jan 19 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
vue的常用组件操作方法应用分析
Apr 13 Javascript
详解如何在vue项目中使用layui框架及采坑
May 05 Javascript
JavaScript实现省市区三级联动
Feb 13 Javascript
vue+iview分页组件的封装
Nov 17 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
PHP实时显示输出
2008/10/02 PHP
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
php IP转换整形(ip2long)的详解
2013/06/06 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
accesskey 提交
2006/06/26 Javascript
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
jquery 日期控件datepicker属性详细解析
2013/11/08 Javascript
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
期末自我鉴定
2014/02/02 职场文书
考察现实表现材料
2014/05/19 职场文书
图书室标语
2014/06/21 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
Flask搭建一个API服务器的步骤
2021/05/28 Python
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python