jQuery基礎 DOM節點操作

2022-02-18 04:20:54 字數 2402 閱讀 2433

如:$("<

p id

='name'

><

a href

='##'

/>

p>");

增加環繞節點

方法說明 

wrap() 

用指定結構的元素包裹元素

wrapall()

用指定結構的元素包裹多個元素

wrapinner()

用指定結構元素包裹元素的內容

節點內部插入

方法說明

向每個匹配元素內部的最後面新增元素

將所有匹配的元素追加到指定的元素中

prepend()

向每個匹配的元素內部最前面新增指定元素

prependto()

將所有匹配的元素新增到指定元素內部的最前面

//與上面同理 只是這個是新增到最前面

prepend()

$("#demo").prepend($("ccc

"));

prependto()

$($("ddd

")).prependto($("#demo"));

節點外部插入

方法說明

after()

在每個匹配的元素之後插入內容

inserafter()

將所有匹配的元素插入到指定元素的後面

before()

在每個匹配的元素之前插入內容

insertbefore()

將所有匹配的元素插入到指定元素的前面

after()//前者為已有的哥哥元素  後者為需要新增到哥哥元素下面的弟弟元素

$(".demo").after($("aaaaa

"));

insertafter()//前者為需要新增到哥哥元素下面的弟弟元素,後者是指定的哥哥元素

$("cccc

").insertafter($(".demo"));

after()//前者為已有的弟弟元素  後者為需要新增到弟弟元素上面的哥哥元素

$(".demo").before($("aaaaa

"));

insertafter()//前者為需要新增到弟弟元素上面的哥哥元素,後者是指定的弟弟元素

$("cccc

").insertbefore($(".demo"));

二者替換的效果一樣 只是語法不同而已
如:

replacewith() //$(被替換的元素).replacewith($(替換的元素))

$(".demo").replacewith($("

<

button

>替換

button

>

"));

replaceall() //$(替換的元素).replaceall($(被替換的 元素))

$("<

button

>替換

button

>").replaceall($(".demo"));

withdataandevents: 事件和資料是否被複製  預設:  false

deepwithdataandevents: 深度複製,子元素的事件和資料是否被複製  預設:  false

注:此方法只能用於複製 將複製的元素新增到頁面需要用插入節點的方法

刪除節點

方法說明

unwrap();

用於刪除指定節點的父元素 可配合wrap()方法使用

empty();

用於刪除指定元素的子元素

remove();

從dom中刪除包裝集中的所有元素

detach();

與remove()的方法相同 但是會保留元素相關聯的資料和事件

全選商品編號

名稱**

上貨日期

是否下架

操作

商品詳細

商品編號

*只能輸入九位字元

商品名稱

*長度只能是1-30位

商品**

*只能輸入正數 ,如:0.98

上貨日期

201811

*必須選擇

是否下架

是 否

Jquery操作DOM節點

1 向dom節點中追加元素 結果 我想說 你好 結果 我想說 你好 prepend 向每個匹配元素內部前置元素 例如 我想說 p prepend 你好 結果 你好我想說 prependto 將所有匹配的元素前置到指定的元素中 例如 我想說 你好 prependto p 結果 你好我想說 after ...

jQuery操作DOM節點

dom 節點建立的過程 建立節點 元素 屬性 文字等 新增節點的屬性 加入到文件中 jquery建立節點的方法 建立元素節點 建立文字節點 直接將文字的內容新增進去 建立節點並給節點新增屬性 var div 動態建立div元素節點 節點建立完成。需要將節點新增到文件中,新增新內容的時候需要用到接下來...

jQuery之dom操作 遍歷節點

jquery之dom操作 遍歷節點 children children selector 只考慮子元素,不考慮其他後代元素 next next selector 下乙個兄弟節點 prev prev selector 上乙個兄弟節點 siblings siblings selector 其他兄弟節點 ...