jquery - jQuery data() 関数は何をしますか

Question

jquery function の使用法がわかりませんdata()。誰かがそれをどのように使用できるかの例を教えてもらえますか?

Answer 1

さまざまなオブジェクト、文字列、配列などを DOM 要素に関連付けるのに非常に便利です。これは楽しい仮説的な使用法です：

$(document).ready(function(){
   $("a").each(function(index, el){
      if(index % 2 == 0) 
         $(this).data('coolColor', 'Orange'); // Set the data
      else 
         $(this).data('coolColor', 'Purple'); // Set the data
   }).click(function(e){
      alert($(this).data('coolColor')); // Retrieve the data
      e.preventDefault();
   });
});

aこれにより、すべてのタグが選択されOrange、奇数または偶数の場合に設定されPurpleます。これが本当にやりたいことである場合、これはこのコードを記述するための最適な方法ではありませんが、.data()関数の使用方法を示しています。

オブジェクトを保存するためにも使用できます。

$("#header").data('headerSettings',{
   color: "red",
   cost:  "$25.00",
   time:  1000
});

これで、ページのどこからでもそのデータにアクセスできます。

$("#header").data('headerSettings').color;

Answer 2

これにより、あらゆるタイプのデータを DOM 要素に関連付けることができます。いくつかの例については、このブログ投稿を参照してください。

Answer 3

jQueryのドキュメントはそれをかなりうまくまとめています：

要素の一意の ID を返します。

通常、この関数は内部でのみ使用されます。おそらく、この方法で data() メソッドを使用することはありません。他の data() 機能を使用する場合、必要に応じて自動的に呼び出されます。

基本的に、この関数は他の jQuery 関数をサポートするために存在します。この関数は、jQuery API のパブリック インターフェイスの一部にすることを意図していないため、無視することをお勧めします。