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

jQuery データと属性

データ属性を操作する場合、使用できる 2 つの主要な jQuery メソッド、$.data と $ があります。属性効果的なデータの保存と取得には、それらの違いを理解することが重要です。

HTML5 データ属性の $.attr

HTML5 データ属性を扱う場合は、次のようになります。 <a> の場合、適切なメソッドは $.attr です。これにより、要素の HTML から直接データ属性を読み書きできるようになります。例:

$('#foo').attr('data-foo'); // Outputs: "bar"
$('#foo').attr('data-foo', 'baz'); // Updates the attribute to "baz"

任意のデータ ストレージ用の $.data

対照的に、$.data を使用すると、特定のデータに関係なく、要素に任意のデータを保存できます。属性。このデータには HTML 経由ではアクセスできず、jQuery キャッシュ経由でアクセスできます。ウィジェットのインスタンス化や複雑なオブジェクトの保存によく使用されます。例:

$('#foo').data('myData', {key: 'value'});
$('#foo').data('myData').key; // Outputs: "value"

$.data のハイフンとキャメルケース

$.data を使用すると、ハイフンでつながれたデータ属性名は自動的にキャメルケースに変換されますが、元のデータ属性名は自動的にキャメルケースに変換されます。ハイフン付き形式は HTML で引き続き使用できます。ただし、JavaScript でのハイフンの使用は、$.data() 経由のアクセスには推奨されません。

$.data の自動キャスト

$.data のもう 1 つの便利な機能() は値を自動キャストする機能です。値が認識されたパターンと一致する場合、その値は適切なデータ型に変換されます。この簡略化されたパターン:

<a>

次のようにアクセスできます:

$('#foo').data('num'); // Outputs: 15
$('#foo').data('bool'); // Outputs: true
$('#foo').data('json'); // Outputs: {fizz: ['buzz']}

$.attr と $.data を使用する場合

一般的に、HTML との直接対話を必要とする HTML5 データ属性にアクセスするには、$.attr を使用します。特に複雑なオブジェクトを扱う場合は、HTML からアクセスできない任意のデータを保存するために $.data を使用します。

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