jquery中attr和prop的區(qū)別分析
在高版本的jquery引入prop方法后，什么時(shí)候該用prop？什么時(shí)候用attr？它們兩個(gè)之間有什么區(qū)別？這些問(wèn)題就出現(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è)屬性，或者說(shuō)在IDE里能夠智能提示出的屬性，這些就叫做固有屬性。處理這些屬性時(shí)，建議使用prop方法。
<a href="#" id="link1" action="delete">刪除</a>
這個(gè)例子里<a>元素的DOM屬性有“href、id和action”，很明顯，前兩個(gè)是固有屬性，而后面一個(gè)“action”屬性是我們自己自定義上去的，<a>元素本身是沒(méi)有這個(gè)屬性的。這種就是自定義的DOM屬性。處理這些屬性時(shí)，建議使用attr方法。使用prop方法取值和設(shè)置屬性值時(shí)，都會(huì)返回undefined值。
再舉一個(gè)例子：
<input id="chk1" type="checkbox" />是否可見(jiàn) <input id="chk2" type="checkbox" checked="checked" />是否可見(jiàn)
像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)文章
這篇文章主要介紹了被jQuery拋棄的幾個(gè)函數(shù)及其替代函數(shù)，我們?cè)谧鲰?xiàng)目開(kāi)發(fā)的時(shí)候一定要注意，分享給大家參考下。2015-05-05
接下來(lái)幾篇教程，將重點(diǎn)講解jquery1.4新增的16個(gè)方法，有幾個(gè)方法還是非常實(shí)用的。2010-02-02
jquery的extend和fn.extend的使用說(shuō)明
jQuery.fn.extend(object); 對(duì)jQuery.prototype進(jìn)得擴(kuò)展，就是為jQuery類(lèi)添加“成員函數(shù)”。jQuery類(lèi)的實(shí)例可以使用這個(gè)“成員函數(shù)”。2011-01-01
jquery css實(shí)現(xiàn)流程進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了jquery css實(shí)現(xiàn)流程進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
Jquery與Bootstrap實(shí)現(xiàn)后臺(tái)管理頁(yè)面增刪改查功能示例
本篇文章主要介紹了Jquery與Bootstrap實(shí)現(xiàn)后臺(tái)管理頁(yè)面增刪改查功能示例，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-01-01
jQuery實(shí)現(xiàn)當(dāng)拉動(dòng)滾動(dòng)條到底部加載數(shù)據(jù)的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)當(dāng)拉動(dòng)滾動(dòng)條到底部加載數(shù)據(jù)的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)滾動(dòng)事件的監(jiān)聽(tīng)、響應(yīng)及數(shù)據(jù)加載相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
jQuery滾動(dòng)加載圖片效果的實(shí)現(xiàn)
實(shí)現(xiàn)滾動(dòng)加載的一個(gè)功能函數(shù)，需要的朋友可以參考一下2013-03-03
學(xué)習(xí)jquery必備 api中英文對(duì)照的chm手冊(cè) 下載
學(xué)習(xí)jquery必備 api中英文對(duì)照的chm手冊(cè) 下載...2007-05-05
頁(yè)面加載完成后再執(zhí)行JS的jquery寫(xiě)法以及區(qū)別說(shuō)明
本篇文章主要是對(duì)頁(yè)面加載完成后再執(zhí)行JS的jquery寫(xiě)法以及區(qū)別進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
這篇文章主要介紹了jQuery中g(shù)et()方法用法,實(shí)例分析了get()方法返回匹配集合DOM元素的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12