jQuery 實戰讀書筆記之第四章：使用特性、屬性和數據

使用屬性

/*
每個元素都有一或多個特性，，這些特性的用途是給出相應元素或其內容的附加信息。（出自 JavaScript 高級程式設計）
*/
/*
特性是固有的 JavaScript 對象
屬性指的是在標記中指定的 DOM 元素值
屬性值的類型始終是字元串
*/
/*
如果屬性存在相應的 DOM 的內置特性值，那麼對象唄同步
如果屬性作為一個內建屬性存在並且是一個布爾值，那麼該值不會被同步
*/
var checkbox = document.getElementById('checkbox-1');

//屬性在沒有初始值的情況下為 null
console.log('The value of attribute of title: ' + checkbox.getAttribute('title'));
//特性在沒有初始值的情況下為空
console.log('The value of property of title: ' + checkbox.title);

console.log(checkbox.getAttribute('title') === checkbox.title);

checkbox.title = 'New title!';
console.log(checkbox.getAttribute('title') === checkbox.title);

checkbox.setAttribute('title', 'Another title!');
console.log(checkbox.getAttribute('title') === checkbox.title);

console.log(checkbox.getAttribute('checked') === checkbox.checked);


/*
對屬性支持的檢測
*/
if('required' in document.createElement('input')){
    console.log('The property of required is supported!')
}else{
    console.log('The property of required is not supported!')
}


/*
attr(name) 方法用於獲取第一個匹配元素的屬性值，屬性名稱大小寫不敏感（JavaScript 本身是區分大小寫的）
如果沒有匹配元素，返回 undefined
*/
var attrValue = $('#li1').attr('data-level');
console.log('id 為 li1 的 li 元素的 data-level 屬性值為 ' + attrValue);

/*
attr(name, value)
value(String|Number|Boolean|Function)：除非設置的是函數，否則都會轉換為字元串；函數的話，每個元素都會調用函數，傳遞的參數為
元素的索引和當前命名屬性的值
返回 jQuery 集合
*/
var $titles = $('[title]').attr('title', function(index, previousValue){
    return previousValue + ' I am element ' + index + 
        ' and my name is ' + (this.id || 'unset');
});
console.log($titles);

/*
attr(attributes)
一次指定多個屬性值
*/
var $inputs = $('input').attr({
    value: '',
    title: 'Please enter a value'
});
console.log('設置屬性後的 input：');
console.log($inputs);

/*
removeAttr(name)
刪除屬性
name(String)：要刪除的屬性名稱或者名稱的集合，用空格分割

刪除屬性並不會刪除 DOM 元素對應的特性
*/
var $imgAfterDelAttr = $('img').removeAttr('title alt');
console.log('刪除 title 和 alt 屬性後的 img 集合： ');
console.log($imgAfterDelAttr);