學習要點
- 創建節點
- 插入節點
- 包裹節點
- 節點操作
創建節點
var box = $('<div id="box">節點</div>');
//創建一個節點
$('body').append(box);
//將節點插入到<body>元素內部
插入節點
內部插入節點方法匯總
append(content) 向指定元素內部后面插入節點content
append(function(index,val){})
使用匿名函數向指定元素內部后面插入節點appendTo(content)
將指定元素移入到指定元素content內部后面prepend(content)
向指定元素content內部的前面插入節點prepend(function(index,val){})
使用匿名函數向指定元素內部的前面插入節點prependTo(content)
將指定元素移入到指定元素content內部前面
//$("#div1").append(box); //向指定元素內部的后面插入位置
//box.appendTo($('#div1')); //把節點插入到指定元素的內部最后的位置
//box.prependTo($("#div1")); //把節點插入到指定元素的內部最前面的位置
$("#div1").prepend(box); //向指定元素內部的前面插入位置
外部插入節點的方法
after(content) 向指定元素的外部后面插入節點content
before(content)向指定元素的外部前面插入節點content
insertAfter(content) 將指定節點移到指定元素content外部的后面
insertBefore(content)將指定節點移到指定元素content外部的前面
$("div").after('<span>節點</span>');
//向div的同級節點后面插入span
$("div").before('<span>節點</span>');
//向div同級節點前面插入span
$('span').insertBefore('div')
//將span元素移到div元素外部的前面
$(function(){
var div2 = $("<div id='div2'>2</div>");
var div3 = $("<div id='div3'>3</div>");
var div4 = $("<div id='div4'>4</div>");
var div5 = $("<div id='div5'>5</div>");
$("#div1").after(div2); //向同級節點的后面插入節點
$("#div1").before(div3); //向同級節點的前面插入節點
div4.insertBefore($("#div1")); //將div4節點插入到div1的前面
div5.insertAfter($("#div1")); //將div5插入到div1的后面
})
包裹節點
wrap(html) 向指定元素包裹一層html代碼
wrap(ele) 向指定元素包裹一層DOM元素節點
unwrap() 移除一層指定元素包裹的內容,多個需移除很多次
wrapAll(html) 用html將所有元素包裹在一起
wrapAll(ele) 用DOM對象將所有元素包裹在一起
$("#div1").wrap("<p id='div2'></p>"); //在div1外面包裹了一層div2
$("#div1").wrap("<strong></strong>"); //div1的外面包裹了層div元素
$("p").wrapAll("<strong></strong>");
這里特別注意的就是wrap()和wrapAll()的區別
前者是把每個元素當成一個獨立體，分別包含一層外層
后者將所有元素作為一個整體作為獨立體，只包含一層外層。這兩種都是在外層包含
節點操作
- 復制節點 clone
$("body").append($("div").clone(true))
//復制一個節點添加到html中
這里特別注意的就是clone(true)參數可以為空,表示只復制元素和內容，不復制事件行為。而加上事件true參數的話，這個元素附帶的事件處理行為也復制出來
- 刪除節點
$("div").remove(); //直接刪除div元素
remove()不帶參數時候，就是刪除前面指定的元素。而remove()要是帶參數。刪除的就是帶參數的。刪除的是自身。比如
$("div").remove("#div1");只刪除id是div1的元素
$("p").remove("#div1"); //只刪除id是div1的P元素
$("p").remove(); //刪除全部P元素
- 保留事件的刪除節點 detach
$("div").detach(); //保留事件行為的刪除
- 清空節點 empty
$("div").empty(); //刪掉節點里的所有內容
- 替換節點 replaceWith
$("div").replaceWith('<span>節點</span>');
//將div替換成span元素
var box = $("<div>3</div>");
$("p").replaceWith(box);
這里特別注意的就是節點替換完以后，包含的事件全部消失了。
