http://www.imooc.com/static/lib/jquery/1.9.1/jquery.js

js中如何創(chuàng)建html節(jié)點(diǎn)和屬性

創(chuàng)建流程：

1凛篙、創(chuàng)建節(jié)點(diǎn)：document.createElement();

2阔加、添加節(jié)點(diǎn)的屬性:setAttribute

3默勾、把節(jié)點(diǎn)加入到文檔中

涉及到的方法：

document.createElement(); 創(chuàng)建元素

setAttribute() ? ?設(shè)置屬性和屬性值

innerHTML ? ?給節(jié)點(diǎn)添加文本

appendChild() ? ?加入文檔

document.querySelector('body'); // 獲取文檔中第一個(gè)body元素

jQuery節(jié)點(diǎn)創(chuàng)建與屬性的處理

創(chuàng)建元素節(jié)點(diǎn)

$("html結(jié)構(gòu)")

例子：$("");

創(chuàng)建文本節(jié)點(diǎn)

例子：$("

我是文本節(jié)點(diǎn)

創(chuàng)建屬性節(jié)點(diǎn)

$("

我是文本節(jié)點(diǎn)

DOM內(nèi)部插入append()與appendTo()父子關(guān)系處理,在結(jié)尾插入

動(dòng)態(tài)創(chuàng)建的元素是不夠的绩脆，它只是臨時(shí)存放在內(nèi)存中，最終我們需要放到頁(yè)面文檔并呈現(xiàn)出來(lái)百姓。

所以jq定義了2個(gè)方法將元素當(dāng)作某一個(gè)元素的子元素插入到文檔中

append(content)向每個(gè)匹配的元素追加內(nèi)容

append()前面是被插入的對(duì)象楣颠，后面是要在對(duì)象內(nèi)插入的元素內(nèi)容

A.append(B) ? 把B插入到A中

appendTo(content)

A.appendTo(B) ? 把A插入到B中

appendTo()前面是要插入的元素內(nèi)容，而后面是被插入的對(duì)象

DOM外部插入after()與before()兄弟關(guān)系處理

.after(content) ? ? ?在匹配元素集合中的每個(gè)元素后面插入指定內(nèi)容夏志，作為兄弟節(jié)點(diǎn)

例子：

$be.before('

測(cè)試before乃坤，前面

.before(content)在匹配元素集合中的每個(gè)元素前面插入指定內(nèi)容沟蔑，作為兄弟節(jié)點(diǎn)

$af.after('

測(cè)試after,后面

備注：

1、before與after都是用來(lái)對(duì)相對(duì)選中元素外部增加相鄰的兄弟節(jié)點(diǎn)

2瘦材、2個(gè)方法都是都可以接收HTML字符串厅须，DOM 元素，元素?cái)?shù)組食棕，或者jQuery對(duì)象朗和，用來(lái)插入到集合中每個(gè)匹配元素的前面或者后面

3、2個(gè)方法都支持多個(gè)參數(shù)傳遞after(div1,div2,....) 可以參考右邊案例代碼

DOM內(nèi)部插入prepend()與prependTo() ?父子關(guān)系簿晓，在被選元素前面插入

.prepend(content) ? ?將指定元素插入到匹配元素里面作為它的第一個(gè)子元素 (如果要作為最后一個(gè)子元素插入用.append()).

例子：

$(".aaron1").prepend("

測(cè)試prepend333

.prependTo(被選元素) ? ?正好相反，將要被插入的內(nèi)容寫(xiě)在方法的前面憔儿，可以是選擇器表達(dá)式或動(dòng)態(tài)創(chuàng)建的標(biāo)記忆植，待插入內(nèi)容的容器作為參數(shù)。同.appendTo()

$("

測(cè)試prependTo444

以下都是父子關(guān)系朝刊，父元素和直接子元素

append()向每個(gè)匹配的元素內(nèi)部追加內(nèi)容

prepend()向每個(gè)匹配的元素內(nèi)部前置內(nèi)容

appendTo()把所有匹配的元素追加到另一個(gè)指定元素的集合中

prependTo()把所有匹配的元素前置到另一個(gè)指定的元素集合中

DOM外部插入insertAfter()與insertBefore()

.insertBefore(content) ?／／在目標(biāo)元素前面插入集合中每個(gè)匹配的元素

例子：

$("

測(cè)試insertBefore

.insertAfter(content) ? ? ／／在目標(biāo)元素后面插入集合中每個(gè)匹配的元素

$("

測(cè)試afterBefore

.before()和.insertBefore()實(shí)現(xiàn)同樣的功能拾氓。主要的區(qū)別是語(yǔ)法——內(nèi)容和目標(biāo)的位置。 對(duì)于before()選擇表達(dá)式在函數(shù)前面劫樟，內(nèi)容作為參數(shù)痪枫，而.insertBefore()剛好相反，內(nèi)容在方法前面叠艳，它將被放在參數(shù)里元素的前面

.after()和.insertAfter() 實(shí)現(xiàn)同樣的功能奶陈。主要的不同是語(yǔ)法——特別是（插入）內(nèi)容和目標(biāo)的位置。 對(duì)于after()選擇表達(dá)式在函數(shù)的前面附较，參數(shù)是將要插入的內(nèi)容吃粒。對(duì)于 .insertAfter(), 剛好相反，內(nèi)容在方法前面拒课，它將被放在參數(shù)里元素的后面

.before徐勃、after與insertBefore事示。insertAfter的除了目標(biāo)與位置的不同外，后面的不支持多參數(shù)處理

DOM節(jié)點(diǎn)刪除之empty()的基本用法

.empty() ?移除指定元素當(dāng)子節(jié)點(diǎn),僻肖，但是不移除自身元素

例子： $("#test").empty() ? 移除#test元素下的所有子元素肖爵，包括后代元素，但是并不會(huì)刪除#test這個(gè)元素本身

DOM節(jié)點(diǎn)刪除之remove()的有參用法和無(wú)參用法

.remove(無(wú)參數(shù)) ／／刪除該指定元素和指定元素下的所有后代元素

.remove(有參數(shù)） ?／／可以傳遞一個(gè)選擇器表達(dá)式用來(lái)過(guò)濾將被移除的匹配元素集合臀脏，可以選擇性的刪除指定的節(jié)點(diǎn)

例子： $("p").remove("p:contains('3')"); ? // 刪除p元素劝堪，以及p元素內(nèi)部所有的元素除了包含文本3的元素，其他所有刪除

empty方法

嚴(yán)格地講揉稚，empty()方法并不是刪除節(jié)點(diǎn)秒啦，而是清空節(jié)點(diǎn)，它能清空元素中的所有后代節(jié)點(diǎn)

empty不能刪除自己本身這個(gè)節(jié)點(diǎn)

remove方法

該節(jié)點(diǎn)與該節(jié)點(diǎn)所包含的所有后代節(jié)點(diǎn)將同時(shí)被刪除

提供傳遞一個(gè)篩選的表達(dá)式搀玖，刪除指定合集中的元素

DOM節(jié)點(diǎn)刪除之保留數(shù)據(jù)的刪除操作detach()

3個(gè)刪除方法

empty():清空匹配的元素集合中所有的子節(jié)點(diǎn)余境，自身節(jié)點(diǎn)和事件都未被刪除。

remove():這個(gè)方法不會(huì)把匹配的元素從jQuery對(duì)象中刪除灌诅，因而可以在將來(lái)再使用這些匹配的元素芳来。但除了這個(gè)元素本身得以保留之外，其他的比如綁定的事件延塑，附加的數(shù)據(jù)等都會(huì)被移除绣张。

detach()：這個(gè)方法不會(huì)把匹配的元素從jQuery對(duì)象中刪除，因而可以在將來(lái)再使用這些匹配的元素关带。與remove()不同的是侥涵，所有綁定的事件、附加的數(shù)據(jù)等都會(huì)保留下來(lái)宋雏。與remove()不同的是芜飘，綁定的事件和數(shù)據(jù)會(huì)保留

綁定事件等數(shù)據(jù)不會(huì)刪除，會(huì)存儲(chǔ)在內(nèi)存中

$("div").detach() ?刪除div以及div下的所有元素磨总，不刪除事件和數(shù)據(jù)嗦明，返回div對(duì)象

$("div").empty() ?清空div下的所有元素，不刪除事件蚪燕，返回div對(duì)象

$("div").remove() ?刪除div以及div下的所有元素娶牌，刪除事件和數(shù)據(jù)，返回div對(duì)象

備注：刪除事件和數(shù)據(jù)的依據(jù)就是是否在內(nèi)存中馆纳，在內(nèi)存中诗良，就是事件沒(méi)有被刪除／不在內(nèi)存中，就是被刪除

什么意思呢鲁驶？

比如說(shuō)p.remove() ?p的自身點(diǎn)擊事件不在保留鉴裹，點(diǎn)擊p沒(méi)有任何反應(yīng)

p.detach() p的自身點(diǎn)擊事件還保留何陆，可以點(diǎn)擊p進(jìn)行事件處理

DOM拷貝clone()

.clone()方法深度 復(fù)制所有匹配的元素集合蚜枢，包括所有匹配元素魔市、匹配元素的下級(jí)元素颠黎、文字節(jié)點(diǎn)。

如果要復(fù)制匹配元素的事件和數(shù)據(jù)总处，需要指定一個(gè)參數(shù)true狈惫，默認(rèn)是false，不克隆事件和數(shù)據(jù)

HTML部分

JavaScript部分

$("div").on('click', function() {//執(zhí)行操作})

//clone處理一

$("div").clone()//只克隆了結(jié)構(gòu)辨泳，事件丟失

//clone處理二

$("div").clone(true) //結(jié)構(gòu)虱岂、事件與數(shù)據(jù)都克隆

.clone()方法是jQuery擴(kuò)展的，只能處理通過(guò)jQuery綁定的事件與數(shù)據(jù)

元素?cái)?shù)據(jù)（data）內(nèi)對(duì)象和數(shù)組不會(huì)被復(fù)制菠红，將繼續(xù)被克隆元素和原始元素共享。深復(fù)制的所有數(shù)據(jù)难菌，需要手動(dòng)復(fù)制每一個(gè)试溯。

var$p1=$("p:first").clone(); //克隆出來(lái)的p元素沒(méi)有點(diǎn)擊事件，淺拷貝

var$p2=$("p:last").clone(true); // 克隆出來(lái)的p元素有點(diǎn)擊事件郊酒，深拷貝

DOM替換replaceWith()和replaceAll()

.replaceWith(new content) ：用提供的內(nèi)容替換集合中所有匹配的元素并且返回被刪除元素的集合

.replaceAll(target) ?：用集合的匹配元素替換每個(gè)目標(biāo)元素

.replaceAll()和.replaceWith()功能類(lèi)似遇绞，主要是目標(biāo)和源的位置區(qū)別

.replaceWith()與.replaceAll() 方法會(huì)刪除與節(jié)點(diǎn)相關(guān)聯(lián)的所有數(shù)據(jù)和事件處理程序

.replaceWith()方法，和大部分其他jQuery方法一樣燎窘，返回jQuery對(duì)象摹闽，所以可以和其他方法鏈接使用

.replaceWith()方法返回的jQuery對(duì)象引用的是替換前的節(jié)點(diǎn)，而不是通過(guò)replaceWith/replaceAll方法替換后的節(jié)點(diǎn)

$p1.replaceWith("

replaceWith替換

$("

replaceAll替換

DOM包裹wrap()方法

.wrap(包裹的元素) //在所選擇元素的外邊包含一個(gè)父元素

$(this).wrap("

.wrap( function ) ：一個(gè)回調(diào)函數(shù)褐健，返回用于包裹匹配元素的 HTML 內(nèi)容或 jQuery 對(duì)象

使用后的效果與直接傳遞參數(shù)是一樣付鹿，只不過(guò)可以把代碼寫(xiě)在函數(shù)體內(nèi)部，寫(xiě)法不同而已

$(this).wrap(function(){

return"

})

備注：.wrap()函數(shù)可以接受任何字符串或?qū)ο笱裂福梢詡鬟f給$()工廠函數(shù)來(lái)指定一個(gè)DOM結(jié)構(gòu)舵匾。這種結(jié)構(gòu)可以嵌套了好幾層深，但應(yīng)該只包含一個(gè)核心的元素谁不。每個(gè)匹配的元素都會(huì)被這種結(jié)構(gòu)包裹坐梯。該方法返回原始的元素集，以便之后使用鏈?zhǔn)椒椒ㄉ才痢e額

DOM包裹unwrap()方法

.unwrap()將匹配元素集合的父級(jí)元素刪除吵血，保留自身（和兄弟元素，如果存在）在原來(lái)的位置偷溺。

$("p").unwrap(); // 清楚p元素的直接父元素蹋辅，不是所有祖先元素

DOM包裹wrapAll()方法

wrap是針對(duì)單個(gè)dom元素處理，如果要將集合中的元素用其他元素包裹起來(lái)亡蓉，也就是給他們?cè)黾右粋€(gè)父元素晕翠，針對(duì)這樣的處理，JQuery提供了一個(gè)wrapAll方法

$('p').wrapAll('

結(jié)果：

p元素

p元素

.wrapAll( function ) ：一個(gè)回調(diào)函數(shù)，返回用于包裹匹配元素的 HTML 內(nèi)容或 jQuery 對(duì)象

$('p').wrapAll(function() {

return '

})

用wrap也可以給所有p元素增加div淋肾，但不是同一個(gè)div（有多少個(gè)p就加了多少個(gè)div）硫麻。而wrapALL能給所有p元素增加一個(gè)共同的div

請(qǐng)注意：$(this)只給當(dāng)前對(duì)象加，不遍歷所有的

$("p").wrapAll("

$(this).wrapAll("

$("p").wrap("

$(this).wrap("

DOM包裹wrapInner()方法

.wrapInner( wrappingElement )：給集合中匹配的元素的內(nèi)部樊卓，增加包裹的HTML結(jié)構(gòu)

$("div").wrapInner("

新的p元素

$("div").wrapInner(function(){

return"

通過(guò)function添加

})

jQuery遍歷之children()方法

.children() 查找被選擇元素的所有直接子元素

$("div").children(); // 查找div元素下的所有直接子元素

$("div").children("a"); // 查找div元素下所有是a的直接子元素

jQuery遍歷之find()方法

.children()是父子關(guān)系查找，.find()是后代關(guān)系（包含父子關(guān)系）

.find（"*"）找到所匹配元素中的所有后代元素

重要：參數(shù)不能為空

$("div").find("*"); // 查找到所有div元素下到所有后代元素

$("div").find("span"); // 查找到所有div元素下到是span到后代元素

find是遍歷當(dāng)前元素集合中每個(gè)元素的后代碌尔。只要符合浇辜，不管是兒子輩，孫子輩都可以唾戚。

與其他的樹(shù)遍歷方法不同柳洋，選擇器表達(dá)式對(duì)于 .find() 是必需的參數(shù)。如果我們需要實(shí)現(xiàn)對(duì)所有后代元素的取回叹坦，可以傳遞通配選擇器 '*'熊镣。

find只在后代中遍歷，不包括自己募书。

選擇器 context 是由 .find() 方法實(shí)現(xiàn)的绪囱；因此，$('.item-ii').find('li') 等價(jià)于 $('li', '.item-ii')(找到類(lèi)名為item-ii的標(biāo)簽下的li標(biāo)簽)莹捡。

jQuery遍歷之parent()方法

.parent() 方法 ?// 查找選擇元素的直接父元素

例子：

$(".level-3").parent() // 篩選出.level-3所對(duì)應(yīng)的元素的父親元素

jQuery是一個(gè)合集對(duì)象鬼吵，所以通過(guò)parent是匹配合集中每一個(gè)元素的父元素

例子：加了一個(gè)選擇器，以便來(lái)進(jìn)行篩選

$('.item-a').parent(':last') // 篩選出 .item-a所對(duì)應(yīng)的元素父元素的最后一個(gè)父元素

.parents() 方法找到選定元素的祖先元素

jQuery遍歷之closest()方法

closest()方法接受一個(gè)匹配元素的選擇器字符串,所以必須要有一個(gè)參數(shù)（選擇器字符串）

從元素本身開(kāi)始篮赢，在DOM 樹(shù)上逐級(jí)向上級(jí)元素匹配齿椅，并返回最先匹配的祖先元素

例子:

$("div").closet("li') ?// 查找div元素上方的所有l(wèi)i元素

jQuery是一個(gè)合集對(duì)象，所以通過(guò)closest是匹配合集中每一個(gè)元素的祖先元素

parents() 和closest() 方法的區(qū)別

起始位置不同：.closest開(kāi)始于當(dāng)前元素 .parents開(kāi)始于父元素

遍歷的目標(biāo)不同：.closest要找到指定的目標(biāo)荷逞，.parents遍歷到文檔根元素媒咳，closest向上查找，直到找到一個(gè)匹配的就停止查找种远，parents一直查找到根元素涩澡，并將匹配的元素加入集合

結(jié)果不同：.closest返回的是包含零個(gè)或一個(gè)元素的jquery對(duì)象，parents返回的是包含零個(gè)或一個(gè)或多個(gè)元素的jquery對(duì)象

jQuery遍歷之next()方法 （緊跟著的兄弟元素）

jQuery是一個(gè)合集對(duì)象坠敷，如果想快速查找指定元素集合中每一個(gè)元素緊鄰的后面同輩元素的元素集合妙同，此時(shí)可以用next()方法

next()無(wú)參數(shù)允許我們找遍元素集合中緊跟著這些元素的直接兄弟元素，并根據(jù)匹配的元素創(chuàng)建一個(gè)新的 jQuery 對(duì)象膝迎。

next(選擇器) 有參數(shù)

例子：$('.item-2').next(':first') ? // 找到.item-2中的兄弟元素然后篩選出第一個(gè)li粥帚，加上藍(lán)色的邊

jQuery遍歷之prev()方法 （前面緊跟的兄弟元素）

.prev() // 無(wú)參數(shù) ? 選擇該元素前面的兄弟元素集合

.prev(選擇器) // 有參數(shù) ，選擇該元素前面兄弟元素中指定的兄弟元素

$('.item-3').prev(':last') ?找到所有class=item-2的li限次，然后篩選出最后一個(gè)芒涡，加上藍(lán)色的邊

重要：上面例子表示找到item-3前面的相鄰元素集合柴灯，再找這些元素中的最后一個(gè)

jQuery遍歷之siblings()

.siblings(無(wú)參數(shù))取得一個(gè)包含匹配的元素集合中每一個(gè)元素的同輩元素的元素集合

例子：$(".item-2").siblings() ? ? ?// 表示找到.item-2的所有同輩元素

.sibling(選擇器） 篩選出同輩元素

例子：$('.item-2').siblings(':last') ?// 找到.item-2的所有同輩元素中的最后一個(gè)元素

jQuery遍歷之a(chǎn)dd()方法

.add()的參數(shù)可以幾乎接受任何的$()，包括一個(gè)jQuery選擇器表達(dá)式费尽，DOM元素赠群，或HTML片段引用。

該方法表示往被選擇的元素中插入一行新的元素

例子：$('li').add('p') ?// 表示把p元素插入到$("li")中

jQuery遍歷之each()

each是一個(gè)for循環(huán)的包裝迭代器

each通過(guò)回調(diào)的方式處理旱幼，并且會(huì)有2個(gè)固定的實(shí)參查描，索引與元素

each回調(diào)方法中的this指向當(dāng)前迭代的dom元素

$("li").each(function(index, element) {

index 索引 0,1

element是對(duì)應(yīng)的li節(jié)點(diǎn) li,li

this 指向的是li

})