JQuery的attr 与 val区别

时间:2021-05-26

.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() ; $('#name').attr('data-name');

下面通过一段代码给大家介绍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")为""或默认值

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章