关于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 相关文章推荐
推荐dojo学习笔记
Mar 24 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
在网站上应该用的30个jQuery插件整理
Nov 03 Javascript
js判断undefined变量类型使用typeof
Jun 03 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
May 18 Javascript
Ionic默认的Tabs模板使用实例
Aug 29 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
深入浅析vue组件间事件传递
Dec 29 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
利用原生JS实现data方法示例代码
May 28 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
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
两个强悍的php 图像处理类1
2009/06/15 PHP
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
js onclick事件传参讲解
2013/11/06 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
深入理解Python中的元类(metaclass)
2015/02/14 Python
Python中函数参数调用方式分析
2018/08/09 Python
浅析使用Python搭建http服务器
2019/10/27 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
大数据分析用java还是Python
2020/07/06 Python
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
销售业务实习自我鉴定
2013/09/23 职场文书
历史学专业个人的自我评价
2013/10/13 职场文书
大学四年规划书范文
2013/12/27 职场文书
亮化工程实施方案
2014/03/17 职场文书
捐资助学感谢信
2015/01/21 职场文书
责任书格式
2015/01/29 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS