JQuery的attr 与 val区别

前端之家收集整理的这篇文章主要介绍了JQuery的attr 与 val区别前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

.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。

不同

?$('#name').val() ;/* 'aaaa'*/ $('#name').attr('data-name'); /*user*/

下面通过一段代码给大家介绍jQuery attr("value") 和 val的区别

这边返回值的逻辑判断有变化

要我们使用defaultValue.

JavaScript

dioValue && 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

dioValue && 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,"button" ) ) { return nodeHook.set( elem,name ); } // Does not return so that setAttribute is also used elem.value = value; } } },

可见1.9删除了attrHooks.value方法导致非IE的attr("value")为undefined或默认值,而IE的attr("value")为""或默认值

猜你在找的jQuery相关文章