jQuery(3)修改元素

2021-10-01 03:37:11 字數 2193 閱讀 5961

如果乙個引數可寫可不寫,通常會用括起來,表示可選,比如: $元素.html(["新內容"]),表示引數"新內容"可寫可不寫,今後實際呼叫時,千萬不用加。只是技術手冊中的一種書寫習慣而已

修改內容:

1. 獲取或修改原始html片段:

dom: 元素.innerhtml

jq中: $元素.html([新內容])

2. 獲取或修改純文字內容:

dom: 元素.textcontent

jq中: $元素.text([新內容])

3. 獲取或修改表單元素的值:

dom: 元素.value

jq中: $元素.val([新內容])

修改屬性

1.html標準屬性

dom: 即可用getattribute()和setattribute()

又可用.屬性名

jq中: $元素.attr("屬性名"[,"新屬性值"])

代替getattribute()和setattribute()

$元素.prop("屬性名"[,"新屬性值"])

代替了dom中的.操作!

2.狀態屬性:值為bool型別

dom: 不能用getattribute()/setattribute()

操作只能用 .狀態名 訪問

jq中: 也不能用$元素.attr()

只能用$元素.prop("狀態屬性",bool)

比如: 禁用元素:

$元素.prop("disabled",true)

比如: 選中乙個checkbox

$元素.prop("checked",true)

3.自定義擴充套件屬性

dom: 只能用getattribute()和setattribute

不能用 .屬性名 訪問

jq中: 只能用$元素.attr()

不能用$元素.prop()

修改樣式:

1. 獲取或修改內聯樣式:

dom: 元素.style.css屬性="值"

jq中: $元素.css("css屬性","值")

簡寫: 控制顯示隱藏:

$元素.show() 等效於 .css("display","block")

.            hide() 等效於 .css("display","none")

問題: dom中獲採樣式不能用.style,因為.style只能獲得內聯樣式。所以,dom中被迫使用getcomputedstyle()來獲得計算後的樣式。jquery中,.css()函式有沒有這個問題?

答: 沒有!jq中.css()可自動切換.style和getcomputedstyle()。使用.css()即可以修改所有樣式,也可以獲取所有樣式。為什麼:

.css()內部自動判斷:

如果沒有給新的css屬性值,就呼叫getcomputedstyle()自動執行獲取操作。

如果給了新的css屬性值,就自動切換成.style.css屬性,執行修改操作。

問題: 用.style.css屬性一次只能修改乙個css屬性,如果同時批量修改多個css屬性,**會很繁瑣!

解決: 今後只要批量修改css屬性,都要用class

問題: dom中.classname只能整體替換所有class中的類名,或者使用字串操作,修改或刪除其中某個一類名。比如: ,想去掉btn-success,保留btn和active,只能用字串替換操作,非常不方便。

2. 專門操作class的函式:

$元素.addclass("類名 ...")

$元素.removeclass("類名")

var bool=$元素.hasclass("類名") 判斷乙個元素是否包含某個class

簡化: 因為經常需要在有和沒有某個class之間來回切換元素的樣式,所以,今後,只要反覆切換乙個元素的class時,可簡寫為: $元素.toggleclass("類名")

原理: 等效於:

if(有)

就移除else

就新增強調: toggleclass()不能代替addclass()

toggleclass()是一次有,一次沒有

addclass()始終新增

只有明確在兩種狀態之間來回切換時,才能使用toggleclass()

jQuery 修改元素屬性

1 attr方法 獲取匹配的元素集合中的第乙個元素的屬性的值 或 設定匹配元素指定的屬性 使用說明 1 只傳乙個引數的情況 1 字串 屬性名稱 只傳乙個字串屬性名稱 表示獲取匹配的元素集合中的第乙個元素的屬性的值 2 屬性 值 集合物件 一次性設定多個屬性 2 傳兩個引數的情況 1 第乙個引數 字串...

jQuery 基礎 修改元素樣式

修改元素樣式 一 修改元素的類 addclass names removeclass names 給元素增加類 給元素刪除類 hasclass 方法 上述 的乙個簡便方法 toggleclass 二 直接修改元素的樣式 獲取或修改樣式 css name,value 方法 三 獲取或設定元素的尺寸 w...

DOM修改元素

修改元素 1 修改內容 functionfun 通過innertext屬性可讀取或設定標籤的內部文字 functionfun 也可以通過innerhtml屬性獲取或設定內部文字。兩者的區別 innerhtml會按照html規則解析文字,而innertext只是當作普通文字內容。2 修改樣式 a.st...