jquery屬性與自定義屬性操作:attr()和removeAttr()

預備知識: 讀取器,設置器

1. 有一些函數,可以根據參數的數量不同,執行不同的功能,返回不同的值,類似于功能重載

2. 傳入一個參數,執行讀取操作getter,返回該參數的當前值,叫:讀取器/獲取器

3. 傳入二個參數,執行賦值操作setter,修改當前參數的值,叫:設置器/修改器

4. 這種根據參數個數決定執行操作類型的方法,在jQuery中非常多,大家要留意*/

1. attr():元素屬性的獲取與設置

必須傳參

var res = $('img').attr()

單參數為獲取:當前屬性的值

var res = $('#pic').attr('src')

雙參數為獲取,第一個是屬性名,第二個是要設置的新值

$('#pic').attr('src', '../images/gyy.jpg') 
$('#pic').attr('style', 'border-radius: 50%;box-shadow:2px 2px 2px #888')

由此可見,attr()是典型的集讀取器與設置器二合一的方法

attr()可以獲取到元素的自定義屬性

html5中,可以通過data-前綴給標簽添加用戶自定義屬性

var res = $('#pic').attr('data-nation')

attr()的屬性值,還支持回調函數

$('#pic').attr('width', function(){return 100+50})

注意: 回調返回的數值類型,會自動轉為字符類型再賦值給width屬性

var res = $('#pic').attr('width')

2. removeAttr():刪除元素的屬性

刪除圖片的內聯樣式屬性style

$('#pic').removeAttr('style')

可以刪除多個屬性,多個屬性之間用空格分開,返回當前元素的狀態

var res = $('#pic').removeAttr('alt title data-nation')

在控制臺查看運行結果

console.log(res)

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com