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 相关文章推荐
Ext.MessageBox工具类简介
Dec 10 Javascript
jquery 学习之二 属性(html()与html(val))
Nov 25 Javascript
css值转换成数值请抛弃parseInt
Oct 24 Javascript
ie7+背景透明文字不透明超级简单的实现方法
Jan 17 Javascript
jQuery中cookie插件用法实例分析
Dec 04 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
jquery实现垂直手风琴菜单
Mar 04 jQuery
extjs4图表绘制之折线图实现方法分析
Mar 06 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下MAIL的另一解决方案
2006/10/09 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
django rest framework serializers序列化实例
2020/05/13 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
python 如何引入协程和原理分析
2020/11/30 Python
中国跨境电商:Tomtop
2017/03/16 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
英语感恩演讲稿
2014/01/14 职场文书
办公室文员自荐书
2014/02/03 职场文书
对孩子的寄语
2014/04/09 职场文书
中班下学期个人总结
2015/02/12 职场文书
2014年个人年终总结
2015/03/09 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL