jQuery源码分析之appendTo,prependTo,insertBefore,insertAfter,replaceWith函数
2015-10-12 09:19
495 查看
源码如下:请提前阅读阅读
注意:appendTo,prependTo,insertBefore,insertAfter,replaceAll底层调用的都是append,prepend,before,after,replaceWith,所以如果传入的参数是文档中已经存在的对象那么该对象将会从原来的位置上消失!
总结:
(1)这些方法返回的对象是一个jQuery对象,该对象保存了所有应该被添加的对象,也就是参数中的那些对象。之所以返回jQuery对象是通过pushStack完成的!
(2)该方法底层调用的before/after等方法,所以也会发生"buildFragment不创建对象(参数对象和调用对象一样)/元素移动(该DOM已经存在)"现象!
(3)上面ret中放的是副本,因为上面是this.clone(true),而且是会复制该元素的所有的数据和事件!
var deletedIds = []; var push = deletedIds.push; jQuery.each({ appendTo: "append", prependTo: "prepend", insertBefore: "before", insertAfter: "after", replaceAll: "replaceWith" }, function( name, original ) { jQuery.fn[ name ] = function( selector ) { var elems, i = 0, ret = [], //通过selector获取到选择的对象! insert = jQuery( selector ), //传入参数的个数,下标的最大值 last = insert.length - 1; for ( ; i <= last; i++ ) { //如果是传入参数的最后一个对象的下标,那么返回调用对象,否则返回克隆对象 //这里elems是jQuery对象 elems = i === last ? this : this.clone(true); //把参数对象封装为jQuery对象,调用该jQuery对象的original方法,也就是 //底层的append,prepend,before,after,replaceWith方法,传入的参数 //调用对象! jQuery( insert[i] )[ original ]( elems ); // Modern browsers can apply jQuery collections as arrays, //but oldIE needs a .get() //现代浏览器可以把jQuery集合作为数组,但是旧版本的IE浏览器不行,所以把elems //作为JS集合对象! //这个ret是空数组[] push.apply( ret, elems.get() ); } //这里的length是2,因为调用者对象的length是2,$("p").length=2 // alert(ret.length); //打印"n1n3"说明ret里面放入了两次调用对象组成的DOM对象集合 //alert(ret[0].id+ret[1].id); return this.pushStack( ret ) }; });$("p").appendTo("#n3");
注意:appendTo,prependTo,insertBefore,insertAfter,replaceAll底层调用的都是append,prepend,before,after,replaceWith,所以如果传入的参数是文档中已经存在的对象那么该对象将会从原来的位置上消失!
总结:
(1)这些方法返回的对象是一个jQuery对象,该对象保存了所有应该被添加的对象,也就是参数中的那些对象。之所以返回jQuery对象是通过pushStack完成的!
(2)该方法底层调用的before/after等方法,所以也会发生"buildFragment不创建对象(参数对象和调用对象一样)/元素移动(该DOM已经存在)"现象!
(3)上面ret中放的是副本,因为上面是this.clone(true),而且是会复制该元素的所有的数据和事件!
相关文章推荐
- Cocos2d-x 地图步行实现1:图论Dijkstra算法
- Android Studio 模拟器对应键盘快捷键映射
- windows下Qt5.4.2 for android开发环境配置
- android 与servlet json数据交互
- ios 下创建,删除文件夹的方法
- Object-c 面向对象之封装
- android Drawable各种类型使用
- Android NDK编程浅入深出之--Android.mk
- iOS 不规则的ImageView
- Android 项目实践(一)——开发流程
- Object-C 继承.重写.重载
- iOS图片内存优化
- swift中cell的两种创建区别和extension的使用。让我们开发更有条理
- Android Material Design动画
- Android应用程序与SurfaceFlinger服务的连接过程分析
- android四大组件
- iOS开发笔记--ios 画图总结
- iOS scrollView循环自动滚动
- android的Activity中onCreate方法参数用途
- 【Android接口实现】PhotoView——单点支持/多图像缩放,实现了触摸