cosa fa la funzione jQuery data()

Question

Non ho trovato a che cosa serve la funzione jquery data(). Qualcuno può darmi qualche esempio di come può essere usato?

Answer 1

È davvero utile per associare vari oggetti, stringhe, matrici, ecc. Con un elemento DOM. Ecco un divertente ipotetico uso:

$(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(); 
    }); 
}); 

Questo sarebbe selezionare ogni a tag e impostare Orange se dispari, o Purple se ancora. Questo non è il modo più ottimale per scrivere questo codice se questo è ciò che volevi veramente fare, ma illustra come utilizzare la funzione .data().

Si può anche usare per archiviare gli oggetti:

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

Ora si potrebbe accedere ai dati in qualsiasi altro punto della pagina:

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

Answer 2

Il jQuery documentation riassume abbastanza bene:

Restituisce un ID univoco per l'elemento.

In genere questa funzione sarà solo utilizzata internamente. Probabilmente non utilizzerai il metodo data() in questo modo . Il numero viene chiamato automaticamente quando necessario quando si utilizza la funzionalità altri dati() .

Fondamentalmente questa funzione esiste per supportare altre funzioni jQuery. È meglio ignorare questa funzione in quanto non è destinata alla parte dell'interfaccia pubblica dell'API jQuery.

Answer 3

Consente di associare qualsiasi tipo di dati a un elemento DOM. Vedere il post sul blog this per alcuni esempi.

Answer 4

Credo che questa domanda ha bisogno di un po 'più di attenzione. L'API di jQuery data è davvero potente per vari casi d'uso.

La funzione dati di jQuery consente di archiviare e recuperare i dati associati con qualsiasi oggetto jQuery.

In primo luogo, può anche essere utilizzato per leggere gli attributi data- impostati su qualsiasi nodo in html.

Esempio 1

HTML: <div id="myNode" data-foo="bar"></div>.

codice jQuery: $("#myNode").data("foo") //bar

Esempio 2

Analogamente posso memorizzare un valore w.r.t qualsiasi nodo troppo.

codice jQuery:

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

Una cosa importante da notare qui è che quando si imposta un dato sulla nota utilizzando l'API di dati, il codice HTML non viene aggiornato nel DOM. Se si desidera aggiornare l'HTML, è possibile attenersi al metodo attr("data-foo","baz").

Mentre è possibile leggere le stringhe memorizzate negli attributi dei dati HTML, è anche possibile assegnare un oggetto durante la memorizzazione di un valore utilizzando l'API dei dati.

Esistono vari casi d'uso in cui gli sviluppatori collegano un oggetto a un nodo.

ad es.

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

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

Vai avanti, explore the API here.