jQuery $.data() と $.attr(): いつどちらを使用するか?

jQuery データと属性: 違いを理解する

jQuery では、$.data と $.attr の両方を DOM の属性の操作に使用します。要素。ただし、それらは異なる目的を果たし、使用法と動作が異なります。

$.data を使用する場合

$.data は主に、 jQuery の内部キャッシュ ($.cache) 内の DOM 要素。このデータは、要素自体の HTML 属性として保存されません。したがって、データ バインディングやカスタム スクリプトの目的でデータを永続的に保存する必要がある場合は、$.data が推奨される選択肢です。

例:

<a>

$('#foo').data('myData', 'someValue');
// Gets the stored data
$('#foo').data('myData'); // outputs "someValue"

$.attr

$.attr を使用する場合、一方、主に HTML5 データ属性を設定または取得します。これらのデータ属性は DOM 要素の属性として保存され、追加のメタデータまたはコンテンツを提供することを目的としています。

例:

<a>

$('#foo').attr('data-attribute'); // outputs "myCoolValue"
$('#foo').attr('data-attribute', 'newValue'); // Sets the data-attribute to "newValue"

追加の考慮事項

• によるデータ ストレージ$.data は複雑なオブジェクトをサポートしますが、HTML データ属性には文字列のみを含めることができます。
• $.data は、「true」をブール値に変換するなど、データを取得するときに値を適切な型に自動キャストします。
• $.attr は、データを取得するときに元のデータ型を保持します。
• 混乱を避けるために、次の使用をお勧めします。 $.data.
• で保存されたデータにアクセスするときにキャメルケース構文を使用することもできます。$.removeAttr を使用して、$.data.

以上がjQuery $.data() と $.attr(): いつどちらを使用するか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。