一、jQuery 中的 DOM 操作

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

（2）DOM 操作的分類:

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

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

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

?

二、查找節點

（1）查找元素節點:

通過 jQuery 選擇器完成.

（2）查找屬性節點:

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

?

四、創建節點

（1）創建節點:

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

（2）注意:

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

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

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

?

五、插入節點

（1）動態創建了 HTML 元素之后, 還需要將新 創建的節點插入到文檔中, 即成為文檔中某 個節點的子節點

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

（2）創建節點和插入節點示例

var newP =$("<p>武廣高速鐵路即將通車！</p>"); newP.insertAfter(“#chapter”); //將創建的newP元素插入到ID為#chapter的元素之后//或者 newP.appendTo(“body”); //插入到body元素里

?

六、刪除節點

（1）remove()

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

（2）empty()

清空節點 – 清空元素中的所有后 代節點(不包含屬性節點).

?

七、復制節點

（1）clone()

克隆匹配的 DOM 元素, 返回 值為克隆后的副本. 但此時復制的新節 點不具有任何行為.

（2）clone(true)

復制元素的同時也復制元 素中的的事件

?

八、替換節點

（1）replaceWith()

? ? ?將所有匹配的元素都替換為 指定的 HTML 或 DOM 元素

（2）replaceAll()

? ? 顛倒了的 replaceWith() 方法.

注意: 若在替換之前, 已經在元素上綁定了 事件, 替換后原先綁定的事件會與原先的元 素一起消失

?

九、包裹節點

（1）wrap()

? ? 將指定節點用其他標記包裹起來. 該方法對于需要在文檔中插入額外的結構 化標記非常有用, 而且不會破壞原始文檔的 語義. （2）wrapAll()

? ? 將所有匹配的元素用一個元素來包裹. 而 wrap() 方法是將所有的元素進行單獨包裹.

（3）wrapInner()

? ? ?將每一個匹配的元素的子內容(包括文本節點)用其他結構化標記包裹起 來

?

十、屬性操作

（1）attr(): 獲取html屬性和設置屬性

? ? ? ?當為該方法傳遞一個參數時, 即為某元素的獲取指定屬性

? ? ? ?當為該方法傳遞兩個參數時, 即為某元素設置 指定屬性的值

（2）jQuery 中有很多方法都是一個函數實現獲取和設 置.

? ? ? ?如: attr(), html(), text(), val(), height(), width(), css() 等.

（3）removeAttr(): 刪除指定元素的指定屬性

?

十一、樣式操作

（1）獲取 class 和設置 class

? ? ?class 是元素的一個屬性, 所以獲取 class 和設置 class 都可以使用 attr() 方 法來完成.

（2）追加樣式

? ? ?addClass()

（3）移除樣式

? ? ?removeClass() --- 從匹配的元素中刪除 全部或指定的 class

（4）切換樣式

? ? ? toggleClass() --- 控制樣式上的重復切 換.如果類名存在則刪除它, 如果類名不存在則添 加它.

（5）判斷是否含有某個樣式

? ? ?hasClass() --- 判斷元素中 是否含有某個 class, 如果有, 則返回 true; 否則返 回 false

?

十二、設置和獲取 HTML, 文本和值

（1）讀取和設置某個元素中的 HTML 內容

? ? ?html() . 該 方法可以用于 XHTML, 但不能用于 XML 文檔

（2）讀取和設置某個元素中的文本內容

? ? ?text(). 該方法 既可以用于 XHTML 也可以用于 XML 文檔.

（3）讀取和設置某個元素中的值

? ? ?val() --- 該方法類似 JavaScript 中的 value 屬性. 對于文本框, 下拉列 表框, 單選框該方法可返回元素的值(多選框只能 返回第一個值).如果為多選下拉列表框, 則返回一 個包含所有選擇值的數組

（4）val() 方法的兩個練習

?

十三、常用的遍歷節點方法

（1）取得匹配元素的所有子元素組成的集合

? ? ? ?children(). 該方法只考慮子元素而不考慮任 何后代元素.

（2）取得匹配元素后面緊鄰的同輩元素的集合 (但集合中只有一個元素)

? ? ?next()

（3）取得匹配元素前面緊鄰的同輩元素的集合 (但集合中只有一個元素)

? ? ?prev()

（4）取得匹配元素前后所有的同輩元素

? ? ?siblings()

?

十四、CSS-DOM 操作

（1）獲取和設置元素的樣式屬性

? ? ?css()

? ? 獲取和設置元素透明度?opacity 屬性

（2）獲取和設置元素高度, 寬度: height(), width(). 在設 置值時, 若只傳遞數字, 則默認單位是 px. 如需要 使用其他單位則需傳遞一個字符串, 例如 $(“p:first”).height(“2em”);

（3）獲取元素在當前視窗中的相對位移: offset(). 其返回對象包含了兩個屬性: top, left. 該方法只對可見元素有效

?

十五、jQuery 中的事件 -- 加載 DOM

在頁面加載完畢后, 瀏覽器會通過 JavaScript 為 DOM 元素添加事件. 在常規 的 JavaScript 代碼中, 通常使用 window.onload 方法, 在 jQuery 中使用 $(document).ready() 方法.

?

十六、事件綁定

（1）對匹配的元素進行特定的事件綁定

? ? ? ? ?bind()

（2）實例

?

十七、合成事件

（1）hover()

模擬光標懸停時間. 當光標移動到元 素上時, 會觸發指定的第一個函數, 當光標移 出這個元素時, 會觸發指定的第二個函數.

（2）toggle()

用于模擬鼠標連續單擊事件. 第一次 單擊元素, 觸發指定的第一個函數, 當再一次 單擊同一個元素時, 則觸發指定的第二個函 數, 如果有更多個函數, 則依次觸發, 直到最 后一個.

toggle() 的另一個作用: 切換元素的可見狀態

?

十八、事件冒泡

（1）事件會按照 DOM 層次結構像水泡一樣不 斷向上只止頂端

（2）解決: 在事件處理函數中返回 false, 會對事 件停止冒泡. 還可以停止元素的默認行為.

?

十九、事件對象的屬性

（1）事件對象

? ?當觸發事件時, 事件對象就被創 建了. 在程序中使用事件只需要為函數添加 一個參數. 該事件對象只有事件處理函數才 能訪問到. 事件處理函數執行完畢后, 事件 對象就被銷毀了.

（2）event.pageX, event.pageY

? ? 獲取到光標相對 于頁面的 x, y 坐標.

?

二十、移除事件

（1）移除某按鈕上的所有 click 事件

? ? $(“btn”).unbind(“click”)

（2）移除某按鈕上的所有事件:

? ? ?$(“btn”).unbind();

（3）one()

? ? ?該方法可以為元素綁定處理函數. 當處理函 數觸發一次后, 立即被刪除. 即在每個對象上, 事件 處理函數只會被執行一次.

$('a').one("click",function(){alert('just one click and remove");return false; });

?

總結

以上是生活随笔為你收集整理的jQuery 基础教程 （四）之jQuery中的DOM操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。