jQuery添加節(jié)點(diǎn)
- append(content|fn)
-
appendTo(content)
// 創(chuàng)建節(jié)點(diǎn)
var $li = $("<li>It's a new li tag</li>");
// 添加節(jié)點(diǎn)
// $("ul").append($li);
$li.appendTo("ul");
- prepend(content|fn)
-
prependTo(content)
// 創(chuàng)建個(gè)節(jié)點(diǎn)
var $li = $("<li>It's a new li tag</li>");
// 添加節(jié)點(diǎn)
// $("ul").prepend($li);
$li.prependTo("ul");
- after(content|fn)
-
insertAfter(content)
// 創(chuàng)建節(jié)點(diǎn)
var $li = $("<li>It's a new li tag</li>");
// 添加節(jié)點(diǎn)
// $("ul").after($li);
$li.insertAfter("ul");
- before(content|fn)
-
insertBefore(content)
// 創(chuàng)建節(jié)點(diǎn)
var $li = $("<li>It's a new li tag</li>");
// 添加節(jié)點(diǎn)
// $("ul").before($li);
$li.insertBefore("ul");
jQuery刪除節(jié)點(diǎn)
-
empty()
- 會(huì)刪除指定元素的內(nèi)容和子元素, 指定元素自身不會(huì)被刪除
$(".box").empty();
// 刪除所有div
$("div").remove();
// 刪除div中clss是box的那個(gè)div
$("div").remove(".box");
// 刪除所有div
$("div").detach();
// 刪除div中id是box的那個(gè)div
$("div").detach("#box");
-
remove和detach區(qū)別
-
remove刪除元素后,元素上的事件會(huì)被移出
-
detach刪除元素后,元素上的事件會(huì)被保留
jQuery替換節(jié)點(diǎn)
-
replaceWith(content|fn)
- 將所有匹配的元素替換成指定的HTML或DOM元素
-
replaceWith參數(shù)可以是一個(gè)DOM元素
-
replaceWith參數(shù)也可以是一個(gè)代碼片段
-
replaceAll(selector)
- 用匹配的元素替換掉所有 selector匹配到的元素
$("button").click(function () {
// 創(chuàng)建一個(gè)新的節(jié)點(diǎn)
var $item = $("<h6>我是標(biāo)題h6</h6>");
// 利用新的節(jié)點(diǎn)替換舊的節(jié)點(diǎn)
// $("h1").replaceWith($item);
$item.replaceAll("h1");
});
jQuery復(fù)制節(jié)點(diǎn)
-
clone([Even[,deepEven]])
- 復(fù)制一個(gè)節(jié)點(diǎn)
- 淺復(fù)制不會(huì)復(fù)制節(jié)點(diǎn)的事件
- 深復(fù)制會(huì)復(fù)制節(jié)點(diǎn)的事件
$(function () {
$("button").eq(0).click(function () {
// 淺復(fù)制一個(gè)元素
var $li = $("li:first").clone(false);
// 將復(fù)制的元素添加到ul中
$("ul").append($li);
});
$("button").eq(1).click(function () {
// 深復(fù)制一個(gè)元素
var $li = $("li:first").clone(true);
// 將復(fù)制的元素添加到ul中
$("ul").append($li);
});
$("li").click(function () {
alert($(this).html());
});
});
