jQuery $.data() メソッド_javascript スキルを使用するときは詳細に注意してください-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 17:44:47

オリジナル

1162 人が閲覧しました

少し前に、同僚が 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; >} 
データを返します。
 } 