jQuery 中的 DOM 操作

DOM(Document Object Model―文檔對象模型)：一種與瀏覽器,平臺, 語言無關的接口,使用該接口可以輕松地訪問頁面中所有的標準組件

DOM 操作的分類:

DOM Core: DOM Core 并不專屬于 JavaScript, 任何一種支持 DOM的程序設計語言都可以使用它. 它的用途并非僅限于處理網頁,也可以用來處理任何一種是用標記語言編寫出來的文檔, 例如: XML

HTML DOM: 使用 JavaScript和 DOM 為 HTML文件編寫腳本時,　有許多專屬于 HTML-DOM的屬性

CSS-DOM:針對于 CSS操作, 在 JavaScript中, CSS-DOM 主要用于獲取和設置 style對象的各種屬性

查找節點

查找節點:

查找元素節點:通過 jQuery 選擇器完成.

查找屬性節點:查找到所需要的元素之后, 可以調用 jQuery對象的 attr() 方法來獲取它的各種屬性值

創建節點

創建節點: 使用 jQuery 的工廠函數 $(): $(html);會根據傳入的 html 標記字符串創建一個 DOM對象, 并把這個 DOM對象包裝成一個 jQuery 對象返回.

注意:

動態創建的新元素節點不會被自動添加到文檔中,而是需要使用其他方法將其插入到文檔中;

當創建單個元素時,需注意閉合標簽和使用標準的 XHTML 格式.例如創建一個<p>元素,可以使用 $(“<p/>”) 或 $(“<p></p>”),但不能使用 $(“<p>”) 或 $(“<P>”)

創建文本節點就是在創建元素節點時直接把文本內容寫出來;創建屬性節點也是在創建元素節點時一起創建

插入節點(1)

動態創建 HTML元素并沒有實際用處, 還需要將新創建的節點插入到文檔中,即成為文檔中某個節點的子節點

插入節點(2)

以上方法不但能將新創建的 DOM元素插入到文檔中, 也能對原有的 DOM元素進行移動.

刪除節點

remove(): 從 DOM中刪除所有匹配的元素, 傳入的參數用于根據 jQuery表達式來篩選元素. 當某個節點用 remove()方法刪除后, 該節點所包含的所有后代節點將被同時刪除.這個方法的返回值是一個指向已被刪除的節點的引用.

empty(): 清空節點