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

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

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

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

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

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

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

必須傳參

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在控制臺(tái)查看運(yùn)行結(jié)果

console.log(res)

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