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 相关文章推荐
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
js实现显示当前状态的导航效果代码
Aug 28 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
vue中实现移动端的scroll滚动方法
Mar 03 Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 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的正则处理函数总结分析
2008/06/20 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
javascript学习网址备忘
2007/05/29 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
python zip()函数使用方法解析
2019/10/31 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
中青班党性分析材料
2014/02/16 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
python状态机transitions库详解
2021/06/02 Python