Jquery源码分析---DOM元素(下)

5.3.2 insert

在IE中提供了insertAdjacentElement()方法,这个方 法比insertBefore()和appendChild()好用。为了保证兼容性,像 prototype,mootools,Ext都提供了一个类似的方法,之后在扩展出四个方法。 分别在元素的前面或后面,元素的内部开始或内部结束处四个地方插入元素。

Jquery也一样,提供了domManip(),这个函数和 insertAdjacentElement类似,不同的是它采用回调函数做swhere的类似参数, 可见它更为灵活。

// Dom manipulate操作的函数,对于每个 jQuery对象中元素都运行
  // 由callback操作args转化成的Dom 元素 集合的函数。
domManip : function(args, table, reverse, callback) {
  var clone = this.length > 1, elems;           ①
  // 对当前的jquery对象中每个元素都进行操作
  return this.each(function() {
    if (!elems) {// 把args 转化为dom元 素数组,追加的内容  ②
      elems = jQuery.clean(args, this.ownerDocument);
       if (reverse) elems.reverse ();// 倒序
        }
    var obj = this;
   // Ie Table不兼容,要进行特殊处理
if (table && jQuery.nodeName(this, "table")// 当前元素是table? ③
         && jQuery.nodeName(elems[0], "tr"))// 要追加是tr?
obj = this.getElementsByTagName ("tbody")[0]// 没有tbody,创建追加
  || this.appendChild(this.ownerDocument .createElement ("tbody"));
var scripts = jQuery([]);
jQuery.each (elems, function() {//对于参数转化的每一个dom对象             // 长度大于1,就采用clone。取第一个元素,否则就是本元素
       var elem = clone ? jQuery(this).clone(true)[0] : this; ④

    // 执行所有 scripts 在所有的元素注入之后
  if (jQuery.nodeName(elem, "script"))scripts = scripts.add (elem); ⑤
  else { // 除去内部 scripts,同时保存起来, 为了之 后的计算
    if (elem.nodeType == 1)
scripts = scripts.add(jQuery("script", elem).remove());⑥
        callback.call(obj, elem);                ⑦
     }
   });
  scripts.each(evalScript);                      ⑧
});
}
};

domManip的功能不好形容。从名字的意思来看是指是对dom 元素的操作。其实我们可以理解为它对args参数中的每个元素都传到callback( elem)的回调函数的参数中去。有点像jquery.each(elems,function(i,elem) {})的函数。它的所有的实质的功能都落到回调函数上。与each不一样的是, callback(elem)的this指向每一个jquery对象中的元素。也就是有二个嵌套的 each。一个each是对于jquery对象的操作,遍历每一个元素进行回调操作。第二 个each在回调函数中,就是对于每个元素再次遍历args参数的元素。进行回调操 作。

对于args参数,可以是string,dom元素,(类)数组等,它采用②处 的代码把args转换成dom元素组成的数组(对于有的string转换如td,它会自动 加上<table><tr>)。②处的转换过程只执行一次。Table参数是指 在对表操作时,会不会把追加<tbody>,这个在③处理。①④的代码是为 了防止多次同时运行args中的元素引起的冲突。

⑤⑥⑧可以看出,args 的参数中的元素支持script和元素内部的script运行。最后统一运行这些script 。

时间: 2024-09-13 14:01:42

Jquery源码分析---DOM元素(下)的相关文章

Jquery源码分析---DOM元素(中)

5.2.2 width&heigth 对于元素的宽度和高度,dom元素提供了 client(clientHeight,clientWidth).offset(offsetHeight,offsetwidth). scroll(srollHeight,srollWidth)三种方式,这三种有什么区别呢? client=content+padding.Offset=content+padding+border.Scroll的宽度和 高度都是没有经过scroll的原始宽度和高度.也就是这个一般会大于现

Jquery源码分析---DOM元素(上)

5.1 dom元素的属性 对dom元素的操作,对元素的属性进行操作是很重要的一项.我们可以通过 dom元素的原始方法对元素元素进行操作,但是由于浏览器的兼容等各方面的问 题,jquery和其它的lib一样,都提供了一个完好兼容的操作. 5.1.1 Attr 名称及描述 返回 兼容性 ( ) 当前节点给定Name的属性值     ( , ) 当前节点给定namespace,Name的属性值     ( ) 取当前节点给定name的属性节点.     ( , ) 取当前节点给定namespace,n

jQuery源码分析之jQuery.fn.each与jQuery.each用法_jquery

本文实例讲述了jQuery源码分析之jQuery.fn.each与jQuery.each用法.分享给大家供大家参考.具体分析如下: 先上例子,下面代码的作用是:对每个选中的div元素,都给它们添加一个red类 复制代码 代码如下: $('div').each(function(index, elem){       $(this).addClass('red'); } }); 上面用的的.each,即jQuery.fn.each,其内部是通过jQuery.each实现的 复制代码 代码如下: j

jQuery源码分析-03构造jQuery对象-工具函数_jquery

作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 读读写写,不对的地方请告诉我,多多交流共同进步,本章的的PDF等本章写完了发布. jQuery源码分析系列的目录请查看 http://nuysoft.iteye.com/blog/1177451,想系统的好好写写,目前还是从我感兴趣的部分开始,如果大家有对哪个模块感兴趣的,建议优先分析的,可以告诉我,一起学习. 3.4 其他静态工具函数

Jquery源码分析---导言

jQuery是一个非常优秀的JS库,与Prototype,YUI,Mootools等众多的Js类库 相比,它剑走偏锋,从web开发的实用角度出发,抛除了其它Lib中一些中看但不 实用的东西,为开发者提供了优美短小而精悍的类库.其使用简单,文档丰富, 而且性能高效,能极大地提高web系统的开发效率.因此可以说是web应用开发中 最佳的Js辅助类库之一.大部分开发者正在抛弃Prototype,而选择Jquery做为 他们进行web开发的JS库. 如是开发人员仅仅只知道文档中的简单的使用 方法,却不明

jQuery 源码分析 CSS 操作原理

jquery.fn.css获取当前jQuery所匹配的元素中第一个元素的属性值[$(-).css(cssName),注意这个cssName可以是数组]或给当前jQuery所匹配的每个元素设置样式值[$(-).css(cssname,value) / $(-).css(obj)]; 可以看见函数内部直接调用了jquery.access来处理.access将当前多个元素组成的jQuery对象所匹配的元素分解成单一元素逐个调用第二个参数中的回调function( elem, name, value )

jQuery源码分析之jQuery中的循环技巧详解_jquery

jQuery的源码中有很多值得学习借鉴的技巧,本文即收集了jQuery中出现的各种遍历技巧和场景.具体分析如下: // 简单的for-in(事件) for ( type in events ) { } // 缓存length属性,避免每次都去查找length属性,稍微提升遍历速度 // 但是如果遍历HTMLCollection时,性能提升非常明显,因为每次访问HTMLCollection的属性,HTMLCollection都会内部匹配一次所有的节点 for ( var j = 0, l = ha

jQuery源码分析-01总体架构分析_jquery

1. 总体架构 1.1 自调用匿名函数 self-invoking anonymous function 打开jQuery源码,首先你会看到这样的代码结构: 复制代码 代码如下: (function( window, undefined ) { // jquery code })(window); 1. 这是一个自调用匿名函数.什么东东呢?在第一个括号内,创建一个匿名函数:第二个括号,立即执行 2. 为什么要创建这样一个"自调用匿名函数"呢? 通过定义一个匿名函数,创建了一个"

jQuery源码分析之Callbacks详解

 这篇文章主要分为以下知识:什么是Callbacks.Callbacks模型.基本模块实现.once和auto(memory).源码和源码下载,十分的细致全面,这里推荐给大家,有需要的小伙伴参考下吧.     代码的本质突出顺序.有序这一概念,尤其在javascript--毕竟javascript是单线程引擎. javascript拥有函数式编程的特性,而又因为javascript单线程引擎,我们的函数总是需要有序的执行.优秀代码常常 把函数切割成各自的模块,然后在某一特定条件下执行,既然这些函