JQuery的attr 與 val區(qū)別

更新時(shí)間：2016年06月12日 11:29:47 投稿：mrr

這篇文章主要介紹了JQuery的attr 與 val區(qū)別的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下

.attr(attributeName)

　　attributeName:需要獲取屬性的名稱。

　　獲取匹配集中第一個(gè)元素的屬性值。1.6中attr返回屬性的值為undefined，如果沒有設(shè)置（set）。另外，.attr不應(yīng)該在普通對(duì)象、數(shù)組(array)、窗口(window)或者文檔中（document)。如果需要獲取或者設(shè)置DOM屬性，則應(yīng)該使用.prop()方法。

　　使用.attr方法獲取元素屬性的值有兩個(gè)主要優(yōu)點(diǎn)：

方便(Convenience):這個(gè)方法可以在JQuery對(duì)象上直接調(diào)用和串聯(lián)別的JQuery的方法。

跨瀏覽器的一致性（Cross-browser consistency):有報(bào)告說一些屬性值在跨瀏覽器時(shí)的不一致性，甚至在同一瀏覽器的不同版本上也有不一致性。.attr減少這種不一致性

.val()

　　獲取匹配集中第一個(gè)元素當(dāng)前的值。

　　.val()就去主要用來獲取表單中元素的值，例如input， select 或者textarea。

不同

<input data-name="user" id="name" value="aaaa" /> 
?$('#name').val() ;/* 'aaaa'*/ 
$('#name').attr('data-name'); /*user*/

下面通過一段代碼給大家介紹jQuery attr("value") 和 val的區(qū)別

//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 defaultValue
elem.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 creation
var 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 creation
var 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 used
elem.value = value;
}
}
},

可見1.9刪除了attrHooks.value方法導(dǎo)致非IE的attr("value")為undefined或默認(rèn)值,而IE的attr("value")為""或默認(rèn)值

您可能感興趣的文章: