jQuery中DOM常見操作的示例分析

這篇文章主要介紹了jQuery中DOM常見操作的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

本文實例講述了jQuery中DOM常見操作。分享給大家供大家參考，具體如下：

DOM屬性操作

屬性列表

DOM文檔操作

一、添加元素

1、內部添加

1. 向當前元素的內部追加內容添加到末尾

append($(selector))

2. 將當前元素在某元素內部追加。但由于會根據需要對當前元素進行移動，所以jQuery對象更改了，可用end()還原

appendTo($(selector))

3. 向當前元素的內部前置內容

prepend($(selector))

4. 將當前元素在某元素內部前置。類似于appendTo()，會改變對象

prependTo($(selector))

2、外部添加

1. 向當前元素之后插入內容

after($(selector))

2. 將當前元素插入到某元素之后。類似于appendTo()，會改變對象

insertAfter($(selector))

3. 向當前元素之前插入內容

before($(selector))

4. 將當前元素插入到某元素之前。類似于appendTo()，會改變對象

insertBefore($(selector))

二、刪除元素

1. 刪除當前元素，該元素包含的文本內容和后代元素會一起刪除掉，綁定的事件也不復存在

remove()

2. 同樣是刪除當前元素，但是綁定的事件還是存在的

detach()

3. 清空當前元素，該元素的文本內容和后代元素都將刪除，但保留其本身

empty()

三、替換元素

1. 移動頁面上原有的元素來替換當前選定的頁面元素，也可以添加新元素來替換

replaceWith($(selector))
replaceWith($(html))

2. 用當前選定的元素來替換某元素，可以使頁面上原有元素，也可以是新元素。同樣會根據需要復制當前元素副本，從而更改jQuery對象

replaceAll($(selector))
replaceAll($(html))

DOM樣式操作

一丶概要

通過JavaScript獲取dom元素上的style屬性，我們可以動態的給元素賦予樣式屬性。在jQuery中我們要動態的修改style屬性我們只要使用css()方法就可以實現了

二丶樣式操作函數

1. CSS()

css()函數用于設置或返回當前jQuery對象所匹配的元素的css樣式屬性值,如果需要刪除指定的css屬性，使用函數將其值設為空字符串("")

語法格式:

$("selector").css(property [, value ])
$("selector").css( object )

2. height()

用于設置或返回當前匹配元素的高度
語法格式: $("selector").height( [ value ] )
如果省略了value參數，則表示獲取高度；如果指定了該參數，則表示設置高度。

3. width()

用于設置或返回當前匹配元素的寬度
語法格式: $("selector").width( [ value ] )

4. innerHeight(),innerWidth()

置或返回當前匹配元素的內寬度或者高度

語法格式:

$("selector").innerHeight( [ value ] )
$("selector").innerWidth( [ value ] )

5. outerHeight(),outerWidht()

獲取當前匹配元素的外高度(外寬度)

語法格式:

$("selector").outerHeight( [ includeMargin ] )
$("selector").outerWidth( [ includeMargin ] )

DOM事件操作

一丶事件API

jQuery對象的核心事件方法，核心事件函數，主要用于為元素的任意事件(包括自定義事件)添加、取消、觸發綁定的一個或多個事件處理函數

二丶方法

1. on()方法

說明:on() 方法在被選元素及子元素上添加一個或多個事件處理程序。
語法:$(selector).on(event,childSelector,data,function,map)

2. toggle([speed],[easing],[fn])

說明: 用于綁定兩個或多個事件處理器函數，以響應被選元素的輪流的click事件。如果元素是可 見的，切換為隱藏的；如果元素是隱藏的，切換為可見的.
語法:$(selector).toggle(speed,easing,function)
參數:

• speed： 隱藏/顯示 效果的速度。默認是 "0"毫秒。可能的值：slow，normal，fast。

• easing：可選參數。用來指定切換效果，默認是"swing"，可用參數"linear"。

fn：在動畫完成時執行的函數，每個元素執行一次。

3. change([[data],fn])

說明:當元素的值發生改變時，會發生change事件.該事件僅適用于文本域（text field），以及 textarea 和 select 元素。當用于 select 元素時，change事件會在選擇某個選項時發生。當用于 text field 或 text area 時，該事件會在元素失去焦點時發生

語法:$(selector).change(data,fn);

4. click([[data],fn])

說明: 觸發每一個匹配元素的click事件。這個函數會調用執行綁定到click事件的所有函數。
語法:$(selector).click(data,fn);

5. mouseover([[data],fn])

說明: 當鼠標指針位于元素上方時，會發生mouseover事件。該事件大多數時候會與mouseout事件一起使用。
與mouseenter事件不同，不論鼠標指針穿過被選元素或其子元素，都會觸發mouseover事件。只有在鼠標指針穿過被選元素時，才會觸發mouseenter事件
語法:$(selector).mouseover(data,fn);

6. mouseout([[data],fn])

1.說明:當鼠標指針從元素上移開時，發生mouseout事件。該事件大多數時候會與mouseover事件一起使用。
語法:$(selector).mouseout(data,fn);

7. select([[data],fn])

說明: 當textarea或文本類型的input元素中的文本被選擇時，會發生select事件
語法: $(selector).select(data,fn);

感謝你能夠認真閱讀完這篇文章，希望小編分享的“jQuery中DOM常見操作的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!