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 相关文章推荐
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
Vue 滚动行为的具体使用方法
Sep 13 Javascript
node内置调试方法总结
Feb 22 Javascript
JS实现调用本地摄像头功能示例
May 18 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
vue+iview/elementUi实现城市多选
Mar 28 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 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
2019/04/16 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
详解python和matlab的优势与区别
2019/06/28 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
学python爬虫能做什么
2020/07/29 Python
python request 模块详细介绍
2020/11/10 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
医院实习介绍信
2014/01/12 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
爱护花草树木的标语
2014/06/11 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书
子女赡养老人协议书
2016/03/23 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript
前端JavaScript大管家 package.json
2021/11/02 Javascript
tree shaking对打包体积优化及作用
2022/07/07 Java/Android