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 引起的安全问题
Dec 27 Javascript
Javascript解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
Feb 23 Javascript
jquery png 透明解决方案(推荐)
Aug 21 Javascript
AngularJS压缩JS技巧分析
Nov 08 Javascript
原生js实现轮播图的示例代码
Feb 20 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
angularjs http与后台交互的实现示例
Dec 21 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 Javascript
node中使用shell脚本的方法步骤
Mar 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
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
JavaScript 字符串与数组转换函数[不用split与join]
2009/12/13 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
详解Python是如何实现issubclass的
2019/07/24 Python
python3获取url文件大小示例代码
2019/09/18 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
银行门卫岗位职责
2013/12/29 职场文书
入党积极分子思想汇报范文
2014/01/05 职场文书
乌鸦喝水教学反思
2014/02/07 职场文书
协议书的格式
2014/04/23 职场文书
创优争先心得体会
2014/09/11 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
课题研究阶段性总结
2015/08/13 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
7个关于Python的经典基础案例
2021/11/07 Python
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers