jQuery 中的 DOM 操作
jQuery 中的 DOM 操作
DOM(Document Object Model—文件物件模型):一種與瀏覽器, 平臺, 語言無關的介面, 使用該介面可以輕鬆地訪問頁面中所有的標準組件
DOM 操作的分類:
DOM Core: DOM Core 並不專屬於 JavaScript, 任何一種支援 DOM 的程式設計語言都可以使用它. 它的用途並非僅限於處理網頁, 也可以用來處理任何一種是用標記語言編寫出來的文件, 例如: XML
HTML DOM: 使用 JavaScript 和 DOM 為 HTML 檔案編寫指令碼時, 有許多專屬於 HTML-DOM 的屬性
CSS-DOM:針對於 CSS
查詢節點
查詢節點:
查詢元素節點: 通過 jQuery 選擇器完成.
查詢屬性節點: 查詢到所需要的元素之後, 可以呼叫 jQuery 物件的 attr() 方法來獲取它的各種屬性值
建立節點
建立節點: 使用 jQuery 的工廠函式 $(): $(html); 會根據傳入的 html 標記字串建立一個 DOM 物件, 並把這個 DOM 物件包裝成一個 jQuery 物件返回.
注意:
動態建立的新元素節點不會被自動新增到文件中, 而是需要使用其他方法將其插入到文件中;
當建立單個元素時,
建立文字節點就是在建立元素節點時直接把文字內容寫出來; 建立屬性節點也是在建立元素節點時一起建立
插入節點(1)
動態建立 HTML 元素並沒有實際用處, 還需要將新建立的節點插入到文件中, 即成為文件中某個節點的子節點
插入節點(2)
以上方法不但能將新建立的 DOM 元素插入到文件中, 也能對原有的 DOM 元素進行移動.
刪除節點
remove(): 從 DOM 中刪除所有匹配的元素, 傳入的引數用於根據 jQuery 表示式來篩選元素. 當某個節點用 remove() 方法刪除後, 該節點所包含的所有後代節點將被同時刪除. 這個方法的返回值是一個指向已被刪除的節點的引用.
empty(): 清空節點 – 清空元素中的所有後代節點(不包含屬性節點).
複製節點
clone(): 克隆匹配的 DOM 元素, 返回值為克隆後的副本. 但此時複製的新節點不具有任何行為.
clone(true): 複製元素的同時也複製元素中的的事件
替換節點
replaceWith(): 將所有匹配的元素都替換為指定的 HTML 或 DOM 元素
replaceAll(): 顛倒了的 replaceWith() 方法.
注意: 若在替換之前, 已經在元素上綁定了事件, 替換後原先繫結的事件會與原先的元素一起消失
包裹節點
wrap(): 將指定節點用其他標記包裹起來. 該方法對於需要在文件中插入額外的結構化標記非常有用, 而且不會破壞原始文件的語義.
wrapAll(): 將所有匹配的元素用一個元素來包裹. 而 wrap() 方法是將所有的元素進行單獨包裹.
wrapInner(): 將每一個匹配的元素的子內容(包括文字節點)用其他結構化標記包裹起來.