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

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

創(chuàng)建流程：

1、創(chuàng)建節(jié)點：document.createElement();

2、添加節(jié)點的屬性:setAttribute

3、把節(jié)點加入到文檔中

涉及到的方法：

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

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

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

appendChild() ? ?加入文檔

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

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

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

$("html結構")

例子：$("");

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

例子：$("

我是文本節(jié)點

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

$("

我是文本節(jié)點

DOM內部插入append()與appendTo()父子關系處理,在結尾插入

動態(tài)創(chuàng)建的元素是不夠的，它只是臨時存放在內存中，最終我們需要放到頁面文檔并呈現(xiàn)出來。

所以jq定義了2個方法將元素當作某一個元素的子元素插入到文檔中

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

append()前面是被插入的對象，后面是要在對象內插入的元素內容

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

appendTo(content)

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

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

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

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

例子：

$be.before('

測試before，前面

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

$af.after('

測試after,后面

備注：

1、before與after都是用來對相對選中元素外部增加相鄰的兄弟節(jié)點

2、2個方法都是都可以接收HTML字符串，DOM 元素，元素數(shù)組，或者jQuery對象，用來插入到集合中每個匹配元素的前面或者后面

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

DOM內部插入prepend()與prependTo() ?父子關系，在被選元素前面插入

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

例子：

$(".aaron1").prepend("

測試prepend333

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

$("

測試prependTo444

以下都是父子關系，父元素和直接子元素

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

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

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

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

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

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

例子：

$("

測試insertBefore

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

$("

測試afterBefore

.before()和.insertBefore()實現(xiàn)同樣的功能。主要的區(qū)別是語法——內容和目標的位置。 對于before()選擇表達式在函數(shù)前面，內容作為參數(shù)，而.insertBefore()剛好相反，內容在方法前面，它將被放在參數(shù)里元素的前面

.after()和.insertAfter() 實現(xiàn)同樣的功能。主要的不同是語法——特別是（插入）內容和目標的位置。 對于after()選擇表達式在函數(shù)的前面，參數(shù)是將要插入的內容。對于 .insertAfter(), 剛好相反，內容在方法前面，它將被放在參數(shù)里元素的后面

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

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

.empty() ?移除指定元素當子節(jié)點,，但是不移除自身元素

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

DOM節(jié)點刪除之remove()的有參用法和無參用法

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

.remove(有參數(shù)） ?／／可以傳遞一個選擇器表達式用來過濾將被移除的匹配元素集合，可以選擇性的刪除指定的節(jié)點

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

empty方法

嚴格地講，empty()方法并不是刪除節(jié)點，而是清空節(jié)點，它能清空元素中的所有后代節(jié)點

empty不能刪除自己本身這個節(jié)點

remove方法

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

提供傳遞一個篩選的表達式，刪除指定合集中的元素

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

3個刪除方法

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

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

detach()：這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。與remove()不同的是，所有綁定的事件、附加的數(shù)據(jù)等都會保留下來。與remove()不同的是，綁定的事件和數(shù)據(jù)會保留

綁定事件等數(shù)據(jù)不會刪除，會存儲在內存中

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

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

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

備注：刪除事件和數(shù)據(jù)的依據(jù)就是是否在內存中，在內存中，就是事件沒有被刪除／不在內存中，就是被刪除

什么意思呢？

比如說p.remove() ?p的自身點擊事件不在保留，點擊p沒有任何反應

p.detach() p的自身點擊事件還保留，可以點擊p進行事件處理

DOM拷貝clone()

.clone()方法深度 復制所有匹配的元素集合，包括所有匹配元素、匹配元素的下級元素、文字節(jié)點。

如果要復制匹配元素的事件和數(shù)據(jù)，需要指定一個參數(shù)true，默認是false，不克隆事件和數(shù)據(jù)

HTML部分

JavaScript部分

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

//clone處理一

$("div").clone()//只克隆了結構，事件丟失

//clone處理二

$("div").clone(true) //結構、事件與數(shù)據(jù)都克隆

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

元素數(shù)據(jù)（data）內對象和數(shù)組不會被復制，將繼續(xù)被克隆元素和原始元素共享。深復制的所有數(shù)據(jù)，需要手動復制每一個。

var$p1=$("p:first").clone(); //克隆出來的p元素沒有點擊事件，淺拷貝

var$p2=$("p:last").clone(true); // 克隆出來的p元素有點擊事件，深拷貝

DOM替換replaceWith()和replaceAll()

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

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

.replaceAll()和.replaceWith()功能類似，主要是目標和源的位置區(qū)別

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

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

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

$p1.replaceWith("

replaceWith替換

$("

replaceAll替換

DOM包裹wrap()方法

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

$(this).wrap("

.wrap( function ) ：一個回調函數(shù)，返回用于包裹匹配元素的 HTML 內容或 jQuery 對象

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

$(this).wrap(function(){

return"

})

備注：.wrap()函數(shù)可以接受任何字符串或對象，可以傳遞給$()工廠函數(shù)來指定一個DOM結構。這種結構可以嵌套了好幾層深，但應該只包含一個核心的元素。每個匹配的元素都會被這種結構包裹。該方法返回原始的元素集，以便之后使用鏈式方法。be額

DOM包裹unwrap()方法

.unwrap()將匹配元素集合的父級元素刪除，保留自身（和兄弟元素，如果存在）在原來的位置。

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

DOM包裹wrapAll()方法

wrap是針對單個dom元素處理，如果要將集合中的元素用其他元素包裹起來，也就是給他們增加一個父元素，針對這樣的處理，JQuery提供了一個wrapAll方法

$('p').wrapAll('

結果：

p元素

p元素

.wrapAll( function ) ：一個回調函數(shù)，返回用于包裹匹配元素的 HTML 內容或 jQuery 對象

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

return '

})

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

請注意：$(this)只給當前對象加，不遍歷所有的

$("p").wrapAll("

$(this).wrapAll("

$("p").wrap("

$(this).wrap("

DOM包裹wrapInner()方法

.wrapInner( wrappingElement )：給集合中匹配的元素的內部，增加包裹的HTML結構

$("div").wrapInner("

新的p元素

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

return"

通過function添加

})

jQuery遍歷之children()方法

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

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

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

jQuery遍歷之find()方法

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

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

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

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

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

find是遍歷當前元素集合中每個元素的后代。只要符合，不管是兒子輩，孫子輩都可以。

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

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

選擇器 context 是由 .find() 方法實現(xiàn)的；因此，$('.item-ii').find('li') 等價于 $('li', '.item-ii')(找到類名為item-ii的標簽下的li標簽)。

jQuery遍歷之parent()方法

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

例子：

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

jQuery是一個合集對象，所以通過parent是匹配合集中每一個元素的父元素

例子：加了一個選擇器，以便來進行篩選

$('.item-a').parent(':last') // 篩選出 .item-a所對應的元素父元素的最后一個父元素

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

jQuery遍歷之closest()方法

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

從元素本身開始，在DOM 樹上逐級向上級元素匹配，并返回最先匹配的祖先元素

例子:

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

jQuery是一個合集對象，所以通過closest是匹配合集中每一個元素的祖先元素

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

起始位置不同：.closest開始于當前元素 .parents開始于父元素

遍歷的目標不同：.closest要找到指定的目標，.parents遍歷到文檔根元素，closest向上查找，直到找到一個匹配的就停止查找，parents一直查找到根元素，并將匹配的元素加入集合

結果不同：.closest返回的是包含零個或一個元素的jquery對象，parents返回的是包含零個或一個或多個元素的jquery對象

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

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

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

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

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

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

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

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

$('.item-3').prev(':last') ?找到所有class=item-2的li，然后篩選出最后一個，加上藍色的邊

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

jQuery遍歷之siblings()

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

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

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

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

jQuery遍歷之add()方法

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

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

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

jQuery遍歷之each()

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

each通過回調的方式處理，并且會有2個固定的實參，索引與元素

each回調方法中的this指向當前迭代的dom元素

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

index 索引 0,1

element是對應的li節(jié)點 li,li

this 指向的是li

})