Pay attention to details when using jQuery $.data() method_javascript skills

Some time ago, a colleague complained in the group about the .data() method in jQuery:
XXX(NNNNNNNN) 15:11:34

alert($('#a').data('xxx'));//123
data method is unreliable
XXX(NNNNNNNN) 15:13:17
Old Honestly, use attr('data-xxx') and carefully study the jQuery document's description of the .data() method:

Copy code The code is as follows:

As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object.
The treatment of attributes with embedded dashes was changed in jQuery 1.6 to conform to the W3C HTML5
specification.

for the following instructions: >

The code is as follows:

$("div").data("role") === "page"; $("div"). data("lastValue") === 43; $("div").data("hidden") === true;

$("div").data("options").name === "John";

That is, when using .data() to obtain a value, jQuery will first try to convert the obtained string value into a JS type, including Boolean values, null, numbers, Object, array:
If the value is "true|false", return the corresponding Boolean value;
If the value is "null", return null;
If the value is a string composed of pure numbers ( data ”” === data), the corresponding number (data) is returned;
If the value is composed of (?:{[sS]*}|[[sS]*])$, such as "{key:value }" or [1,2,3], try to use jQuery.parseJSON to parse it;

Otherwise, return the string value

Of course, it is also specifically stated in the document - if you just want to get String value and do not want to get the automatically converted value, you can use .attr("data-" key) to get the corresponding value:


Copy code

The code is as follows: To retrieve the value's attribute as a string without any attempt to convert it, use the attr() method. The following is jQuery Source code

Copy code

The code is as follows: function dataAttr(elem, key, data) { // If nothing was found internally, try to fetch any // data from the HTML5 data-* attribute if ( data === undefined && elem.nodeType === 1 ) {

// rmultiDash = /([A-Z])/g

var name = "data-" key.replace( rmultiDash, "-$1" ).toLowerCase();
data = elem.getAttribute( name );
if ( typeof data === "string" ) {
try {
/*.data(key) method attempts to convert the obtained value into JS type, including boolean, null, number, object , array*/
data = data === "true" ? true :
data === "false" ? false :
data === "null" ? null :
// Only convert to a number if it doesn't change the string
data "" === data ? data :
/*rbrace = /(?:{[sS]*}|[[sS]*] )$/,*/
rbrace.test( data ) ? jQuery.parseJSON( data ) :
data;
} catch( e ) {}
// Make sure we set the data so it isn't changed later
jQuery.data( elem, key, data );
} else {
data = undefined;
}
}
return data;
}