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);

/*

屬性若是沒有顯式設置就是 null，而屬性則根據類型有默認值

*/

console.log('The value of attribute of checked: ' + checkbox.getAttribute('checked'));

console.log('The value of property of checked: ' + checkbox.checked);

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);

/*

若是屬性不存在，返回的是 undefined

*/

var liName = $('#li1').attr('name');

console.log('id 爲 li1 的 li 元素的 name 屬性值爲 ' + liName);

/*

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:not(:submit)').attr({

value: '',

title: 'Please enter a value'

});

console.log('設置屬性後的 input：');

console.log($inputs);

/*

removeAttr(name)

刪除屬性

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

刪除屬性並不會刪除 DOM 元素對應的特性

方法內部使用了 JS 的 removeAttribute()

返回的仍是 jQuery 集合

*/

var $imgAfterDelAttr = $('img').removeAttr('title alt');

console.log('刪除 title 和 alt 屬性後的 img 集合： ');

console.log($imgAfterDelAttr);

/*

能夠使用 attr() 方法處理特性，也能夠使用 prop() 方法

*/

/*

prop(name)

獲取匹配集合中第一個元素給定的特性值

name(String)

若是沒有匹配元素或沒有值，返回 undefined

*/

console.log('id 爲 checkbox-3 的 checkbox 的 checked 特性值：' + $('#checkbox-3').prop('checked'));

/*

prop(name, value)

爲集合的全部元素設置給定命名的特性和值

name(String)

value(Any|Function)，若是是函數，傳遞的參數是集合中元素的索引及命名的屬性的當前值

*/

$('input:checkbox').prop('checked', function(index, attrValue){

if(index % 2 == 0){

console.log(attrValue);

//attrValue = true; //這樣設置了沒有起做用

$(this).prop('checked', true);

}

});

/*

prop(properties)

properties(Object)

*/

$(':submit').prop({

disabled: true,

class: 'red-border'

});

/*

removeProp(name)

刪除集合中每一個元素的特性

name(String)：不支持以空格分割的名稱列表

這個方法不該該用來刪除原生特性，好比 required 和 checked，刪除後沒法再次添加

*/

$('#checkbox-4').removeProp('checked').prop('checked', true); //啥狀況？？？

/*

data(name, value)

爲集合中的全部元素添加傳遞的數據

name(String)

value(Any)：除了 undefined

能夠保存數據的類型

*/

$('#li4').data('last-value', 10);

console.log(typeof $('#li4').attr('lastValue')); //undefined???說好的 String 呢？ last-value 轉換爲 lastValue 是 jQuery3 修改的

console.log(typeof $('#li4').data('last-value'));

/*

對自定義屬性 data-technologies 的兩種讀法

*/

console.log($('#li4').attr('data-technologies'));

console.log($('#li4').data('technologies'));

/*

data(Object)

略

*/

/*

jQuery.data() 等價的低級方法 $.data()

*/

$.data(document.getElementById('li3'), 'price', 55);

$('#li2').data('price', 55);

/*

data([name])

使用指定的名字查詢存儲的數據或 HTML5 data-* 屬性，若是沒有指定名字，返回全部存儲的數據

name(String)

若是沒有匹配元素或沒有值，返回 undefined

*/

console.log($('#li2').data('price'));

console.log($('#li4').data()); //只取了 data-* 開頭的數據和用 data(name, value) 設定的數據

/*

jQuery 有一個存儲區，是存儲 jQuery 內部使用的存儲數據的區域

data() 方法會先查找內存中的數據，找不到纔會用指定的名字去查找 HTML 元素的 data-* 屬性，若是找到了那麼就會把

值存放到內存中，因此以後用 attr() 對該屬性作修改再用 data() 取仍是內存中的數據

*/

console.log($('#level').data('custom'));

console.log($('#level').attr('data-custom'));

$('#level').data('custom', 'new value');

console.log($('#level').data('custom'));

console.log($('#level').attr('data-custom')); //這裏讀到的仍是老的「foo」，上面的語句修改的是內存中的嗎？？？

/*

removeData([name]) == $.removeData(element[, name])

name(String|Array) 要刪除的數據的數據名，包括名字或以空格分割的名字，也能夠是數組；若是沒有參數，刪除全部數據

*/

$('#li3').removeData('custom', 'technologies');

$('#li3').removeData('custom technologies');

/*

jQuery.hasData(element)

*/

console.log('id 爲 li4 的元素是否包含自定義數據：' + $.hasData(document.getElementById('li4')));