dom操作是對dom樹進行插入,刪除,修改。
1.建立新元素可以有三種方法:
(1)var newelement = $("");
通過$函式建立
(2)var newelement = $("#old").clone();
通過已有的元素進行複製,clone()可以傳遞true,這樣複製的元素也會複製已有元素的事件處理函式以及關聯資料(data)。
(3)var newelement = document.createelement("h1")
使用dom api進行建立
2.新增子元素或後代元素,分為兩組:
將newelement新增到class為a的元素之後
$(".a").prepend(newelement);
將newelement新增到class為a的
元素之前
注意區別:
可以將newelement新增到id為a和b的元素之後
$("#a").
$("#b").
如果向id為b的新增時未進行clone,只是把新增到id為a的元素又移動到id為b的元素後,不會在a和b之後均新增。
將class為a的元素集新增到
newelement元素之後
$(".a").prependto(newelement);
將class為a的元素集新增到
newelement
元素之前
3.插入父元素(包裹元素),有三組:
(1)wrap(或wrap(function))和unwap
$(".a").
wrap
(newelement);
用newelement包裹class為a的元素,即給class為a的每個元素分別新增了父元素
(2)wrapall
$(".a").
wrapall
(newelement);
把class為a的元素集封裝到newelement中,即給所有class為a的元素設定了公共的父元素,因此,這裡的class為a的元素之間最好是兄弟關係。
(3)wrapinner(或wrapinner(function))
$(".a").
wrapinner
(newelement);
基本類似於wrap,
只不過這個是包裹了元素的內容,而不是元素本身。
4.插入兄弟元素,分兩組:
(1)after(或after(function))和before(或before(function))
$(".a").after(newelement);
將newelement作為下乙個兄弟元素新增到class為a元素之後
$(".a").before(newelement);
將newelement作為上乙個兄弟元素新增到class為a元素之前
(2)insertafter和insertbefore
$(".a").insertafter(newelement);
將class為a的元素集作為
下乙個兄弟新增到newelement元素之後
$(".a").insertbefore(newelement);
將class為a的元素集作為
上乙個兄弟新增到newelement元素之前
5.替換元素,分兩組:
(1)replacewith(或replacewith(function))
$(".a").
replacewith
(newelement);
用newelement替換class為a的元素集中的元素
(2)replaceall
$(element).replaceall($(".a"));
與replacewith引數方向相反,即用element替換所有的class為a的元素集中的元素
6.刪除元素,分三組:
(1)detach刪除元素保留關聯資料
(2)remove刪除元素,不保留關聯資料(徹底刪除)
(3)刪除父元素(unwrap)和後代元素(empty)
$(".a").unwrap();
刪除class為a的每個元素的父元素
$(".a").empty();
刪除class為a的每個元素的後代元素
jQuery學習筆記 DOM操作
1.1 dom物件轉jquery物件 用 把dom物件包起來即可 var domobj document.getelementbyid demo var jqueryobj domobj 1.2 jquery物件轉dom物件 2種方法 index 和get index var jqueryobj d...
Jquery學習筆記 DOM操作
prepend 向每個匹配的元素內部前置內容 prependto after 向每個匹配的元素之後插入內容 insterafter before 在每個匹配的元素之前插入內容 insertbefore 1.remove 該節點所包含的所有後代節點將同時被刪除 返回值是乙個指向已被刪除的節點的引用,因...
jQuery中的DOM操做 樣式操做
利用attr 方法來實現該功能 1 獲取 var p class p attr class 獲取p元素的class 2 設定 var p class p attr class high p元素的class為high利用addclass 方法來實現該功能 p addclass another 為p元素...