关于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 相关文章推荐
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
jquery 表单取值常用代码
Dec 22 Javascript
理解Javascript_08_函数对象
Oct 15 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 Javascript
QT与javascript交互数据的实现
May 26 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调用Oracle存储过程的方法
2008/09/12 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
jquery中this的使用说明
2010/09/06 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
JavaScript枚举选择jquery插件代码实例
2020/11/17 jQuery
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
Python基本语法经典教程
2016/03/11 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
python定义类self用法实例解析
2020/01/22 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
优良学风班总结材料
2014/02/08 职场文书
小学生作文评语大全
2014/04/21 职场文书
无房证明范本
2014/09/17 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
办公室文员岗位职责
2015/02/04 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis
如何利用python创作字符画
2022/06/25 Python
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python