jQuery 基础教程 (四)之jQuery中的DOM操作
一、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操作的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 剑道独尊有女主角么是谁 剑道独尊里面的女
- 下一篇: Streaming的算法Reservoi