attr versus val for JQuery

.attr(attributeName)

attributeName: Need to get the name of the property.

Gets the attribute value of the first element in the matching set.The value of the attr return property in 1.6 is undefined if it is not set (set).Also,.attr should not be in a normal object, array (array), window (window), or document (document).If you need to get or set the DOM property, you should use the.prop() method.

There are two main advantages of using the.attr method to get the value of an element attribute:

Convenient (Convenience): This method can call and concatenate other JQuery methods directly on the JQuery object.

Cross-browser consistency (Cross-browser consistency): There have been reports of non-1 consistency for some attribute values across browsers, even on different versions of the same browser.attr reduces this inconsistency

.val()

Gets the current value of the first element in the matching set.

The.val() function is primarily used to get the values of elements in the form, such as input, select, or textarea.

difference

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

Here is a code to show you the difference between jQuery attr ("value") and val

//2509 That's ok 
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;
},
}

The logical judgment of the return value on this side changes

jQuery.nodeName( elem, "input" ) ?elem.defaultValue :ret && ret.specified ? ret.value :undefined;
// Ignore the value *property* by using defaultValue

Let's use 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;
}
}
}
},

The 1.8.3 code is as follows

JavaScript

//2361 That's ok 
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;
}
}
},

Visible 1.9 deletion of attrHooks.value method results in non-IE attr ("value") being undefined or default, IE attr ("value") being "" or default