jquery總結04 DOM節點操作

2022-07-26 18:00:13 字數 1215 閱讀 5565

一般js操作節點

①建立節點(元素文字)document.createelement  innerhtml

②新增屬性 setattribute

操作繁瑣還有相容性問題

jquery操作節點

①$('jquery

")  直接在$("")裡寫元素 文字 屬性  要注意閉合標籤和使用標準的的xhtml格式

②加入文件支援了好多函式

向下新增節點

$('.a').prepend(content) 在a元素內的最開始新增內容  $(content).prependto('.a')

同級新增節點

$('.a').after(content) 在a元素同級後新增內容  $(content).insertafter('.a')

$('.a').before(content) 在a元素同級後新增內容  $(content).insertbefore('.a')

向上父及包裹節點

$('.a').wrap("

") 給匹配的元素每乙個外部包一有個html結構  每個都被包裹了 

$('.a').wrapinner("

") 給匹配的元素每乙個內部包裹乙個html結構 

$('.a').wrapall("

") 給匹配的元素集合外層包裹乙個html結構 包裹了最外層的

$('.a').unwrap("

") 刪除父元素

刪除節點

$('.a').empty()刪除內容,自己還在, 都可以傳引數縮小範圍 事件也刪除

$('.a').remove()都刪除了,自己也不在了,都可以傳引數縮小範圍 事件也刪除

var a=$('.a').detach()  都刪除了 事件還在

複製節點

$('.a').clone() 複製結構

$('.a').clone(true) 複製結構+事件

替換節點

替換後繫結的時間也會被刪除

$('.a').replacewith(newcontent) newcontent替換a元素 

$(newcontent).replaceall('.a') newcontent替換a元素

以上操作,不僅能建立新的dom元素插入,也能對原有的dom元素進行移動,

var a =$('#content');

a.insertafter('.a');

(之前誰會想倒著用吧,倒著可以這麼用。)

jquery知識整理 04 DOM操作

捕獲階段 text 設定或返回所選元素的文字內容 html 設定或返回所選元素的內容 包括html標記 val 設定或返回表單字段的值 jquery attr 方法用於獲取屬性值。對於 html 元素本身就帶有的固有屬性,在處理時,使用 prop 方法。對於 html 元素我們自己自定義的 dom ...

Jquery操作DOM節點

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

jQuery操作DOM節點

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