jQuery データ ラングリング: $.data() と $.attr() をいつ使用するか?

jQuery を使用したデータ ラングリング: $.data と $.attr

jQuery を使用してデータ属性を操作するコンテキストでは、$.data と $.attr $.attr は別の目的を果たします。

$.data: 内部データStorage

$.data は主に、DOM に直接ではなく、jQuery の内部キャッシュ $.cache 内にデータを保存するために使用されます。 $.data を使用してデータが要素に割り当てられると、データは要素のオブジェクトに関連付けられ、複雑なオブジェクトや参照を格納できるようになります。さらに、$.data は自動キャストを実行し、データを文字列からブール、数値、JSON などの認識される型に変換します。

$.attr: HTML5 データ属性

対照的に、$.attr は、DOM に属性として保存される HTML5 データ属性の設定と取得に使用されます。これらの属性は、標準化された方法でのデータ保存を容易にするように設計されています。データ属性を使用する場合、ハイフンとキャメルケースの変換が発生することに注意することが重要です。属性名のハイフンは、$.data 経由でデータにアクセスするときに自動的にキャメルケースに変換されます。

ベスト プラクティス

• サーバーから受信したデータの場合は、$ を使用します。 data を使用して DOM 要素の data 属性に保存します。
• HTML5 データ属性を設定するには、次を使用します。 $.attr.
• ハイフンで区切られたデータ属性名にアクセスする場合は、一貫性が高いため、JavaScript でキャメルケース バージョンを使用してください。
• データ属性の元の文字列値を保持するには、$.attr を使用してください。 .
• 数値や文字列などのデータの自動キャストには、次を使用します。 $.data.
• jQuery 1.8 rc 1 以降では、数値の表現が同じである場合にのみ、数値が自動キャストされます。代替の数値構文の場合は、単項演算子を使用して値を Number にキャストします。

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