關(guān)于jQuery中.attr()和.prop()的問題探討
更新時(shí)間：2013年09月06日 18:00:16 作者：
寫了幾句代碼在ie8上能正常運(yùn)行，chrome和ff卻不行，prop()方法適用于Boolean值的屬性，添加屬性名稱該屬性就會(huì)生效應(yīng)該使用.prop()者兩點(diǎn)就是他們的區(qū)別吧
話說寫了幾句代碼在ie8上能正常運(yùn)行，chrome和ff卻不行，朋友說這就是RP啊，郁悶！
其實(shí)功能需求是這樣的，兩個(gè)radio：男和女，一個(gè)button：重置。啟動(dòng)頁面默認(rèn)選中男，在用戶選擇女之后又點(diǎn)擊重置按鈕，需要恢復(fù)到默認(rèn)狀態(tài)。
<input type="radio" id="hRdMale" checked="checked" name="sex" value="male" /><label for="hRdMale">男</label>
<input type="radio" id="hRdFemale" name="sex" value="female" /><label for="hRdFemale">女</label>
<button id="reSet">重置</button>
我的js代碼是這樣的：
$("#reSet").click(function() {
$("input[name='sex']:first").attr("checked",true);
});
結(jié)果就是開頭提到的樣子，問了幾個(gè)人都說不清楚，后來查了API后知道在jQuery1.6+的版本中添加了.prop()的方法，貌似和.attr()沒什么區(qū)別，都可以用來獲取和設(shè)置屬性值。后來又了解到.prop()方法適用于Boolean值的屬性，官方解釋selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 以及defaultSelected 等屬性需用.prop()方法。另外，看網(wǎng)上還有好多說“添加屬性名稱該屬性就會(huì)生效應(yīng)該使用.prop()”，本人沒驗(yàn)證其他屬性，倒是"checked"屬性的確是添加就生效。所以，紅色的兩點(diǎn)應(yīng)該就是.attr()和.prop()的區(qū)別所在了。
所以，將上面click事件方法里面的代碼改成下面的就OK了。
$("input[name='sex']:first").prop("checked",true);
其實(shí)功能需求是這樣的，兩個(gè)radio：男和女，一個(gè)button：重置。啟動(dòng)頁面默認(rèn)選中男，在用戶選擇女之后又點(diǎn)擊重置按鈕，需要恢復(fù)到默認(rèn)狀態(tài)。
復(fù)制代碼 代碼如下:
<input type="radio" id="hRdMale" checked="checked" name="sex" value="male" /><label for="hRdMale">男</label>
<input type="radio" id="hRdFemale" name="sex" value="female" /><label for="hRdFemale">女</label>
<button id="reSet">重置</button>
我的js代碼是這樣的：
復(fù)制代碼 代碼如下:
$("#reSet").click(function() {
$("input[name='sex']:first").attr("checked",true);
});
結(jié)果就是開頭提到的樣子，問了幾個(gè)人都說不清楚，后來查了API后知道在jQuery1.6+的版本中添加了.prop()的方法，貌似和.attr()沒什么區(qū)別，都可以用來獲取和設(shè)置屬性值。后來又了解到.prop()方法適用于Boolean值的屬性，官方解釋selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 以及defaultSelected 等屬性需用.prop()方法。另外，看網(wǎng)上還有好多說“添加屬性名稱該屬性就會(huì)生效應(yīng)該使用.prop()”，本人沒驗(yàn)證其他屬性，倒是"checked"屬性的確是添加就生效。所以，紅色的兩點(diǎn)應(yīng)該就是.attr()和.prop()的區(qū)別所在了。
所以，將上面click事件方法里面的代碼改成下面的就OK了。
復(fù)制代碼 代碼如下:
$("input[name='sex']:first").prop("checked",true);
您可能感興趣的文章:
- jquery獲取自定義屬性(attr和prop)實(shí)例介紹
- jquery中prop()方法和attr()方法的區(qū)別淺析
- jQuery學(xué)習(xí)之prop和attr的區(qū)別示例介紹
- jquery 獲取自定義屬性(attr和prop)的實(shí)現(xiàn)代碼
- jQuery獲取attr()與prop()屬性值的方法及區(qū)別介紹
- Jquery中attr與prop的區(qū)別詳解
- jQuery中.attr()和.data()的區(qū)別分析
- JQuery中attr屬性和jQuery.data()學(xué)習(xí)筆記【必看】
- jQuery $.data()方法使用注意細(xì)節(jié)
- jquery中attr、prop、data區(qū)別與用法分析
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)聊天機(jī)器人，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
jquery操作select元素和option的實(shí)例代碼
這篇文章主要介紹了jquery操作select元素和option的實(shí)例代碼，感興趣的小伙伴們可以參考一下2016-02-02
jquery lazyload延遲加載技術(shù)的實(shí)現(xiàn)原理分析
懶加載技術(shù)(簡稱lazyload)并不是新技術(shù)，它是js程序員對(duì)網(wǎng)頁性能優(yōu)化的一種方案。lazyload的核心是按需加載。在大型網(wǎng)站中都有l(wèi)azyload的身影，例如谷歌的圖片搜索頁，迅雷首頁，淘寶網(wǎng)，QQ空間等。2011-01-01
jQuery動(dòng)態(tài)生成不規(guī)則表格(前后端)
這篇文章主要介紹了jQuery動(dòng)態(tài)生成不規(guī)則表格的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-02-02
11個(gè)用于提高排版水平的基于jquery的文字效果插件
我們都知道，在傳統(tǒng)的排版當(dāng)中使用DIV+CSS來實(shí)現(xiàn)的話是很困難的，今天使用jquery插件，你可以實(shí)現(xiàn)卓越的排版效果，專門用于為您提高您的排版水平2012-09-09
jQuery實(shí)現(xiàn)可兼容IE6的淡入淡出效果告警提示功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)可兼容IE6的淡入淡出效果告警提示功能,結(jié)合具體實(shí)例形式分析了jQuery彈出警告提示功能的具體實(shí)現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-09-09
jquery實(shí)現(xiàn)員工信息添加與刪除功能
這篇文章主要為大家詳細(xì)介紹了利用jquery制作簡易的員工信息添加與刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
JQuery中$.each 和$(selector).each()的區(qū)別詳解
這篇文章主要介紹了JQuery中$.each 和$(selector).each()的區(qū)別詳解,本文給出了多個(gè)例子講解了它們之間的不同之處,需要的朋友可以參考下2015-03-03
jQuery學(xué)習(xí)筆記之jQuery的DOM操作
jQuery學(xué)習(xí)筆記之jQuery的DOM操作實(shí)現(xiàn)方法， 學(xué)習(xí)jquery與dom操作的朋友可以參考下。2010-12-12
jQuery判斷瀏覽器并動(dòng)態(tài)調(diào)整select寬度的方法
這篇文章主要介紹了jQuery判斷瀏覽器并動(dòng)態(tài)調(diào)整select寬度的方法,涉及jQuery針對(duì)瀏覽器的判定及頁面元素屬性的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2016-03-03