appendTo()小体会

　　今天看jquery API发现一个有趣的现象，调用appendTo()后，发现调用的对象从原来的位置上消失了，而是出现在appendTo()的参数里

1 <p>this is a p</p>
2 <div></div>
3 <div></div>
4 <div></div>
5 <div></div>

然后执行一句$('p').appendTo('div')后，firebug截图：

原来的p没了，消失了，那么他是彻底消失了吗？我们验证一下：

添加end()后，即$('p').appendTo('div').end()后，firebug截图：

html结构没变，但是console.log结果变了，然后在添加一个类名看看，

$('p').appendTo('div').end().addClass('test')执行后，firebug截图：

可以看出添加了一个test类名，但是为什么只有1个呢，为什么不是4个呢？然后再去掉end()看看，

$('p').appendTo('div').addClass('test')执行后，firebug截图：

这样就是4个test了，但是这是为什么呢？为什么加了end()就只给第一个p加test，去掉后就给4个p加test？第一个p是我们原来的p吗？

其实这个在API里面已经有解释：

用红线画的才是最重要的，console里面打出的是所有被追加的内容，因为被添加到4个div里面，所以他返回4个p的对象，（jq选择器返回的都是一个对象集合），然而我们先前选中的p只有一个，所以这4个p里有可能包含原来的一个p，那么如果有的话，他为什么从原来的位置到了新的位置呢？

这就涉及到appendTo这个方法执行顺序问题了。appendTo()执行顺序是先从原来的位置删除这个元素，然后把这个元素插入到指定的位置。api里面有一段解释：，也就是如果有多个匹配的元素，那么就会克隆要插入的元素，然后插入到每个匹配的目标里，最后返回一个由原始元素和克隆元素组成的集合。所以理解了这个就不难理解为什么上面4个p里有一个原来的p，为什么他不在原来的位置出现在新的位置的困惑。那么，要想回到最初选择的那个p，用end()。这里又涉及到end()的用法，对一个jquery对象执行一串方法，就相当于把每一个方法的执行结果压入堆栈，而end()就是pop出最后一个方法的执行结果，将状态像倒带一样倒回前一个状态。这里appendTo()将执行结果到每一个匹配的div上，所以一end()将他倒回只有一个p的时代。api里这样解释：

转载于:https://www.cnblogs.com/different/archive/2012/12/25/2832122.html

appendTo()小体会相关推荐

最近关于编程学习的一点小体会
从来没有如此专注于编程过,即使在大一学习课程中学习C++时也未有过这样主动,不觉厌烦,就更不用说Java学习的时候了,那时候就是上课吧,然而感觉效率一点也没有,根本没有心去学习,而那时也觉得编程如此难 ...
在淘宝卖考研资料——浙大材料力学835的一些小体会
我兼职卖浙大土木材料力学835一些本专业的考研资料,在本行业做了有4年了,竞争对手是专门卖资料的大公司.因为个人科研方向就是力学,学的不差,每年有能力做课程辅导和售后服务(做难题,包括材料力学和土力学 ...
Matlab使用的一点小体会（不定时扩充修缮，琐碎东西存档）
1.在matlab能用.*这个乘就别用*这个乘.这是为了在引用matlab内置函数时,降低错误的可能性.例如integral函数,如果被积函数有用到乘法,被积函数中用到的乘必须是点乘.integral ...
setText()的一点小体会
使用setText()时,括号中只能是String型的,但是只要加上(""+variable)就可以将变量显示出来
2018安博会——参观小体会
1.同质化严重,各家基本没有什么特色.到处充斥着以视频分析为基础的几个应用,像人脸识别.车辆识别,加上AI作为噱头,包装出大同小异的应用平台.海康.大华等各大厂商也在走同样的路子,接下来只会是价格战, ...
使用滴答清单的一点小体会
滴答清单是一款专注于个人时间管理的功能强大的软件,基于各种例如时间四象限.番茄钟等理论开发功能,从去年大概是六七月份开始使用,如今已经一年有余了,期间一直使用它来管理时间.虽然不是尽善尽美,但我认为真 ...
【最新最炫的输入法-搜狗云输入法使用小体会】
最新最炫的输入法最近最火的IT词绝对属于"云计算",它是通过网络为媒介,按需获得资源的一种应用模式.何为"云",它代表着无穷无尽,意指可取资源丰富,随时随地能 ...
10个重构小技巧，去掉代码中的S味
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章来源 | https://urlify.cn/yme6Vz 本次我 ...
最实用的10个重构小技巧排行榜，您都用过哪些呢？
LZ最近一直在研究虚拟机源码,可惜目前还只是稍微有一点点头绪,无法与各位分享,庞大的JAVA虚拟机源码果然不是一朝一夕能搞定的,LZ汗颜. 本次我们抛开JAVA虚拟机源码这些相对底层的东西,LZ来与各 ...

appendTo()小体会

appendTo()小体会相关推荐

最新文章

热门文章