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实现的在新窗口打开链接的方法小结
Apr 22 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
jquery三个关闭弹出层的小示例
Nov 05 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 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
BBS(php &amp; mysql)完整版(一)
2006/10/09 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
vue实现分页栏效果
2019/06/28 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
TensorFlow实现Softmax回归模型
2018/03/09 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
Python 字符串池化的前提
2020/07/03 Python
软件测试常见笔试题
2012/02/04 面试题
JAVA程序员自荐书
2014/01/30 职场文书
安卓程序员求职信
2014/02/28 职场文书
2014年学校工作总结
2014/11/20 职场文书
初中政治教学工作总结
2015/08/13 职场文书
Django中的JWT身份验证的实现
2021/05/07 Python
Python中json.dumps()函数的使用解析
2021/05/17 Python
Vue的过滤器你真了解吗
2022/02/24 Vue.js
Elasticsearch 聚合查询和排序
2022/04/19 Python