jQuery中DOM常見操作是什么

本篇內(nèi)容介紹了“jQuery中DOM常見操作是什么”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

DOM屬性操作

屬性列表

DOM文檔操作

一、添加元素

1、內(nèi)部添加

1. 向當(dāng)前元素的內(nèi)部追加內(nèi)容添加到末尾

append($(selector))

1. 將當(dāng)前元素在某元素內(nèi)部追加。但由于會根據(jù)需要對當(dāng)前元素進(jìn)行移動，所以jQuery對象更改了，可用end()還原

appendTo($(selector))

1. 向當(dāng)前元素的內(nèi)部前置內(nèi)容

prepend($(selector))

1. 將當(dāng)前元素在某元素內(nèi)部前置。類似于appendTo()，會改變對象

prependTo($(selector))

2、外部添加

1. 向當(dāng)前元素之后插入內(nèi)容

after($(selector))

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

insertAfter($(selector))

1. 向當(dāng)前元素之前插入內(nèi)容

before($(selector))

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

insertBefore($(selector))

二、刪除元素

1. 刪除當(dāng)前元素，該元素包含的文本內(nèi)容和后代元素會一起刪除掉，綁定的事件也不復(fù)存在

remove()

1. 同樣是刪除當(dāng)前元素，但是綁定的事件還是存在的

detach()

1. 清空當(dāng)前元素，該元素的文本內(nèi)容和后代元素都將刪除，但保留其本身

empty()

三、替換元素

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

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

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

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

DOM樣式操作

一丶概要

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

二丶樣式操作函數(shù)

1. CSS()

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

語法格式:

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

1. height()

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

1. width()

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

1. innerHeight(),innerWidth()

置或返回當(dāng)前匹配元素的內(nèi)寬度或者高度

語法格式:

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

1. outerHeight(),outerWidht()

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

語法格式:

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

DOM事件操作

一丶事件API

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

二丶方法

1. on()方法

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

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

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

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

• easing：可選參數(shù)。用來指定切換效果，默認(rèn)是"swing"，可用參數(shù)"linear"。

fn：在動畫完成時執(zhí)行的函數(shù)，每個元素執(zhí)行一次。

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

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

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

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

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

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

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

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

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

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

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

“jQuery中DOM常見操作是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！