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 相关文章推荐
详解获取jq ul第一个li定位的四种解决方案
Nov 23 Javascript
angular-cli修改端口号【angular2】
Apr 19 Javascript
Vue+Element使用富文本编辑器的示例代码
Aug 14 Javascript
使用socket.io实现简单聊天室案例
Jan 02 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
vue实现移动端悬浮窗效果
Dec 01 Javascript
使用vuepress搭建静态博客的示例代码
Feb 14 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
工作中常用js功能汇总
Nov 07 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实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
(function($){...})(jQuery)的意思
2010/07/22 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
vue轻量级框架无法获取到vue对象解决方法
2019/05/12 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
python中将字典转换成其json字符串
2014/07/16 Python
列举Python中吸引人的一些特性
2015/04/09 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
质检部岗位职责
2013/11/11 职场文书
车间操作工岗位职责
2013/12/19 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
初中优秀学生评语
2014/12/29 职场文书
会议通知范文
2015/04/15 职场文书
物业管理交接协议书
2016/03/24 职场文书