关于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 相关文章推荐
jquery实现的超出屏幕时把固定层变为定位层的代码
Feb 23 Javascript
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
javascript完美拖拽的实现方法
Sep 29 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
js实现AI五子棋人机大战
May 28 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 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
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
动态调用CSS文件的JS代码
2010/07/29 Javascript
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
2016/08/02 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
彪马日本官网:PUMA日本
2019/01/31 全球购物
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
企业宣传方案
2014/03/04 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
优秀的个人求职信范文
2014/05/09 职场文书
相亲大会策划方案
2014/06/05 职场文书
横幅标语大全
2014/06/17 职场文书
心得体会的写法
2014/09/05 职场文书
顶岗实习计划书
2015/01/16 职场文书
复兴之路展览观后感
2015/06/02 职场文书
单位车辆管理制度
2015/08/05 职场文书
python实现简单聊天功能
2021/07/07 Python