使用jQuery操作DOM

2021-09-22 10:04:32 字數 1142 閱讀 2212

首先要了解為什麼要使用jquery操作dom

先對比一下js操作dom和jquery操作dom

使用js操作的方法:

window.onload=function () ;
使用jquery操作的方法:

$(function () )
對比一下,不難發現,使用jquery的方式來操作dom更加的簡介,方便

用jqueryx操作dom重點在樣式操作和類操作:

樣式屬性操作,就是".css()"的方式

作用:設定或獲取元素的樣式屬性值

設定樣式屬性操作:

a設定單個樣式:

// 第乙個引數表示:樣式屬性名稱

// 第二個引數表示:樣式屬性值

$(selector).css(「color」, 「red」);

b設定多個樣式:(也可以設定單個)

// 引數為 {}(物件)

$(selector).css();

獲採樣式屬性操作:

// 引數表示要獲取的 樣式屬性名稱

$(selector).css(「font-size」);

此時,會返回」font-size」樣式屬性對應的值

新增類樣式:

(addclass) 為指定元素新增類classname

移除類樣式:

removeclass(classname) 為指定元素移除類 classname

判斷有沒有類樣式:

hasclass(calssname) 判斷指定元素是否包含類 classname

切換類樣式:

toggleclass(classname) 為指定元素切換類 classname,該元素有類則移除,沒有指定類則新增。

注意點:

操作類樣式的時候,所有的類名,都不帶點(.)

學習完之後,做個小案例測試一下:

案例效果:

JQuery (簡化dom操作)

jquery本質是乙個js檔案,裡面是js常用功能的封裝。比如繫結事件,修改內容,修改樣式等。是乙個函式,是jquery 的簡寫,它的一些過載函式見下。elements 將乙個或多個dom物件 原生js獲取到的dom物件 轉化為jquery物件。id1 html 返回id為id1的jquery物件,...

jQuery操作DOM物件

val 方法 作用 設定或返回表單元素的值,例如 input,select,textarea的值 獲取匹配元素的值,只匹配第乙個元素 selector val 這裡的val 是空值,尤其注意 設定所有匹配到的元素的值 selector val 具體值 text 方法 作用 設定或獲取匹配元素的文字內...

Jquery操作DOM節點

1 向dom節點中追加元素 結果 我想說 你好 結果 我想說 你好 prepend 向每個匹配元素內部前置元素 例如 我想說 p prepend 你好 結果 你好我想說 prependto 將所有匹配的元素前置到指定的元素中 例如 我想說 你好 prependto p 結果 你好我想說 after ...