亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

jQuery遍歷之add()方法

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

處理一：傳遞選擇器
eg:?$('li').add('p')

jQuery遍歷之closest()方法

?closest()方法接受一個匹配元素的選擇器字符串

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

eg:$("div").closest("li").css("border","1px solid red")? ///查找div以上的所有li元素（包括div）讓他們有紅色邊框

與parents的區別：

1. 起始位置不同：.closest開始于當前元素 .parents開始于父元素
2. 遍歷的目標不同：.closest要找到指定的目標，.parents遍歷到文檔根元素，closest向上查找，直到找到一個匹配的就停止查找，parents一直查找到根元素，并將匹配的元素加入集合
3. 結果不同：.closest返回的是包含零個或一個元素的jquery對象，parents返回的是包含零個或一個或多個元素的jquery對象

jQuery遍歷之parents()方法

?快速查找合集里面的每一個元素的所有祖輩元素，此時可以用parents()方法

?parents會往上一直查到查找到祖先節點

parents包括父節點 和祖輩節點? 祖先節點等

可以加一個選擇器

parents()無參數

有序的向上匹配元素，并根據匹配的元素創建一個新的 jQuery 對象;

jQuery遍歷之parent()方法

?快速查找合集里面的每一個元素的父元素（這里可以理解為就是父親-兒子的關系），此時可以用parent()方法

因為是父元素，這個方法只會向上查找一級

jQuery遍歷之find()方法

?快速查找DOM樹中的這些元素的后代元素，此時可以用find()方法

children與find方法的區別，children是父子關系查找，find是后代關系（包含父子關系）

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

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

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

jQuery遍歷之children()方法

?.children(selector) 方法是返回匹配元素集合中每個元素的所有子元素（僅兒子輩，這里可以理解為就是父親-兒子的關系）

注意：jQuery是一個合集對象，所以通過children是匹配合集中每一給元素的第一級子元素

允許傳一個選擇器的表達式

DOM包裹wrapAll()方法

?wrap是針對單個dom元素處理，如果要將集合中的元素用其他元素包裹起來，也就是給他們增加一個父元素

.wrapAll( wrappingElement )：給集合中匹配的元素增加一個外面包裹HTML結構

eg:?$('p').wrapAll('<div></div>');

//給所有的P元素增加了一個父div的結構

<div>
????<p>p元素</p>
????<p>p元素</p>
</div>

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

eg:?//wrapAll接受一個回調函數

? ? ? ? //每一次遍歷this都指向了合集中每一個a元素

? ? ? ? $('a').wrapAll(function() {

? ? ? ? ? ? return '<div></div>'

? ? ? ? })

結果：等同于warp的處理了

<div>
????<p>p元素</p>
</div>
<div>
????<p>p元素</p>
</div>

DOM包裹unwrap()方法

?作用與wrap方法是相反的

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

方法和wrap一樣

DOM包裹wrap()方法

?.wrap( wrappingElement )：在集合中匹配的每個元素周圍包裹一個HTML結構

eg:??$('p').wrap('<div></div>')

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

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

eg: $('p').wrap(function() {

????return?'<div></div>';???//與第一種類似，只是寫法不一樣
})



使用wrap盒子會被撐大
因為wrap的標簽還有自己的border和padding、margin這些

DOM替換replaceWith()和replaceAll()

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

$("p:eq(1)").replaceWith('<a?>替換第二段的內容</a>')

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

$('<a?>替換第二段的內容</a>').replaceAll('p:eq(1)')

• .replaceAll()和.replaceWith()功能類似，主要是目標和源的位置區別
• .replaceWith()與.replaceAll() 方法會刪除與節點相關聯的所有數據和事件處理程序

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

DOM拷貝clone()

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

clone():只克隆節點 結構

clone(true):克隆節點 結構和附帶的事件與數據

clone()方法時，在將它插入到文檔之前，我們可以修改克隆后的元素或者元素內容

eg:?$(".left").append( $(this).clone().css('color','red').text('aaaaaaa') )

detach()和remove()區別

DOM節點刪除之保留數據的刪除操作? detach()

什么時候用：

?如果我們希望臨時刪除頁面上的節點，但是又不希望節點上的數據與事件丟失，并且能在下一個時間段讓這個刪除的節點顯示到頁面，這時候就可以使用detach方法來處理

用法：

?所有綁定的事件、附加的數據等都會保留下來。$("div").detach()這一句會移除對象，僅僅是顯示效果沒有了。但是內存中還是存在的。當你append之后，又重新回到了文檔流中。就又顯示出來了。

注：它只能處理通過JQuery的方法綁定的事件或者數據

eg:

<p>P元素1，默認給綁定一個點擊事件</p>

? ? <p>P元素2，默認給綁定一個點擊事件</p>

? ? <button id="bt1">點擊刪除 p 元素</button>

? ? <button id="bt2">點擊移動 p 元素</button>

? ? <script type="text/javascript">

? ? $('p').click(function(e) {

? ? ? ? alert(e.target.innerHTML)

?????//? target 事件屬性可返回事件的目標節點（觸發該事件的節點），如生成事件的元素、文檔或窗口

? ? })

? ? var p;

? ? $("#bt1").click(function() {

? ? ? ? if (!$("p").length) return; //去重? ?這一步是避免重復detach，重復操作下面一步恢復就不行了

? ? ? ? //通過detach方法刪除元素

? ? ? ? //只是頁面不可見，但是這個節點還是保存在內存中

? ? ? ? //數據與事件都不會丟失

? ? ? ? p = $("p").detach()

? ? });

? ? $("#bt2").click(function() {

? ? ? ? //把p元素在添加到頁面中

? ? ? ? //事件還是存在

? ? ? ? $("body").append(p);//p是保留刪除的數據，如果不刪除，就不能追加

? ? });

? ? </script>

DOM節點刪除之empty和remove區別

?empty方法

• 嚴格地講，empty()方法并不是刪除節點，而是清空節點，它能清空元素中的所有后代節點
• empty不能刪除自己本身這個節點

remove方法

• 該節點與該節點所包含的所有后代節點將同時被刪除
• 提供傳遞一個篩選的表達式，刪除指定合集中的元素

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

?remove會將元素自身移除，同時也會移除元素內部的一切，包括綁定的事件及與該元素相關的jQuery數據。

通過remove方法移除div及其內部所有元素，remove內部會自動操作事件銷毀方法

remove表達式參數：

可以傳遞一個選擇器表達式用來過濾將被移除的匹配元素集合，可以選擇性的刪除指定的節點

eg: $("p").filter(":contains('3')").remove()

1.filter() 方法返回符合一定條件的元素。

2.該方法讓您規定一個條件。不符合條件的元素將從選擇中移除，符合條件的元素將被返回。

3.該方法通常用于縮小在被選元素組合中搜索元素的范圍。

提示：filter() 方法是與?

//刪除p標簽中文本有3的