DOM操作包括添加、前置,前,后,用,appendto,prependto,都在,,简单。其核心处理功能dommanip。

DOM操作函数的最后五种方法仍然使用前五种方法,源代码


jquery.each({
appendto:添加
prependto:在
insertBefore:在
都是:后
简单的:用
}函数(名称,原始){
函数(选择器){
VaR elems,
我= 0,
RET = {,
插件(选择器),
最后,insert.length - 1;
为((i =上;i +){){
= = = =我elems最后这(真):this.clone;
jQuery(插入{我}){原}(单元);
现代浏览器调用应用程序将把jQuery对象作为数组,但旧版本的IE需要使用。
core_push.apply(RET,elems.get());
}
返回this.pushstack(RET);
};
});


有插入节点本地浏览器的两种方法:appendChild和inserbefore,jQuery采用这两种方法展开下列方法

jquery.fn.append使用this.appendchild(元)

jquery.fn.prepend使用this.insertbefore(元素,这第一个孩子。)

jquery.fn.before使用this.parentnode.insertbefore(元素,这个);

jquery.fn.after使用this.parentnode.insertbefore(元素,这个兄弟);

jquery.fn.replacewith使用this.parentnode.insertbefore(元素,这个兄弟);

看一个例子的源代码。


附加:函数(){
返回this.dommanip(争吵,真的,功能(元){)
如果(this.nodetype = 1 this.nodetype 11 this.nodetype | | | = = = = = | = 9){
this.appendchild(元);
}
});
}


根据上面的源代码,想dommanip是符合当前jQuery对象元素的遍历,每个元素的来电回调节点和插入(如果它是一个字符串,需要创建一个文件片段节点)作为参数传给回调函数执行传入的回调。

然后分析dommanip看看猜right.dom是DOM元素和手法的缩写操作和连接的字面意思是DOM操作。

A. dommanip分析:功能(参数、表格、回调)



DOM元素或HTML代码插入到参数

不表需要修复的tbody,这是优化的结果

callback回调函数,执行格式callback.call(Target元素的背景下,将插入到文档片段/一个DOM元素)

先看看这个过程,再看看细节。

第一步是变量的初始化,inoclone将用在后面,如果超过一个,当前jQuery元素(n>1)这意味着构造的文档片段需要使用N,你要克隆(n-1),和碎片文件本身的不足n时间;值的参数args的第一要素,价值是一个反函数将做特殊处理;


无功第一,节点,hasscripts,
脚本,doc,片段,
我= 0,
我this.length,
设置=此,
inoclone = L - 1,
价值=参数{ 0 },
功能= jquery.isfunction(价值);


第二步是专门处理,配合当前jQuery对象调用dommanip元素。有两种特殊情况。首先,如果输入节点是一个功能(即,值是一个函数),然后每一个元素的jQuery对象匹配需要计算函数的值并把它放到dommanip作为一个节点。其次,在WebKit的领导下,我们不能克隆文件片段的克隆文件检查不被重用,所以只有当前jQuery对象相匹配的每个元素调用dommanip处理一下。


/ / WebKit的下,我们不能克隆的片段包含文件检查
如果| |(功能!(L≤1 | |类型的值!= =字符串jquery.support.checkclone | | | |!rchecked.test(价值))){
返回this.each(函数(指数){
无功自set.eq(指数);
/ /如果args { 0 }是一个函数,执行函数返回结果代替原来的参数{ 0 }
如果(功能){
args { 0 } = value.call(这个指标,表self.html():未定义);
}
Self.domManip(args,表,回调);
});
}


第三步,处理正常的情况下,使用传入的节点建立文档片段并将其插入到文档中。建在这需要重复使用的文档片段,不同于第二步过程。值得注意的是,如果脚本节点需要完成加载之后执行。看沿源秩序的过程

构建文档片段


片段= jquery.buildfragment(args,这{ 0 }。ownerdocument,假,这个);
首先fragment.firstchild;
如果(fragment.childnodes.length = 1){
片段=第一;
}


脚本与它分离。其中之一是一个功能disablescript,改变脚本标签的类型的值以确保安全。原始类型值是文本,并将其更改为或false。


脚本= jquery.map(getAll(片段,脚本),disablescript);
hasscripts = scripts.length;


文档片段插入页


为(;;i;<;i +;+){
节点=片段;
如果(i)!= inoclone){
节点= jquery.clone(节点,真的,真的);
为后续恢复保存复制脚本的引用
如果(hasscripts){
JQuery.merge(脚本、getAll(节点,脚本));
}
}
Callback.call(
表jquery.nodename(这{我},表)
FindOrAppend(本{我},把):
这个{ },
结,
我
);
}


执行脚本,在两种情况下,远程使用ajax处理,本地直接执行。


如果(hasscripts){
doc =脚本{ 1 } ownerdocument scripts.length;
重新启用 / /脚本
JQuery.map(脚本、restorescript);
在第一个文档中执行可执行脚本
为(i = 0;i < hasscripts;i++){
节点=脚本{ };
如果(rscripttype.test(node.type | | )
jQuery。_data(节点,globaleval )jquery.contains(DOC、节点)){
如果(节点)
Ajax是可用的/希望…
jquery.ajax({
网址:node.src,
键入:获取
DataType:剧本
异步:假,
全球:假,
抛出:真的
});
{人}
(jquery.globaleval(node.text node.textcontent node.innerhtml | | | | | | (rcleanscript)、更换));
}
}
}
}


B. DOM手术延期

jquery.fn.text


JQuery.fn.text:功能(价值){
返回jquery.access(这个功能(价值){)
返回值=未定义
JQuery.text(本):
(这个空)(。追加(这{ 0 }这{ 0 }。ownerdocument文件| |)。CreateTextNode(值));
},null,值,参数,长度);
}


最终的价值= = =定义的jquery.text(这):this.empty(。追加((这{ 0 })这{ 0 }。ownerdocument | |文件)。CreateTextNode(值));

jquery.text = sizzle.gettext;

jquery.fn.html

功能进行jquery.access


JQuery.fn.html:功能(价值){
返回jquery.access(这个功能(价值){…},null值,参数。长度);
}


如果没有参数表示,则为值


如果(值=未定义){
返回elem.nodetype = 1
elem.innerhtml.replace(rinlinejquery,):
未定义;
}


否则,如果你可以添加内容innerHTML。单击参考兼容性问题


/ /看看我们可以走捷径,只要使用innerHTML
/ /需要代码脚本|风格|链接不能使用innerHTML执行
/ / htmlserialize:确保链路节点可以正确序列化使用innerHTML,这需要在IE浏览器的元素
/ / leadingwhitespace:即条使用a.innerhtml开始空白
不需要添加额外的元素结束标记或外部包标签
如果(typeof值=字符串rnoinnerhtml.test(价值)!
(jquery.support.htmlserialize | |!rnoshimcache.test(值))
(jquery.support.leadingwhitespace | |!rleadingwhitespace.test(值))
wrapmap {!(rtagname.exec(价值)| | {}
价值= value.replace(rxhtmltag,);
{试
为(;;i;<;i +;+){
删除元素节点和缓存,以防止内存泄漏。
elem =这{我} | | { };
如果(elem.nodetype = 1){
jquery.cleandata(getAll(元,假));
elem.innerhtml =价值;
}
}
元= 0;
/ /如果你使用innerHTML抛出一个异常,使用另一种方法
catch(e){ }
}


如果你不能使用innerHTML或使用失败(抛出异常),使用备用方法添加


备份方法,使用追加添加节点
如果(元){
This.empty()加(值);
}
U3000 U3000
JQuery.fn.wrapAll(包装的所有匹配的元素与一个单一的标签)
处理步骤:
传入参数是传递函数结果的函数。
如果(jquery.isfunction(HTML)){
返回this.each(功能(我){
jQuery(this)。WrapAll(html.call(这个,我));
});
}
创建包层
元素以获取包裹标签,包装目标周围。
VaR套= jQuery(HTML,这{ 0 }。ownerdocument)。情商(0),Clone(真的);
如果(这{ 0 }。parentNode){
Wrap.insertBefore(本{ 0 });
}


用包包装当前jQuery对象


Wrap.map(function(){()
var elem =这;
而(elem.firstchild elem.firstchild.nodetype = 1){
elem.firstchild elem =;
}
返回元素;
})追加(这个);


注意:目前jQuery对象只匹配一个元素。如果有不止一个,那是不推荐的。本案慎用。

在一个简单的例子中,原来的DOM是(稍后使用这个例子)







我是对的
$(后#中心)。WrapAll(),DOM成为

U3000 U3000
U3000 U3000 U3000 U3000
U3000 U3000 U3000 U3000 U3000 U3000
U3000 U3000 U3000 U3000
U3000 U3000

我是对的


注意:如果当前jQuery匹配多个元素,如原始DOM执行('div美元),WrapAll(),结果DOM成为



U3000 U3000
U3000 U3000


我是对的



看到的结果,#中心是# SS的父母,结果成为# SS的兄弟节点。

JQuery.fn.wrapInner(包装指定的HTML结构的每个匹配元素的所有子节点外)

处理步骤:

传入参数是传递函数结果的函数。


如果(jquery.isfunction(HTML)){
返回this.each(功能(我){
jQuery(this)。WrapInner(html.call(这个,我));
});
}


遍历jQuery对象数组,每个元素的内容(获得的所有子节点)的内容,然后用warpall包的内容


返回this.each(函数(){()
var = jQuery(此),
内容= self.contents();

如果(内容,长度){
contents.wrapall(HTML);

{人}
Self.append(HTML);
}
});


或使用原始DOM在上面的例子中,在执行$('div)。WrapInner(的),结果DOM成为



U3000 U3000
U3000 U3000 U3000 U3000
U3000 U3000 U3000 U3000 U3000 U3000
U3000 U3000 U3000 U3000 U3000 U3000 U3000 U3000
U3000 U3000 U3000 U3000 U3000 U3000
U3000 U3000 U3000 U3000
U3000 U3000


U3000 U3000
我是对的
U3000 U3000



JQuery.fn.wrap(包装指定的HTML结构之外的每个匹配的元素)

一个wrapall包用于jQuery的每个元素,分别


返回this.each(功能(我){
jQuery(this)。WrapAll(html.call功能(这个,我):HTML);
});


一行$后('div)。包('),结果DOM成为



U3000 U3000
U3000 U3000 U3000 U3000
U3000 U3000 U3000 U3000 U3000 U3000
U3000 U3000 U3000 U3000 U3000 U3000 U3000 U3000
U3000 U3000 U3000 U3000 U3000 U3000
U3000 U3000 U3000 U3000
U3000 U3000


我是对的



JQuery.fn.unwrap(除去每个匹配元素的父元素)

用用用的所有子节点的元素的父母匹配替换的匹配元素的父,父节点是身体/ HTML /文件不能删除


返回this.parent(),()函数(){
如果(!JQuery.nodeName(这一点,身体)){
jQuery(this)。ReplaceWith(这。子);
}
})();
为执行后('div)。包(),结果DOM成为

U3000 U3000

我是对的
U3000 U3000

JQuery.fn.remove(从文件中删除匹配的元素)

还可以使用选择器来进一步减少删除的范围,只删除与指定选择器匹配的当前匹配元素的一部分。

删除()函数与删除()函数比较,同时删除绑定到元素(分离())的附加数据(数据())和事件处理程序。


为(;((;(elem =这{我})!= NULL;i + +){
如果jquery.filter | |(选择器!(选择器,{元})。长> 0){
keepdata分离 / /参数输入正确,不要删除缓存
如果(keepdata elem.nodetype = = = { 1!)
清除缓存
jquery.cleandata(getAll(元));
}
如果(元素。parentNode){
如果(keepdata jquery.contains(elem.ownerdocument,元素)){
setglobaleval(getAll(元素,脚本));
}
elem.parentnode.removechild(元);
}
}
}


你可以看到,有一个重要的功能cleandata,这是用来清除缓存:遍历每个节点单元和处理每个节点单元。

1。获取当前元素对应的缓存


ID =元internalkey } {;
数据缓存;


2。如果有绑定事件,则遍历绑定事件。


如果(数据事件){
对于(键入数据事件){
如果(特殊{类型}){
JQuery.event.remove(元素、类型);
/ /这是一条捷径,避免jquery.event.remove开销。
{人}
JQuery.removeEvent(元素、类型、数据处理。);
}
}
}


三.如果jquery.event.remove不删除缓存,缓存中移除manually.ie需要做一些协调处理,并最终删除历史记录保存在core_deletedids


当jquery.event.remove缓存 / /不删除,删除缓存
如果(缓存{ }){
删除缓存{ };
/ / IE不允许使用删除从节点删除扩展功能,
/ /也可以使用removeattribute函数文件节点;
我们必须处理所有这些案件,
如果(deleteexpando){
删除元素internalkey } {;
如果(typeof elem.removeattribute别的}!= = core_strundefined){
elem.removeattribute(internalkey);
{人}
{ } = null元素internalkey;
}
core_deletedids.push(ID);
}


jquery.fn.detach


分离:函数(选择器){
返回this.remove(选择器,真的);
},




JQuery.fn.empty(排空所有的每个匹配元素的含量(所有子节点))

该函数将删除每个匹配元素的所有子节点,包括所有文本节点、带注释的节点和所有类型的节点。它将清空相应的缓存数据。


为(;((;(elem =这{我})!= NULL;i + +){
防止内存泄漏移除元素节点缓存
如果(elem.nodetype = 1){
jquery.cleandata(getAll(元,假));
}
删除所有子节点
而(元素。firstChild){
elem.removechild(元素。第一个孩子);
}
< < < > > 9,选择节点选项需要为空。
如果(elem.options jquery.nodename(元素,选择)){
elem.options.length = 0;
}
}