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