1 內部插入 1.1 append(content | fn) 向每個匹配的元素內部追加內容。 參數: (1) content:要追加到目標中的內容。 (2) function(index, html):返回一個HTML字元串,用於追加到每一個元素裡面。index為元素索引,html為元素內的htm ...
1 內部插入
1.1 append(content | fn)
向每個匹配的元素內部追加內容。
參數:
(1) content:要追加到目標中的內容。
(2) function(index, html):返回一個HTML字元串,用於追加到每一個元素裡面。index為元素索引,html為元素內的html。
1.2 appendTo(content)
把所有匹配元素追加到另一個指定的元素集合中。
1.3 prepend(content | fn)
向每個匹配的元素內部添加前置內容。這是在所有匹配元素內部開始插入內容的最佳方式。
參數:
(1) content:要插入到目標元素內部的內容。
(2) function(index, html):返回一個HTML字元串,用於追加到每一個元素裡面。index為元素索引,html為元素內的html。
1.4 prependTo(content)
把所有匹配的元素添加到另一個指定的元素集合的前置。
2 外部插入
2.1 after(content | fn)
在每個匹配的元素之後插入內容。
2.2 before(content | fn)
在每個匹配的元素之前插入內容。
2.3 insertAfter(content)
把所有匹配的元素插入到另一個、指定的元素集合的後面。
2.4 insertBefore(content)
把所有匹配的元素插入到另一個、指定的元素集合的前面。
3 包裹
3.1 wrap(html | element | fn)
把所有匹配的元素用其他元素的結構化標記包裹起來。
參數:
(1) html:HTML標記代碼字元串,用於動態生成元素並包裹目標元素。
(2) element:用於包裝目標元素的DOM元素。
(3) fn:生成包裹結構的一個元素。
// HTML 代碼: <div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div> // jQuery 代碼: $('.inner').wrap(function() { return '<div class="' + $(this).text() + '" />'; }); // 結果: <div class="container"> <div class="Hello"> <div class="inner">Hello</div> </div> <div class="Goodbye"> <div class="inner">Goodbye</div> </div> </div>
3.2 upwarp()
這個方法將移出元素的父元素。這能快速取消 .warp() 方法的效果。匹配的元素(以及他們的同輩元素)會在DOM結構上替換他們的父元素。
3.3 warpAll(html | element)
將所有匹配的元素用單個元素包裹起來。
參數:
(1) html:HTML標記代碼字元串,用於動態生成元素並包裝目標元素。
(2) element:用於包裝目標元素的DOM元素。
3.4 warplnner(html | element | fn)
將每一個匹配的元素的子內容(包括文本節點)用一個html結構包裹起來。
參數:
(1) html:HTML標記代碼字元串,用於動態生成元素並包裹目標元素
(2) element:用於包裝目標元素的DOM元素
(3) fn:生成包裹結構的一個函數
4 替換
4.1 replaceWith(content | fn)
將所有匹配的元素替換成指定的HTML或DOM元素。
參數:
(1) content:用於將匹配元素替換掉的內容。
(2) fn:返回HTML字元串,用於替換的內容。
4.2 replaceAll(selector)
用於匹配的元素替換掉所有 selector選擇匹配到的元素。
5 刪除
5.1 empty()
刪除匹配的元素集合中所有的子節點。
5.2 remove([selector])
從DOM中刪除所有匹配的元素。
這個方法不會把匹配的元素從jQuery對象中刪除,因而可以在將來再使用這些匹配的元素。但除了這個元素本身得以保留之外,其他的比如綁定的事件,附加的數據等都會被移除。
參數:
(1) .remove() : 刪除所有元素
(2) selector : 用於篩選元素的jQuery表達式,如 $("p").remove(".hello");
5.3 detach([selector])
從DOM中刪除所有匹配的元素。
這個方法不會把匹配的元素從jQuery對象中刪除,因而可以在將來再使用這些匹配的元素。與remove()不同的是,所有綁定的事件、附加的數據等都會保留下來。
參數:
(1) .remove() : 刪除所有元素
(2) selector : 用於篩選元素的jQuery表達式,如 $("p").remove(".hello");
6 複製
6.1 clone([Even[, deepEven]])
克隆匹配的DOM元素並且選中這些克隆的副本。
在想把DOM文檔中元素的副本添加到其他位置時這個函數非常有用。
參數:
(1) Event:一個布爾值,指示事件處理函數是否會被覆制。v1.5以上版本預設值是:false。
(2) Event[, deepEvent]:1:一個布爾值,指示事件處理函數是否會被覆制
2:一個布爾值,指示是否對事件處理程式和克隆的元素的所有子元素的數據應該被覆制。