关于jQuery中的end()使用方法


Posted in Javascript onJuly 10, 2011

在官方的API上是这样描述end()方法的:“回到最近的一个"破坏性"操作之前。即,将匹配的元素列表变为前一次的状态。”;
看样子好像是找到最后一次操作的元素的上一元素,在如下的例子中:
html代码:

<div>测试内容1</div> 
<div>测试内容2</div>

jQuery代码:
$('<p>新增内容</p>').appendTo('div').addClass('c1').end().addClass('c2');

得到的结果是:
<div>测试内容1 <p class="c1 c2">新增内容</p></div> 
<div>测试内容2 <p class="c1">新增内容</p></div>

这里我就有一点不太明白了,怎么只有第一个<p>标签有两个样式,end()方法后返回的是什么,在火狐里添加了监控,得到如下结果:
1.$('<p>新增内容</p>').appendTo('div')返回的是:[p,p]对象数组,即新增后的两个p标签;
2.$('<p>新增内容</p>').appendTo('div').addClass('c1')返回的是:[p.c1,p.c1]对象数组,即添加了c1类样式后的p对象数组;
3.$('<p>新增内容</p>').appendTo('div').addClass('c1').end()返回的是[p.c1],是第1个<div>中的<p>,在2操作中,最后“破坏”的是第2个<div>中的 <p>,所以他的前一次操作的对象是第1个<div>中的<p>,返回的就是它;
4.$('<p>新增内容</p>').appendTo('div').addClass('c1').end().addClass('c2')返回的仍然是第1个<div>中的<p>;
现在算是有点明白了,关键是要搞清楚最后一次操作的元素的上一元素是什么。
Javascript 相关文章推荐
javascript动画效果类封装代码
Aug 28 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
jquery操作select大全
Apr 25 Javascript
node.js入门教程
Jun 01 Javascript
jquery使用$(element).is()来判断获取的tagName
Aug 24 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 Javascript
Echarts如何重新渲染实例详解
May 30 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 Javascript
动感效果的TAB选项卡jquery 插件
Jul 09 #Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
Jul 08 #Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 #Javascript
jquery 选项卡效果 新手代码
Jul 08 #Javascript
基于jquery实现图片广告轮换效果代码
Jul 07 #Javascript
jquery调用wcf并展示出数据的方法
Jul 07 #Javascript
基于json的jquery地区联动效果代码
Jul 06 #Javascript
You might like
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
php 批量替换html标签的实例代码
2013/11/26 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
jquery+php随机生成红包金额数量代码分享
2015/08/27 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
微信小程序之MaterialDesign--input组件详解
2017/02/15 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
JS实现异步上传压缩图片
2017/04/22 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
浅析Vue实例以及生命周期
2018/08/14 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
在Django框架中编写Contact表单的教程
2015/07/17 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
python实现月食效果实例代码
2019/06/18 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
土木工程毕业生自荐信
2013/11/12 职场文书
业务代表的岗位职责
2013/11/16 职场文书
大学生求职意向书
2015/05/11 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书