关于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 相关文章推荐
制作特殊字的脚本
Jun 26 Javascript
Javascript的IE和Firefox兼容性汇编
Jul 01 Javascript
另类调用flash无须激活的方法
Dec 27 Javascript
javascript 限制输入脚本大全
Nov 03 Javascript
myeclipse安装jQuery插件的方法
Mar 29 Javascript
javascript alert乱码的解决方法
Nov 05 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
Jun 18 Javascript
JavaScript多线程详解
Aug 12 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 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中的实现trim函数代码
2007/03/19 PHP
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
会计专业个人自我鉴定
2014/03/21 职场文书
品质口号大全
2014/06/17 职场文书
公司户外活动总结
2014/07/04 职场文书
职工小家建设活动方案
2014/08/25 职场文书
家装电话营销开场白
2015/05/29 职场文书
亮剑观后感600字
2015/06/05 职场文书
2019各种承诺书范文
2019/06/24 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript