jquery中attr和prop的區(qū)別分析
在高版本的jquery引入prop方法后,什么時(shí)候該用prop?什么時(shí)候用attr?它們兩個(gè)之間有什么區(qū)別?這些問題就出現(xiàn)了。
關(guān)于它們兩個(gè)的區(qū)別,網(wǎng)上的答案很多。這里談?wù)勎业男牡?,我的心得很?jiǎn)單:
• 對(duì)于HTML元素本身就帶有的固有屬性,在處理時(shí),使用prop方法。
• 對(duì)于HTML元素我們自己自定義的DOM屬性,在處理時(shí),使用attr方法。
上面的描述也許有點(diǎn)模糊,舉幾個(gè)例子就知道了。
<a target="_self" class="btn">百度</a>
這個(gè)例子里<a>元素的DOM屬性有“href、target和class",這些屬性就是<a>元素本身就帶有的屬性,也是W3C標(biāo)準(zhǔn)里就包含有這幾個(gè)屬性,或者說在IDE里能夠智能提示出的屬性,這些就叫做固有屬性。處理這些屬性時(shí),建議使用prop方法。
<a href="#" id="link1" action="delete">刪除</a>
這個(gè)例子里<a>元素的DOM屬性有“href、id和action”,很明顯,前兩個(gè)是固有屬性,而后面一個(gè)“action”屬性是我們自己自定義上去的,<a>元素本身是沒有這個(gè)屬性的。這種就是自定義的DOM屬性。處理這些屬性時(shí),建議使用attr方法。使用prop方法取值和設(shè)置屬性值時(shí),都會(huì)返回undefined值。
再舉一個(gè)例子:
<input id="chk1" type="checkbox" />是否可見 <input id="chk2" type="checkbox" checked="checked" />是否可見
像checkbox,radio和select這樣的元素,選中屬性對(duì)應(yīng)“checked”和“selected”,這些也屬于固有屬性,因此需要使用prop方法去操作才能獲得正確的結(jié)果。
$("#chk1").prop("checked") == false $("#chk2").prop("checked") == true
如果上面使用attr方法,則會(huì)出現(xiàn):
$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"
全文完。
以上就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
- Jquery中attr與prop的區(qū)別詳解
- jQuery獲取attr()與prop()屬性值的方法及區(qū)別介紹
- jQuery中attr()與prop()函數(shù)用法實(shí)例詳解(附用法區(qū)別)
- jquery判斷復(fù)選框選中狀態(tài)以及區(qū)分attr和prop
- jQuery中 prop() attr()使用詳解
- jQuery中attr()和prop()在修改checked屬性時(shí)的區(qū)別
- jQuery學(xué)習(xí)之prop和attr的區(qū)別示例介紹
- jquery中prop()方法和attr()方法的區(qū)別淺析
- jquery獲取自定義屬性(attr和prop)實(shí)例介紹
- jquery 獲取自定義屬性(attr和prop)的實(shí)現(xiàn)代碼
- 關(guān)于jquery中attr()和prop()方法的區(qū)別
相關(guān)文章
實(shí)例講解JQuery中this和$(this)區(qū)別
這篇文章主要介紹了實(shí)例講解JQuery中this和$(this)的區(qū)別,this表示當(dāng)前的上下文對(duì)象是一個(gè)html對(duì)象,可以調(diào)用html對(duì)象所擁有的屬性和方法,$(this),代表的上下文對(duì)象是一個(gè)jquery的上下文對(duì)象,可以調(diào)用jquery的方法和屬性值,需要的朋友可以參考下2014-12-12jquery基礎(chǔ)教程之deferred對(duì)象使用方法
jquery基礎(chǔ)教程之deferred對(duì)象使用方法2014-01-01jQuery-onload讓第一次頁(yè)面加載時(shí)圖片是淡入方式顯示
第一次打開一個(gè)頁(yè)面時(shí),讓加載好的圖片先隱藏,然后再執(zhí)行動(dòng)畫fadeIn,這里的load事件:當(dāng)所有子元素已經(jīng)被完全加載完成時(shí),load事件被發(fā)送到這個(gè)元素2012-05-05jQuery 寫的簡(jiǎn)單打字游戲可以提示正確和錯(cuò)誤的次數(shù)
這篇文章主要介紹了使用jQuery寫的簡(jiǎn)單打字游戲可以提示正確和錯(cuò)誤的次數(shù),需要的朋友可以參考下2014-07-0720款非常優(yōu)秀的 jQuery 工具提示插件 推薦
工具提示(Tooltip)在網(wǎng)站中的一個(gè)小功能,但卻有很重要的作用,常用于顯示一些溫馨的提示信息。如果網(wǎng)站中的工具提示功能做得非常有創(chuàng)意的話能夠加深用戶對(duì)網(wǎng)站印象2012-07-07基于jQuery實(shí)現(xiàn)Ajax驗(yàn)證用戶名是否可用實(shí)例
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)Ajax驗(yàn)證用戶名是否可用實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-03-03jquery插件validation實(shí)現(xiàn)驗(yàn)證身份證號(hào)等
這篇文章主要介紹了jquery插件validation實(shí)現(xiàn)驗(yàn)證身份證號(hào)、護(hù)照、電話號(hào)碼、email十分的簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下。2015-06-06用隊(duì)列模擬jquery的動(dòng)畫算法實(shí)例
這篇文章主要介紹了用隊(duì)列模擬jquery的動(dòng)畫算法,實(shí)例分析了用隊(duì)列模擬jquery的動(dòng)畫算法的原理與實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01