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

預(yù)備知識: 讀取器,設(shè)置器

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

2. 傳入一個參數(shù),執(zhí)行讀取操作getter,返回該參數(shù)的當(dāng)前值,叫:讀取器/獲取器

3. 傳入二個參數(shù),執(zhí)行賦值操作setter,修改當(dāng)前參數(shù)的值,叫:設(shè)置器/修改器

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

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

必須傳參

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

單參數(shù)為獲取:當(dāng)前屬性的值

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

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

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

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

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

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

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

attr()的屬性值,還支持回調(diào)函數(shù)

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

注意: 回調(diào)返回的數(shù)值類型,會自動轉(zhuǎn)為字符類型再賦值給width屬性

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

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

刪除圖片的內(nèi)聯(lián)樣式屬性style

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

可以刪除多個屬性,多個屬性之間用空格分開,返回當(dāng)前元素的狀態(tài)

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

在控制臺查看運行結(jié)果

console.log(res)

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