.attr(attributeName)
attributeName:需要獲取屬性的名稱。
獲取匹配集中第一個元素的屬性值。1.6中attr返回屬性的值為undefined，如果沒有設置（set）。另外，.attr不應該在普通對象、數組(array)、窗口(window)或者文檔中（document)。如果需要獲取或者設置DOM屬性，則應該使用.prop()方法。
使用.attr方法獲取元素屬性的值有兩個主要優點：
方便(Convenience):這個方法可以在JQuery對象上直接調用和串聯別的JQuery的方法。
跨瀏覽器的一致性（Cross-browser consistency):有報告說一些屬性值在跨瀏覽器時的不一致性，甚至在同一瀏覽器的不同版本上也有不一致性。.attr減少這種不一致性
.val()
獲取匹配集中第一個元素當前的值。
.val()就去主要用來獲取表單中元素的值，例如input， select 或者textarea。
不同
<input data-name="user" id="name" value="aaaa" /> ?$('#name').val() ;/* 'aaaa'*/ $('#name').attr('data-name'); /*user*/ 下面通過一段代碼給大家介紹jQuery attr("value") 和 val的區別
//2509行if ( !getSetInput || !getSetAttribute ) {jQuery.attrHooks.value = {get: function( elem, name ) {var ret = elem.getAttributeNode( name );return jQuery.nodeName( elem, "input" ) ?// Ignore the value *property* by using defaultValueelem.defaultValue :ret && ret.specified ? ret.value : undefined;},}這邊返回值的邏輯判斷有變化
jQuery.nodeName( elem, "input" ) ?elem.defaultValue :ret && ret.specified ? ret.value :undefined;// Ignore the value *property* by using defaultValue
要我們使用defaultValue.
JavaScript
attrHooks: {type: {set: function( elem, value ) {if ( !jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input") ) {// Setting the type on a radio button after the value resets the value in IE6-9// Reset value to default in case type is set after value during creationvar val = elem.value;elem.setAttribute( "type", value );if ( val ) {elem.value = val;}return value;}}}},而1.8.3代碼如下
JavaScript
//2361行attrHooks: {type: {set: function( elem, value ) {// We can't allow the type property to be changed (since it causes problems in IE)if ( rtype.test( elem.nodeName ) && elem.parentNode ) {jQuery.error( "type property can't be changed" );} else if ( !jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input") ) {// Setting the type on a radio button after the value resets the value in IE6-9// Reset value to it's default in case type is set after value// This is for element creationvar val = elem.value;elem.setAttribute( "type", value );if ( val ) {elem.value = val;}return value;}}},// Use the value property for back compat// Use the nodeHook for button elements in IE6/7 (#1954)value: {get: function( elem, name ) {if ( nodeHook && jQuery.nodeName( elem, "button" ) ) {return nodeHook.get( elem, name );}return name in elem ?elem.value :null;},set: function( elem, value, name ) {if ( nodeHook && jQuery.nodeName( elem, "button" ) ) {return nodeHook.set( elem, value, name );}// Does not return so that setAttribute is also usedelem.value = value;}}},可見1.9刪除了attrHooks.value方法導致非IE的attr("value")為undefined或默認值,而IE的attr("value")為""或默認值
新聞熱點
疑難解答
