jQuery $.data() メソッド_javascript スキルを使用するときは詳細に注意してください

少し前に、同僚が jQuery の .data() メソッドについてグループ内で不満を言いました:
XXX(NNNNNNNN) 15:11:34

alert($('#a').data('xxx'));//123
データ メソッドは信頼できません
XXX(NNNNNNNN) 15:13:17
古い正直に言うと、attr('data-xxx') を使用し、jQuery ドキュメントの .data() メソッドの説明を注意深く調べてください:

コードをコピー コードは次のとおりです。

jQuery 1.4.3 以降、HTML 5 データ属性は自動的に jQuery のデータ オブジェクトに取り込まれます。
ダッシュが埋め込まれた属性の処理が変更されました。 jQuery 1.6 では、W3C HTML5
仕様に準拠しています。

次の命令: >

コードは次のとおりです:

;/div>$("div").data("role") === "ページ"; $("lastValue") === 43; >$("div").data("hidden") === true; $("div").data("options").name === "ジョン";

つまり、.data() を使用して値を取得する場合、jQuery はまず取得した文字列値を、ブール値、null、数値、オブジェクト、配列を含む JS 型に変換しようとします。

値が「true|false」の場合は、対応するブール値を返します。
値が「null」の場合は、null を返します。
値が純粋な数値で構成される文字列 ( data ”” === data) の場合、対応する数値 (データ) が返されます。
値が (?:{[sS]*}|[[sS]*])$ で構成される場合 ("{key:value }" または [1)、 2,3] の場合は、jQuery.parseJSON を使用して解析してみます。

それ以外の場合は、文字列値

を返します。もちろん、これはドキュメントにも具体的に記載されています。文字列値を取得し、自動的に変換された値を取得したくない場合は、.attr("data-" key) を使用して対応する値を取得できます:




コードをコピー
コードは次のとおりです。

値の属性を変換せずに文字列として取得するには、 以下は jQuery のソース コードです

コードをコピーします

コードは次のとおりです:

function dataAttr(elem, key, data) {

// 内部で何も見つからなかった場合は、// HTML5 の data-* 属性からデータを取得してみます if ( data === 未定義 && 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) メソッドは、取得した値を次のように変換しようとします。 JS タイプ (boolean、null、number、object、array を含む)*/
data = data === "true" ? true :
data === "false" false :
data === "null" ? null :
// 文字列を変更しない場合のみ数値に変換します
data "" === data data :
/*rbrace = /(?:{[ sS]*}|[[sS]*] )$/,*/
rbrace.test( data ) jQuery.parseJSON( data ) :
data
} catch( e ) {}
// 後で変更されないようにデータを設定します。
jQuery.data( elem, key, data )
} else {
data = unknown; >}
データを返します。
}