jQuery文檔操作
插入操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文檔處理_插入操作</title>
<script src="../../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/**
* 需求
* 在id=edu下增加<option value="大專">大專</option>
*/
/**
* 方法分析：
* 內部插入
* 1.append(content):內部結尾處，將B追加到A里面去
* 2.appendTo(content):內部結尾處，將A追加到B里面去
* 3.prepend(content):內部開始處，將B追加到A里面去
* 4.prependTo(content):內部開始處，將B追加到A里面去
* 外部插入
* 1.after(content):外部，將B追加到A后面
* 2.before(content):外部，將A追加到B前面
* 3.insertAfter(content):外部，將A追加到B后面
* 4.insertBefore(content)::外部，將A追加到B前面
*/
$(function() {
// 追加 option 內容大專
// 創建元素
var $newNode = $("<option value='大專'>大專</option>");
//內部插入
//$("#edu").append($newNode); // 內部結尾，將B追加到A里面去
//$("#edu").prepend($newNode); // 內部開始，將B追加到A里面去
//外部插入
//$("option[value='本科']").after($newNode);
$newNode.insertBefore($("option:contains('碩士')"));
});
</script>
</head>
<body>
<select id="edu">
<option value="博士">博士</option>
<option value="碩士">碩士</option>
<option value="本科">本科</option>
<option value="高中">高中</option>
</select>
</body>
</html>
復制操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文檔處理_復制操作</title>
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>
<script>
/**
* 需求
* 1.單擊蘋果、橘子或者菠蘿列表項，復制點擊的內容并追加到ul的末尾
* 2.單擊蘋果、橘子或者菠蘿列表項，復制點擊的內容并追加到ul的末尾，要求復制后的內容也具有復制的能力
*/
/**
* 方法分析：
* 1.clone()：克隆匹配的DOM元素并且選中這些克隆的副本。
* 2.clone()：元素以及其所有的事件處理并且選中這些克隆的副本(簡言之，副本具有與真身一樣的事件處理能力)
*/
$(function(){
//點擊li列表項，將當選點擊的li內容追加到ul末尾
$("ul li").click(function(){
//$(this).clone().appendTo("ul"); // 復制當前點擊的節點，并將它追加到<ul>元素
$(this).clone(true).appendTo("ul");//設置參數true后，復制后的內容也具備單擊事件
})
});
</script>
</head>
<body>
<p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p>
<ul>
<li title='蘋果'>蘋果</li>
<li title='橘子'>橘子</li>
<li title='菠蘿'>菠蘿</li>
</ul>
</body>
</html>
替換操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文檔處理_替換操作</title>
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>
<script>
$(function(){
//將B的內容替換掉A處的內容
$("p").replaceWith("<strong>你最不喜歡的水果是?</strong>");
// 同樣的實現： $("<strong>你最不喜歡的水果是?</strong>").replaceAll("p");
});
</script>
</head>
<body>
<p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p>
<ul>
<li title='蘋果'>蘋果</li>
<li title='橘子'>橘子</li>
<li title='菠蘿'>菠蘿</li>
</ul>
</body>
</html>
刪除操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文檔處理_刪除操作</title>
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
/**
* 需求
* 分別使用detach和remove 刪除帶有click事件的p標簽，刪除后再將p 重新加入body 查看事件是否存在
*/
/**
* 方法分析
* 1.remove()：刪除節點后，事件也會刪除
* 2.detach()：刪除節點后，事件會保留 從1.4新API
* 3.empty():清空元素中的所有后代節點。(這個案例是要刪除而不是清空，需要注意)
*/
/**
* 代碼實現
*/
$(function() {
$("p").click(function() {
alert($(this).text());
});
// 使用remove方法刪除 p元素，連同事件一起刪除
//var $p = $("p").remove();
// 使用detach刪除，事件會保留
var $p = $("p").detach();
$("div").append($p);
});
</script>
</head>
<body>
<p>AAA</p>
<div>BBB</div>
</body>
</html>
刪除相關操作的區別
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>刪除相關操作的區別</title>
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>
<script>
$(function(){
//清空第二個li元素節點的所有后代節點(此處是文本節點橘子)，通過firebug查看html源碼驗證
//$("ul li:eq(1)").empty();
//刪除第一個li元素節點
$("ul li:eq(0)").remove();
});
</script>
</head>
<body>
<p title="選擇你最喜歡的水果.">你最喜歡的水果是?</p>
<ul>
<li title='蘋果'>蘋果</li>
<li title='橘子'>橘子</li>
<li title='菠蘿'>菠蘿</li>
</ul>
</body>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
