jquery屬性與自訂屬性運算:attr()和removeAttr()

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)

以上是jquery屬性與自訂屬性運算:attr()和removeAttr()的詳細內容。更多資訊請關注PHP中文網其他相關文章！