一、自定義屬性:
??首先我們來弄清楚什么是自定義屬性:
<ul>
<li age='10'>A</li>
<li age='11'>B</li>
<li age='12'>C</li>
<li age='13'>D</li>
</ul>
??由html的基礎(chǔ)知識我們知道论熙,html標(biāo)簽是不存在age屬性的男旗,而此時我們自己添加上去的age屬性就稱之為自定義屬性北戏。由于DOM.的方式只能獲取html標(biāo)簽原有的屬性蒜胖,因此自定義屬性就不可以直接通過該方式進行操作,比如下面這段代碼炸庞,就會輸出undefined:
var list = document.getElementsByTagName('li');
for(let i = 0;i<list.length;i++){
list[i].onclick = function(){
console.log(this.age); //結(jié)果為undefined
}
}
二钱床、原生JS操作自定義屬性:
//自定義屬性的獲取:
對象.getAttribute('鍵');
//自定義屬性的添加與修改
對象.setAttribute('鍵',值);
//自定義屬性的刪除:
對象.removeAttribute('鍵');
??需要注意的是get/set/removeAttribute方法不僅僅可以操作自定義屬性埠居,還可以對DOM的系統(tǒng)屬性進行操作(系統(tǒng)屬性.方式更便捷)
三查牌、jQuery操作屬性:
??jQuery中可以通過attr方法直接操作所有屬性:
//屬性的獲取:
$('對象').attr(屬性)
//屬性的添加與修改
$('對象').attr(屬性滥壕,值)
//屬性的刪除:
$('對象').removeAttr(屬性);
??需要注意的是纸颜,jQuery中attr方法在操作表單元素選中屬性時(selected、checked等)時返回的時undefined绎橘。這是就需要使用prop方法:
//屬性的獲刃菜铩:
$('對象').prop(屬性);
//屬性的添加與修改
$('對象').prop(屬性,值);
??tips:prop一般用來設(shè)置js對象的屬性称鳞,故不會再html中顯示涮较;attr是這設(shè)置html屬性,可顯示