jQuery.fn.extend({ // 1. 定义.data(key, value) data: function( key, value ) { var parts, attr, name, data = null; // 2. 未传入参数的情况 if ( typeof key === "undefined" ) { if ( this.length ) { // 如果参数key是undefined, 即参数格式是.data(), 则调用方法jQuery.data(elem, name, data, pvt)获取第一个匹配元素关联的自定义数据缓存对象，并返回。 data = jQuery.data( this[0] ); if ( this[0].nodeType === 1 && !jQuery._data( this[0], "parsedAttrs" ) ) { attr = this[0].attributes; for ( var i = 0, l = attr.length; i < l; i++ ) { name = attr[i].name; if ( name.indexOf( "data-" ) === 0 ) { name = jQuery.camelCase( name.substring(5) ); dataAttr( this[0], name, data[ name ] ); } } jQuery._data( this[0], "parsedAttrs", true ); } } return data; // 3. 参数key 是对象的情况,即参数格式是.data(key),则遍历匹配元素集合，为每个匹配元素调用方法jQuery.data(elem, name, data,pvt)批量设置数据 } else if ( typeof key === "object" ) { return this.each(function() { jQuery.data( this, key ); }); } // 4. 只传入参数key的情况 如果只传入参数key, 即参数格式是.data(key),则返回第一个匹配元素的指定名称数据 parts = key.split("."); parts[1] = parts[1] ? "." + parts[1] : ""; if ( value === undefined ) { data = this.triggerHandler("getData" + parts[1] + "!", [parts[0]]); // Try to fetch any internally stored data first if ( data === undefined && this.length ) { data = jQuery.data( this[0], key ); data = dataAttr( this[0], key, data ); } return data === undefined && parts[1] ? this.data( parts[0] ) : data; // 5. 传入参数key和value的情况 即参数格式是.data(key, value),则为每个匹配元素设置任意类型的数据，并触发自定义事件setData, changeData } else { return this.each(function() { var self = jQuery( this ), args = [ parts[0], value ]; self.triggerHandler( "setData" + parts[1] + "!", args ); jQuery.data( this, key, value ); self.triggerHandler( "changeData" + parts[1] + "!", args ); }); } }, removeData: function( key ) { return this.each(function() { jQuery.removeData( this, key ); }); } }); // 6. 函数dataAttr(elem, key, data)解析HTML5属性data- function dataAttr( elem, key, data ) { // If nothing was found internally, try to fetch any // data from the HTML5 data-* attribute // 只有参数data为undefined时，才会解析HTML5属性data- if ( data === undefined && elem.nodeType === 1 ) { var name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase(); data = elem.getAttribute( name ); if ( typeof data === "string" ) { try { data = data === "true" ? true : data === "false" ? false : data === "null" ? null : jQuery.isNumeric( data ) ? parseFloat( data ) : 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; }
五、$.removeData(elem, name)，.removeData(key)
使用方法：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery.removeData demo</title> <style> div { margin: 2px; color: blue; } span { color: red; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <div>value1 before creation: <span></span></div> <div>value1 after creation: <span></span></div> <div>value1 after removal: <span></span></div> <div>value2 after removal: <span></span></div> <script> var div = $( "div" )[ 0 ]; $( "span:eq(0)" ).text( "" + $( "div" ).data( "test1" ) ); //undefined jQuery.data( div, "test1", "VALUE-1" ); jQuery.data( div, "test2", "VALUE-2" ); $( "span:eq(1)" ).text( "" + jQuery.data( div, "test1" ) ); // VALUE-1 jQuery.removeData( div, "test1" ); $( "span:eq(2)" ).text( "" + jQuery.data( div, "test1" ) ); // undefined $( "span:eq(3)" ).text( "" + jQuery.data( div, "test2" ) ); // value2 </script> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>removeData demo</title> <style> div { margin: 2px; color: blue; } span { color: red; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <div>value1 before creation: <span></span></div> <div>value1 after creation: <span></span></div> <div>value1 after removal: <span></span></div> <div>value2 after removal: <span></span></div> <script> $( "span:eq(0)" ).text( "" + $( "div" ).data( "test1" ) ); // undefined $( "div" ).data( "test1", "VALUE-1" ); $( "div" ).data( "test2", "VALUE-2" ); $( "span:eq(1)" ).text( "" + $( "div").data( "test1" ) ); // VALUE-1 $( "div" ).removeData( "test1" ); $( "span:eq(2)" ).text( "" + $( "div" ).data( "test1" ) ); // undefined $( "span:eq(3)" ).text( "" + $( "div" ).data( "test2" ) ); // VALUE-2 </script> </body> </html>
$.removeData(elem, name)，.removeData(key) 源码解析：