使用屬性

/* 每個元素都有一或多個特性，，這些特性的用途是給出相應元素或其內容的附加信息。（出自 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')));

?

轉載于:https://www.cnblogs.com/fxb248/p/8344061.html

總結

以上是生活随笔為你收集整理的jQuery 实战读书笔记之第四章：使用特性、属性和数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。