关于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 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
javascript 二进制运算技巧解析
Nov 27 Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
vue通过watch对input做字数限定的方法
Jul 13 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
js判断密码强度的方法
Mar 18 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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
关于手调机和数调机的选择
2021/03/02 无线电
PHP MSSQL 存储过程的方法
2008/12/24 PHP
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
Linux下php5.4启动脚本
2014/08/03 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
python利用有道翻译实现&quot;语言翻译器&quot;的功能实例
2017/11/14 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
python修改字典键(key)的方法
2019/08/05 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
集体备课反思
2014/02/12 职场文书
交通事故协议书范文
2014/10/23 职场文书
先进教师事迹材料
2014/12/16 职场文书
客户付款通知书
2015/04/23 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书