jQuery data（）関数とは何か

Question

jquery関数の使用方法が見つかりません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タグを選択し、その場合でも、その奇数、またはPurple場合Orangeを設定します。これが実際にやりたかったのであれば、このコードを書くのに最適な方法ではありませんが、.data()関数の使い方を説明しています。

また、オブジェクトを格納するためにそれを使用することができます：

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

今、あなたはページ上のどこにもそのデータにアクセスできます。

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

Answer 2

jQuery documentationはかなりよく、それを合計：

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

通常、この機能は内部でのみ使用されます（ ）。このようにして のdata（）メソッドを使用しない可能性があります。他のデータ（ ）を使用する場合は、必要に応じて が自動的に呼び出されます（ ）。

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

Answer 3

これにより、任意の種類のデータをDOM要素に関連付けることができます。いくつかの例については、thisブログ記事を参照してください。

Answer 4

私はこの質問には、もう少し注意が必要だと思います。 jQueryのdata APIは、さまざまなユースケースに対して本当に強力です。

jQueryのデータ関数を使用すると、任意のjQueryオブジェクトを使用して関連するデータを格納および取得できます。

主に、これを使用して、data-の属性をhtmlの任意のノードに設定することもできます。

例1

HTML： <div id="myNode" data-foo="bar"></div>。

のjQueryコード： $("#myNode").data("foo") //bar

例2

同様に私も任意のノードw.r.t値を格納することができます。

のjQueryコード：

$("#myNode").data("foo","baz") $("#myNode").data("foo") //baz

ここで注意すべき重要な点は、1がデータAPIを使用してノートにデータを設定する場合、HTMLがDOMに更新されていないこと、です。 HTMLを更新する場合は、attr("data-foo","baz")メソッドを使用することをおすすめします。

HTMLデータ属性に格納された文字列を読み取ることができますが、データAPIを使用して値を格納しながらオブジェクトを割り当てることもできます。

開発者がオブジェクトをノードにリンクするさまざまなユースケースがあります。

var obj = { 
    name : "test" 
} 
$("#myNode").data("foo",obj); 

$("#myNode").data("foo") === obj //true 

explore the API here.