Ai tempi di XHTML/HTML4, gli sviluppatori avevano solo poche opzioni da utilizzare per archiviare dati arbitrari relativi al DOM. Potresti inventare i tuoi attributi, ma questo era rischioso: il tuo codice non sarebbe valido, i browser potrebbero ignorare i tuoi dati e potrebbe causare problemi se il nome corrispondesse agli attributi HTML standard.

Pertanto, la maggior parte degli sviluppatori si è attenuta agli attributi class o rel poiché erano l'unico modo ragionevole per memorizzare righe aggiuntive. Ad esempio, supponiamo che stiamo creando un widget per visualizzare messaggi come una sequenza temporale dei messaggi Twitter. Idealmente, JavaScript dovrebbe essere configurabile senza dover riscrivere il codice, quindi definiamo l'ID utente nell'attributo class, in questo modo:

Il nostro codice JavaScript cercherà un elemento con ID msglist . Utilizzando lo script, cercheremo le classi che iniziano con user_ e "bob" nel nostro caso sarà l'ID utente e visualizzeremo tutti i messaggi di quell'utente.

Diciamo che vorremmo anche impostare un numero massimo di messaggi e saltare i messaggi più vecchi di sei mesi (180 giorni):

Il nostro attributo class si riempie molto rapidamente: è più facile commettere un errore e l'analisi delle stringhe in JavaScript diventa sempre più difficile.

Attributi dei dati HTML5

Fortunatamente, HTML5 ha introdotto la possibilità di utilizzare attributi personalizzati. È possibile utilizzare qualsiasi nome minuscolo con prefisso data- , ad esempio:

Attributi dei dati personalizzati:

• queste sono stringhe: puoi memorizzare qualsiasi informazione al loro interno che possa essere rappresentata o codificata come una stringa, come JSON. Il casting del tipo deve essere eseguito utilizzando JavaScript
• dovrebbe essere utilizzato nei casi in cui non sono presenti elementi o attributi HTML5 adatti
• fare riferimento solo alla pagina. A differenza dei microformati, dovrebbero essere ignorati da sistemi esterni come motori di ricerca e crawler

Esempio di elaborazione JavaScript n. 1: getAttribute e setAttribute

Tutti i browser consentono di ottenere e modificare gli attributi dei dati utilizzando i metodi getAttribute e setAttribute:

Var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("data-list-size"); msglist.setAttribute("dimensione-elenco-dati", +mostra+3);

Funziona, ma dovrebbe essere utilizzato solo per mantenere la compatibilità con i browser più vecchi.

Esempio n. 2 di elaborazione in JavaScript: il metodo data() della libreria jQuery

A partire da jQuery 1.4.3, il metodo data() gestisce gli attributi dei dati HTML5. Non è necessario specificare esplicitamente il prefisso data-, quindi un codice come questo funzionerà:

Var msglista = $("#msglista"); var show = msglist.data("dimensione elenco"); msglist.data("dimensione elenco", mostra+3);

Tuttavia, tieni presente che jQuery tenta di convertire i valori di tali attributi in tipi appropriati (booleani, numeri, oggetti, array o null) e influenzerà il DOM. A differenza di setAttribute , il metodo data() non sostituirà fisicamente l'attributo data-list-size: se ne controlli il valore al di fuori di jQuery, sarà comunque 5.

Esempio n. 3 di elaborazione JavaScript: API per lavorare con set di dati

Infine, abbiamo un'API per lavorare con set di dati HTML5 che restituisce un oggetto DOMStringMap. È importante ricordare che gli attributi dei dati vengono mappati su un oggetto senza prefissi dati, i trattini vengono rimossi dai nomi e i nomi stessi vengono convertiti in camelCase, ad esempio:

Nome attributo	Nome dell'API del set di dati
utente-dati	utente
massimo dei dati	massimo
dimensione-elenco-dati	listSize

Il nostro nuovo codice:

Var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +mostra+3;

Questa API è supportata da tutti i browser moderni, ma non da IE10 e versioni precedenti. Esiste una soluzione alternativa per questi browser, ma probabilmente è più pratico utilizzare jQuery se stai scrivendo per browser meno recenti.

22 risposte

Qualificatori

JavaScript ha un solo tipo di dati che può contenere più valori: Object. Un array è una forma speciale di oggetto.

(Semplice) Gli oggetti assomigliano

(chiave: valore, chiave: valore, ...)

Gli array hanno la forma

Sia gli array che gli oggetti mostrano una struttura chiave -> valore. Le chiavi in ​​un array devono essere numeriche, mentre qualsiasi stringa può essere utilizzata come chiave negli oggetti. Una coppia chiave-valore è anche chiamata "proprietà".

È possibile accedere alle proprietà utilizzando la notazione punto

Valore costante = obj.someProperty;

o notazione se il nome della proprietà non è un nome identificativo JavaScript valido oppure il nome è il valore della variabile:

// lo spazio non è un carattere valido nei nomi degli identificatori const value = obj["some Property"]; // nome della proprietà come variabile const name = "qualche proprietà"; valore const = obj;

Per questo motivo è possibile accedere agli elementi dell'array solo utilizzando le parentesi:

Valore costante = arr; // arr.5 sarebbe un errore di sintassi // nome della proprietà / indice come variabile const x = 5; valore const = arr[x];

Aspetta... che mi dici di JSON?

JSON è una rappresentazione testuale di dati, come XML, YAML, CSV e altri. Per lavorare con tali dati, devi prima convertirli in tipi di dati JavaScript, ovvero array e oggetti (e come spiegato). Come analizzare JSON è spiegato nella domanda Parse JSON in JavaScript? .

Materiale di lettura aggiuntivo

Come accedere ad array e oggetti è una conoscenza fondamentale di JavaScript, pertanto si consiglia di leggere la Guida JavaScript di MDN, in particolare le sezioni

Accesso alle strutture dati nidificate

Una struttura dati annidata è un array o un oggetto che si riferisce ad altri array o oggetti, ad es. i suoi valori sono matrici o oggetti. Tali strutture possono essere ottenute applicando un punto o una parentesi in sequenza.

Ecco un esempio:

Dati costanti = ( codice: 42, elementi: [( id: 1, nome: "foo" ), ( id: 2, nome: "bar" )] );

Diciamo che vogliamo accedere al nome del secondo elemento.

Ecco come possiamo farlo passo dopo passo:

Come possiamo vedere, i dati sono un oggetto, quindi possiamo accedere alle sue proprietà utilizzando la notazione punto. Si accede alla proprietà items nel modo seguente:

Elementi.dati

Il valore è un array, per accedere al suo secondo elemento dobbiamo usare la notazione tra parentesi:

Elementi.dati

Questo valore è un oggetto e utilizziamo nuovamente la notazione punto per accedere alla proprietà name. Pertanto finiamo con:

Const nome_elemento = data.items.name;

In alternativa, potremmo utilizzare una notazione per qualsiasi proprietà, soprattutto se il nome contenesse caratteri che lo renderebbero non valido per l'uso della notazione punto:

Const nome_elemento = dati["elementi"]["nome"];

Sto tentando di accedere a una proprietà ma ottengo solo risultati indefiniti?

Nella maggior parte dei casi, quando ottieni unfined , l'oggetto/array semplicemente non ha una proprietà con quel nome.

Const foo = (bar: (baz: 42)); console.log(foo.baz); // non definito

In alternativa a for...in con hasOwnProperty, puoi utilizzare Object.keys per ottenere un array di nomi di proprietà:

Object.keys(data).forEach(function(prop) ( // `prop` è il nome della proprietà // `data` è il valore della proprietà ));

Array

Per scorrere tutti gli elementi dell'array data.items, utilizziamo un ciclo for:

For(sia i = 0, l = dati.elementi.lunghezza; i< l; i++) { // `i` will take on the values `0`, `1`, `2`,..., i.e. in each iteration // we can access the next element in the array with `data.items[i]`, example: // // var obj = data.items[i]; // // Since each element is an object (in our example), // we can now access the objects properties with `obj.id` and `obj.name`. // We could also use `data.items[i].id`. }

È anche possibile utilizzare for...in per scorrere gli array, ma ci sono ragioni per cui ciò dovrebbe essere evitato: Perché "for (var element in list)" con gli array è considerata una cattiva pratica in JavaScript? .

Con il crescente supporto dei browser per ECMAScript 5, il metodo dell'array forEach diventa un'alternativa interessante:

Data.items.forEach(function(value, index, array) ( // La callback viene eseguita per ogni elemento nell'array. // `value` è l'elemento stesso (equivalente a `array`) // `index` essere l'indice dell'elemento nell'array // `array` è un riferimento all'array stesso (cioè `data.items` in questo caso) ));

Negli ambienti che supportano ES2015 (ES6), puoi anche utilizzare un ciclo for...of, che funziona non solo per gli array, ma per qualsiasi iterabile:

For (const item di data.items) ( // `item` è l'elemento dell'array, **non** l'indice )

In ogni iterazione, poiché...of ci fornisce direttamente l'elemento successivo dell'iterazione, non esiste alcun "indice" a cui accedere o utilizzare.

Cosa devo fare se non conosco la “profondità” della struttura dati?

Oltre alle chiavi sconosciute, anche la "profondità" di una struttura dati (ad esempio quanti oggetti annidati) può essere sconosciuta. Il modo in cui accedere alle proprietà profondamente annidate dipende in genere dall'esatta struttura dei dati.

Ma se la struttura dei dati contiene schemi ripetitivi, ad es. Rappresentazione ad albero binario, la soluzione solitamente prevede l'accesso ricorsivo a ciascun livello della struttura dati.

Ecco un esempio per ottenere il primo nodo foglia di un albero binario:

Function getLeaf(node) ( if (node.leftChild) ( return getLeaf(node.leftChild); // x > 0)) // false, perché 3^2 è maggiore di 5 console.log(arr.every(x = > Matematica.pow(x, 2)< 5)) // true, because 2 is even (the remainder from dividing by 2 is 0) console.log(arr.some(x =>x % 2 === 0)) // false, perché nessuno degli elementi è uguale a 5 console.log(arr.some(x => x === 5))

Array.prototype.find() e Array.prototype.filter()

I metodi find() restituiscono il primo elemento che soddisfa la funzione di callback fornita. Il metodo filter() restituisce un array di tutti gli elementi soddisfatti dalla funzione di callback fornita.

Const arr = // 2, perché 2^2 !== 2 console.log(arr.find(x => x !== Math.pow(x, 2))) // 1, perché è il primo elemento console .log(arr.find(x => true)) // unfine, perché nessuno degli elementi è uguale a 7 console.log(arr.find(x => x === 7)) // , perché questi elementi sono maggiori di 1 console.log(arr.filter(x => x > 1)) // , perché la funzione restituisce true per tutti gli elementi console.log(arr.filter(x => true)) // , perché nessuno degli elementi non è uguale né a 6 né a 7 console.log(arr.filter(x => x === 6 || x === 7))

Array.prototipo.map()

Il metodo map() restituisce un array con i risultati della chiamata alla funzione di callback fornita sugli elementi dell'array.

Const arr = console.log(arr.map(x => x + 1)) // console.log(arr.map(x => String.fromCharCode(96 + x))) // ["a", " b", "c"] console.log(arr.map(x => x)) // (no-op) console.log(arr.map(x => Math.pow(x, 2))) / / console.log(arr.map(String)) // ["1", "2", "3"]

Array.prototype.reduce()

Il metodo reduce() riduce l'array a un singolo valore chiamando la funzione di callback fornita con due elementi.

Const arr = // Somma degli elementi dell'array. console.log(arr.reduce((a, b) => a + b)) // 6 // Il numero più grande nell'array. console.log(arr.reduce((a, b) => a > b ? a: b)) // 3

Il metodo reduce() accetta un secondo parametro opzionale, che è il valore iniziale. Ciò è utile quando l'array su cui stai chiamando reduce() può avere zero o un elemento. Ad esempio, se volessimo creare una funzione sum() che prenda un array come argomento e restituisca la somma di tutti gli elementi, potremmo scriverla in questo modo:

Const sum = arr => arr.reduce((a, b) => a + b, 0) console.log(sum()) // 0 console.log(sum()) // 4 console.log(sum ()) // 7

Questa domanda è piuttosto vecchia, così come lo è l'aggiornamento moderno. Con l'arrivo di ES2015 ci sono alternative per ottenere i dati richiesti. Attualmente esiste una funzionalità chiamata destrutturazione degli oggetti per accedere agli oggetti nidificati.

const data = ( codice: 42, elementi: [( id: 1, nome: "foo" ), ( id: 2, nome: "bar" )] ); const (elementi: [, (nome: secondoNome)]) = dati; console.log(secondNome);

L'esempio sopra crea una variabile chiamata secondName dal nome della chiave da un array chiamato items, quello solitario dice che salta il primo oggetto nell'array.

In particolare, questo è probabilmente troppo grande per questo esempio poiché un semplice array di accesso è più facile da leggere, ma tornerà utile quando si suddividono gli oggetti in generale.

Questa è una breve introduzione al tuo caso d'uso specifico, la destrutturazione potrebbe essere una strana sintassi a cui abituarsi. Ti consiglio di leggere la documentazione di Mozilla Destructuring Assignment per saperne di più.

Per accedere a un attributo nidificato, è necessario specificarne il nome e quindi cercare l'oggetto.

Se conosci già il percorso esatto, puoi codificarlo nel tuo script in questo modo:

Dati["elementi"]["nome"]

funziona anche questo -

Dati.elementi.nome dati["elementi"].nome dati.elementi["nome"]

Quando non conosci il nome esatto in anticipo o l'utente ti fornisce il nome. Quindi è necessaria la ricerca dinamica attraverso la struttura dei dati. Alcuni hanno suggerito che la ricerca potrebbe essere eseguita utilizzando un ciclo for, ma esiste un modo molto semplice per attraversare il percorso utilizzando Array.reduce.

Const data = ( codice: 42, elementi: [( id: 1, nome: "foo" ), ( id: 2, nome: "bar" )] ) const percorso = [ "elementi", "1", "nome "] let result = path.reduce((a,v) => a[v], data)

Path è un modo per dire: prima prendi l'oggetto con gli elementi chiave, che sembra essere un array. Quindi prendi 1 elemento -st (0 array di indici). Infine, prendi l'oggetto con il nome key in questo elemento dell'array, che è la stringa bar .

Se hai un percorso molto lungo, puoi anche usare String.split per rendere il tutto più semplice -

"articoli.1.nome".split(".").reduce((a,v) => a[v], dati)

Questo è semplicemente JavaScript, senza utilizzare librerie di terze parti come jQuery o lodash.

L'utilizzo di JSONPath sarà una delle soluzioni più flessibili se desideri includere la libreria: https://github.com/s3u/JSONPath (nodo e browser)

Per il tuo caso d'uso il percorso json è:

$..nome.articoli

Var secondName = jsonPath.eval(data, "$..items.name");

Var ourStorage = ( "desk": ( "cassetto": "cucitrice" ), "cabinet": ( "cassetto superiore": ( "cartella1": "un file", "cartella2": "segreti" ), "cassetto inferiore ": "bibita" ) ); ourStorage.cabinet["cassetto superiore"].folder2; // Uscite -> "segreti"

//parent.subParent.subsubParent["ci siamo quasi"]["proprietà finale"]

Fondamentalmente, usa un punto tra ciascun figlio che si espande sotto di esso e quando hai nomi di oggetti lunghi due righe, dovresti usare la notazione ["nome oggetto"]. Altrimenti è sufficiente un punto;

Aggiungiamo che l'accesso agli array annidati avverrà in questo modo:

Var nostriAnimali = [ (tipoanimale: "gatto", nomi: [ "Meowzer", "Fluffy", "Kit-Cat" ] ), (tipoanimale: "cane", nomi: [ "Spot", "Bowser", "Frankie " " ] )]; i nostrianimali.nomi; // Restituisce "Fluffy" ourPets.names; // Restituisce "Spot"

Un altro documento utile che descrive la situazione di cui sopra: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics#Bracket_notation

Accesso alla proprietà utilizzando il dot walking: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Dot_notation

Se stai cercando uno o più oggetti che soddisfino determinati criteri, hai diverse opzioni utilizzando query-js

//restituirà tutti gli elementi con un ID maggiore di 1 data.items.where(function(e)(return e.id > 1;)); //restituirà il primo elemento con un ID maggiore di 1 data.items.first(function(e)(return e.id > 1;)); //restituirà il primo elemento con un id maggiore di 1 //o il secondo argomento se non viene trovato data.items.first(function(e)(return e.id > 1;),(id:-1,name :""));

Esistono anche single e singleOrDefault che funzionano rispettivamente come first e firstOrDefault. L'unica differenza è che lanceranno se viene trovata più di una corrispondenza.

per ulteriori spiegazioni su query-js puoi iniziare da questo post

Vecchia domanda, ma come se nessuno avesse menzionato lodash (solo un trattino basso).

Se stai già utilizzando lodash nel tuo progetto, penso che questo sia un modo elegante per farlo in un esempio complesso:

Get(risposta, ["output", "fund", "data", "0", "children", "0", "group", "myValue"], "")

lo stesso di:

Risposta.output.fund.data.children.group.myValue

La differenza tra la prima e la seconda opzione è che in Ottimale 1, se hai una delle proprietà mancanti (non definite) nel percorso non riceverai un errore, ti restituisce il terzo parametro.

Per il filtro dell'array lodash c'è _.find() , ma preferirei usare filter() normale. Ma trovo ancora che il metodo _.get() riportato sopra sia molto utile quando si lavora con dati davvero complessi. In passato ho riscontrato API davvero complesse e questo è stato utile!

Spero che questo possa essere utile per chi cerca opzioni per gestire i dati davvero complessi che il titolo implica.

Cos'è una libreria JavaScript che fornisce tutta una serie di utili aiutanti di programmazione funzionale senza estendere nessuno degli oggetti incorporati.

Soluzione: var data = ( codice: 42, elementi: [( id: 1, nome: "foo" ), ( id: 2, nome: "bar" )] ); var item = _.findWhere(data.items, ( id: 2 )); if (!_.isUnDefinited(item)) ( console.log("NAME =>", item.name); ) //usando find - var item = _.find(data.items, function(item) ( return item .id === 2 )); if (!_.isUnDefinito(item)) ( console.log("NAME =>", item.name); )

Accesso a un oggetto a livelli dinamici.

Var oggettoj = ( nome: "salut", suboggetto: ( subsuboggetto: ( nomi: "Io sono sub sub oggetto" ) ) ); var livello = "subobj.subsubobj.names"; livello = livello.split("."); var currentObjState = obj; per (var i = 0; i< level.length; i++) { currentObjState = currentObjState]; } console.log(currentObjState);

Prima di HTML5, lavorare con gli attributi negli elementi HTML non era divertente, per usare un eufemismo. Ho dovuto usare attributi come rel o class . E alcuni sviluppatori hanno persino creato i propri attributi.

Ma le cose sono cambiate radicalmente quando HTML5 ci ha dato l'opportunità di utilizzare i suoi attributi di dati. Ora puoi salvare abbastanza facilmente dati aggiuntivi utilizzando strumenti standard.

Come funzionano gli attributi della data?

Il nome parla da solo. Gli attributi della data memorizzano alcuni dati specificati da te. Iniziano sempre con il prefisso data- e terminano con qualcosa di più comprensibile per lo sviluppatore (secondo le specifiche sono consentiti solo caratteri minuscoli e trattini). Un elemento può contenere un numero qualsiasi di attributi di data.

Un esempio di utilizzo degli attributi per memorizzare i dati dell'utente:

Calvino

Naturalmente, questi dati non sono molto utili per l'utente finale, poiché semplicemente non li vede, ma gli attributi della data sono molto utilizzati nelle moderne tecnologie web.

Ecco un esempio di un pulsante per eliminare qualcosa sulla tua pagina:

Eliminare

Tutti i parametri necessari sono a portata di mano e pronti per essere inviati allo script backend. Niente più attributi rel o gestione ID o azioni richieste da altri attributi.

Cosa puoi conservare?

C'è solo una regola da ricordare: gli oggetti non possono essere archiviati negli attributi data. Cioè, è possibile se vengono prima serializzati. Per ora ricorda solo che, in linea di principio, puoi memorizzare solo dati di tipo stringa.

Lettura/scrittura attributi utilizzando javascript

Torniamo all'esempio del pulsante e vediamo come possiamo accedere agli attributi richiesti.

// Questo è un pulsante var button = document.getElementById("your-button-id"); // Ottiene il valore var cmd = button.getAttribute("data-cmd"); var id = button.getAttribute("data-id"); // Modifica il valore button.setAttribute("data-cmd", yourNewCmd); button.setAttribute("data-id", yourNewId);

Abbastanza semplice, vero? Ora passa semplicemente i parametri cmd e id alla tua applicazione ed esegui la richiesta Ajax necessaria.

Leggere/scrivere attributi di data utilizzando jQuery.

Ecco un analogo in jQuery:

// Ottieni il valore var cmd = $("#your-button-id").attr("data-cmd"); var id = $("#id-pulsante").attr("id-dati"); // Modifica il valore $("#your-button-id") .attr("data-cmd", yourNewCmd) .attr("data-id", yourNewId);

Da non confondere con il metodo data(). Sebbene abbiano alcune cose in comune, in generale sono cose completamente diverse. Anche se non hai completa familiarità con questi metodi, usa semplicemente attr() .

Utilizzando l'API del set di dati

HTML5 ci offre anche un'API per lavorare con gli attributi dei dati, sebbene IE10 e versioni precedenti non la supportino.

Ancora una volta, un esempio con un pulsante, ma questa volta utilizzando l'API del set di dati:

// Questo è un pulsante var button = document.getElementById("your-button-id"); // Ottiene il valore var cmd = button.dataset.cmd; var id = button.dataset.id; // Cambia il valore button.dataset.cmd = yourNewCmd; button.dataset.id = tuoNuovoId;

Si prega di notare l'assenza del prefisso dati e dei trattini. Proprio come quando lavori con le proprietà CSS in JavaScript, avrai bisogno del caso "gobba". L'API Dataset traduce i nomi degli attributi in modo che data-some-attribute-name in HTML diventi dataset.someAttributeName in JavaScript.

Cosa puoi fare con gli attributi della data?

Gli esempi forniti sono solo il fondamento. Puoi eseguire operazioni molto più complesse con gli attributi della data. Diamo un'occhiata ad alcuni esempi.

Filtrazione

Diciamo che stai lavorando con un elenco di elementi e devi filtrarli per parola chiave. Inserisci le parole chiave negli attributi dei dati e utilizza un piccolo script iterativo per elaborarle.

• Guado
• Chevrolet
...

Esempio “sul ginocchio”:

$("#filter").on("keyup", function() ( var parola chiave = $(this).val().toLowerCase(); $(".cars > li").each(function() ( $(questo).toggle(parola chiave.lunghezza< 1 || $(this).attr("data-models").indexOf(keyword) > -1); } ); } );

Stilizzazione

Naturalmente è meglio applicare gli stili utilizzando le classi, ma lo stesso può essere fatto utilizzando gli attributi dei dati. In questo modo puoi applicare uno stile agli elementi che hanno un attributo dati specifico, indipendentemente dal suo valore. Diamo prima un'occhiata all'HTML:

E ora il CSS:

( sfondo: rosso; )

Ma come si tiene conto del valore di un attributo? Ecco come puoi applicare uno stile a tutti gli elementi con un attributo data-warning il cui valore contiene la parola errore:

( colore rosso; )

Impostazioni

Il noto framework Bootstrap utilizza attributi di dati per configurare i suoi plugin JavaScript. Esempio di popup:

Popover in cima

Il modo migliore per archiviare i dati

Gli attributi della data sono molto comuni nelle tecnologie web. Ma la cosa più importante è che sono pienamente supportati dai browser più vecchi e penetrano sempre più profondamente negli standard web. E poiché lo standard HTML è già stato approvato, puoi lavorarci oggi e non aver paura che scompariranno improvvisamente domani.

Il metodo dati in jQuery ci dà la possibilità di associare dati arbitrari a qualsiasi documento o oggetto javaScript, permettendoci di rendere il tuo codice più conciso e leggibile. A partire da jQuery 1.4.3, è diventato possibile utilizzare questo metodo su oggetti JavaScript, nonché tenere traccia delle modifiche a questi dati.

Nozioni di base

Per cominciare, puoi chiamare il metodo data su un oggetto jQuery e puoi anche utilizzare direttamente la funzione $.data().

// Utilizzando il metodo: $("#myDiv").data("key","arbitrary value"); // Utilizzando direttamente la funzione: $.data($("#myDiv").get(0),"key","arbitrary value");

La funzione dati è l'implementazione di basso livello effettivamente utilizzata quando si chiama il metodo. Il metodo dell'oggetto jQuery è molto più conveniente e ti consente anche di includerti come una catena di chiamate.

Inoltre, tieni presente che devi passare un elemento DOM come primo parametro alla funzione $.data, non un oggetto jQuery.

Un metodo oggetto richiede due parametri: una chiave e un valore. La chiave è una costante stringa e il valore è qualsiasi struttura dati, comprese le funzioni e gli oggetti dell'array. Esiste una sintassi alternativa in cui puoi passare un oggetto come singolo parametro:

// Puoi passare un oggetto: $("#myDiv").data(("name":"Stevie","age":21)); // Stessa cosa: $("#myDiv").data("name","Stevie").data("age",21);

Ora, se hai bisogno di recuperare i dati memorizzati, puoi chiamare la funzione data, passandole la chiave come parametro:

Var theValue = $("#myDiv").data("età"); //21

L'accesso a questi dati è disponibile ovunque nello script. Riceverai i dati memorizzati finché esiste l'elemento recuperato dal selettore specificato.

Var theValue = $("div:first").data("nome"); // Stevie $("div:first").click(function())( alert($(this).data("age"); // 21 ));

jQuery 1.4.3 supporta anche i dati HTML5 memorizzati negli attributi. Ciò significa che se hai un elemento dichiarato in questo modo:

In questo caso, puoi ottenere i dati dall'attributo data-internal-id chiamando il metodo $("#img1").data("internal-id"), che è sicuramente conveniente per le richieste AJAX.

Utilizzo del metodo dati su oggetti JavaScript

Potresti rimanere sorpreso, ma il metodo data può essere utilizzato anche su normali oggetti JavaScript. Questa funzionalità è stata introdotta ufficialmente in jQuery 1.4.3.

Var mioOggetto = (); $(myObj).data("città","Springfield");

L'esempio precedente crea effettivamente una proprietà city per l'oggetto specificato. Perché in questo caso non scrivere semplicemente myObj.city = "Springfield"? La differenza è che il metodo data aggiunge diversi eventi utili all'oggetto, rendendo più semplice lavorare con questo oggetto. Per esempio:

Var progressBar = (); $(progressBar).bind("setData",funzione(e,chiave,valore)( switch(chiave)( case "percent": $("#progress").width(valore+"%"); $("# percentText").text(value+"%"); break; case "color": $("#progress").css("color",value); break; case "abilitato": $("#progress") .toggleClass("attivo",valore); $(progressBar).data("enabled",true).data("percent",21).data("color","green"); console.log(progressBar.enabled);

Nell'esempio sopra, utilizziamo il metodo data per creare una semplice API con la quale possiamo aggiornare un elemento.

Esistono altri due eventi che possono essere utilizzati su un oggetto JavaScript:

• getData: si attiva prima di leggere i dati. È possibile utilizzarlo per preelaborare i dati ricevuti. Ad esempio, per ricalcolare un valore.
• changeData: si attiva quando i dati vengono impostati o modificati. Questo evento viene utilizzato nel plug-in di collegamento dati jQuery. Con esso, puoi associare i dati del modulo a un oggetto javaScript e lavorare con i campi del modulo come proprietà dell'oggetto.

Dietro le quinte

jQuery crea un oggetto vuoto (per i curiosi si chiama $.cache) che è l'archivio di tutti i valori salvati utilizzando il metodo data. A ogni elemento del DOM utilizzato con il metodo dati viene assegnato un identificatore univoco, che rappresenta quindi la chiave per accedere ai dati nell'oggetto $.cache.

jQuery memorizza non solo i dati dell'utente in questa cache, ma memorizza anche i dati interni, i gestori di eventi collegati utilizzando le funzioni live(), bind() e delegate(). L'utilizzo di un archivio centrale rende jQuery più affidabile.

Conclusione

Il metodo dati è solo una delle tante funzionalità di jQuery che semplificano la vita agli sviluppatori web. In combinazione con le altre funzionalità della libreria, aggiunge una solida base su cui possiamo fare affidamento.

Un articolo in cui esamineremo quali metodi esistono in jQuery per lavorare con gli attributi dei dati e l'archiviazione interna dei dati.

Scopo degli attributi dei dati HTML 5

In HTML5, puoi aggiungere attributi personalizzati a qualsiasi elemento del documento. Lo scopo di questi attributi è determinato autonomamente dallo sviluppatore web, ma nella maggior parte dei casi hanno lo scopo di memorizzare alcune informazioni, che possono poi essere utilizzate negli script JavaScript. Gli attributi personalizzati iniziano sempre con data-* :

Lavorare con gli attributi dei dati utilizzando i metodi attr eremoveAttr

L'esecuzione di azioni sugli attributi dei dati in jQuery viene solitamente eseguita utilizzando i metodi attr eremoveAttr.

// ottiene il valore dell'attributo data del primo elemento dell'insieme corrente $("selector").attr("data-*"); // aggiunge o modifica il valore dell'attributo data per tutti gli elementi selezionati $("selector").attr("data-*","value"); // rimuove il valore dell'attributo data da tutti gli elementi trovati in un modo - utilizzando attr $("selector").attr("data-*",null); Metodo 2: utilizzo di takeAttr $("selector").removeAttr("data-*");

Ad esempio, mostriamo il valore degli attributi data dell'elemento div con id="phone-1" nella console del browser:

// ottiene i valori degli attributi dei dati var phoneInfo = "Nome: " + $("#phone-1").attr("data-name") + "; Prezzo: " + $("#phone- 1"). attr("prezzo-dati"); // stampa i valori sulla console console.log(phoneInfo);

Questo metodo (attr) restituisce il valore dell'attributo data come stringa.

Ad esempio, aggiungiamo l'attributo data-year all'elemento precedente:

$("#telefono-1").attr("anno-dati", 2016);

Puoi capire più in dettaglio come lavorare con questi metodi nell'articolo jQuery - Lavorare con gli attributi degli elementi HTML.

jQuery: attributi dei dati e metodo dei dati

Il metodo dati non viene utilizzato in jQuery per comunicare con gli attributi dei dati. Il suo scopo principale è leggere i dati dalla memoria interna di jQuery ($.cache) o scrivervi alcune informazioni.

La memoria interna jQuery è una sorta di contenitore in cui è possibile inserire informazioni arbitrarie associate a uno specifico elemento DOM della pagina corrente.

Tuttavia, questo metodo può leggere gli attributi dei dati HTML5 e inserirli nella memoria interna. Ciò accade solo se nell'archivio jQuery non è presente alcuna chiave con un nome uguale al nome dell'attributo dati. Altrimenti otterrai il valore dall'archivio $.cache.

Pertanto, lavorare con gli attributi dei dati utilizzando il metodo data ha senso solo se l'ulteriore lavoro con essi verrà eseguito tramite l'archivio jQuery.

Un esempio in cui vedremo come funziona il metodo data con l'attributo data:

// questa azione inserirà l'attributo dei dati del prezzo nell'archivio (se non è nell'archivio) $("#book-1").data("price"); //valore 420 rub. // modifica il valore dell'attributo dei dati del prezzo dell'elemento utilizzando attr $("#book-1").attr("data-price","513 rub."); // legge il valore del prezzo (poiché questo valore è nell'archivio $.cache, verrà preso da esso) $("#book-1").data("price"); //valore 420 rub. // rimuove la chiave del prezzo, associata all'elemento book-1, dallo spazio di archiviazione $("#book-1").removeData("price"); // legge il valore del prezzo (poiché questo valore non è nell'archivio jQuery, verrà preso dall'attributo data e inserito in $.cache) $("#book-1").data("price"); //valore 513 rub.

Nel metodo data, la chiave corrisponde al nome dell'attributo data senza il prefisso data.

// se l'elemento div con id="pencil" non ha una chiave colore nell'archivio jQuery, legge il valore dell'attributo data-pencil e inserisce il suo valore in $.cache $("#pencil").data ("colore");

Inoltre, se la fine del nome dell'attributo dati (dopo data-) contiene trattini ("-"), quando si accede utilizzando il metodo dati, le lettere che precedono il trattino devono essere sostituite con quelle maiuscole e i trattini stessi devono essere rimosso. Ad esempio, il nome dell'attributo data-last-name deve essere specificato nel metodo dati come lastName .

Un altro aspetto dell'utilizzo del metodo dati è che quando jQuery analizza il valore di un attributo dati, tenta di trasmettere il suo valore (stringa) al tipo JavaScript appropriato (booleano, numero, oggetto, array o null). Ad esempio, il valore "420" viene convertito nel numero 420. Se il valore dell'attributo data è un oggetto (che inizia con "()" o un array (che inizia con "["), jQuery utilizza il metodo parseJSON per analizzare il valore. Ciò significa che il contenuto dell'attributo deve avere una sintassi JSON valida (inclusa la specifica dei nomi delle proprietà tra virgolette doppie). Ma se un tentativo di analizzare il valore dell'attributo data non ha successo, rimarrà nella sua forma originale (ad es. , come una stringa).

In sintesi, il metodo dati viene utilizzato per eseguire le seguenti operazioni (a seconda degli argomenti specificati):

1. Recupero del valore della chiave associata a un elemento dalla memoria interna di jQuery:

$("selettore").data("chiave");

Questa variante del metodo dati esegue una delle seguenti operazioni:

• Leggendo l'attributo data (il cui nome corrisponde alla chiave specificata) dal primo elemento dell'insieme corrente, posizionandolo in memoria e restituendo come risultato il valore di questa chiave. Questo metodo esegue questa azione solo se l'elemento ha un elemento dati corrispondente alla chiave e nel contenitore $.cache questo elemento non ha una voce con la chiave specificata.
• Ottiene il valore della chiave specificata dall'archiviazione jQuery. Il metodo dati esegue questa azione solo se l'elemento ha la chiave specificata in $.cache.
• restituisce un oggetto non definito o vuoto se non viene eseguita nessuna delle operazioni precedenti.

Se $("selettore") restituisce più elementi, questo metodo restituisce solo il primo elemento dell'insieme risultante.

2. Recupero di tutti i dati come oggetto JavaScript dall'archivio jQuery associato all'elemento specificato:

// il metodo dati viene chiamato senza argomenti $("selector").data();

Più in dettaglio, questa variante del metodo dati esegue le seguenti operazioni:

Inserisce automaticamente gli attributi dei dati nella memoria interna di jQuery. Esegue questa azione solo per quegli attributi di dati i cui nomi (chiavi) non sono attualmente nell'archivio jQuery.

Restituisce un oggetto costituito da coppie chiave-valore associate all'elemento corrente.

3. Il metodo dati viene utilizzato non solo per leggere valori, ma anche per scrivere dati (valore-chiave) associati ad alcuni elementi DOM nella memoria interna di jQuery.

// Opzione 1 (salva la coppia chiave-valore specificata per ogni elemento selezionato): $("selector").data(key, value); // chiave (stringa) // valore (dati di qualsiasi tipo) // Opzione 2 (imposta un insieme di coppie chiave-valore (oggetto) per tutti gli elementi trovati): $("selector").data(obj); // obj è un oggetto JavaScript contenente coppie chiave-valore

Un esempio di lavoro con il metodo dati:

//posiziona la chiave del prezzo con un valore di 550 nello storage jQuery $("#book-js").data("price",550); // legge le informazioni associate all'elemento #book-js dallo store (posizionando automaticamente l'attributo name data nello store) $("#book-js").data(); // ottiene il valore della chiave del prezzo dell'elemento #book-js $("#book-js").data("price"); // 550 // ottiene il valore della chiave del prezzo dell'elemento #book-js $("#book-js").data("name"); // "JavaScript"

Metodi per lavorare con l'archiviazione dei dati jQuery

Diamo un'occhiata a quali altri metodi sono presenti in jQuery per lavorare con l'archiviazione dei dati oltre a data .

metodo RemoveData

Questo metodo è progettato per rimuovere i dati associati a un elemento specifico dalla memoria interna di jQuery. Questo metodo non funziona con gli attributi dei dati, quindi tutti gli attributi dei dati corrispondenti alla chiave non verranno eliminati.

La sintassi del metodo RemoveData è:

// Opzione 1 - senza parametri (rimuove tutti i dati associati all'elemento corrente dal contenitore jQuery interno. Se come risultato della selezione vengono restituiti più elementi, il metodo deleteData eseguirà la sua azione (rimozione dei dati da $.cache) per ogni elemento. $ ("selector").removeData(); // Opzione 2 - con un parametro stringa contenente il nome della chiave che deve essere rimossa da tutti gli elementi trovati $("selector").removeData("key") ; // Opzione 3 - destinata a rimuovere diverse coppie di dati associati a un elemento dalla memoria interna di jQuery $("selector").removeData("key1 key2 ..."); solo le chiavi vengono specificate utilizzando l'array $("selector). ").removeData(["key1","key2",...]);

Rimuoviamo diverse coppie chiave-valore associate all'elemento con id="book-js" dallo store jQuery:

// leggendo tutte le chiavi dell'elemento #book-js (posizionando automaticamente gli attributi dei dati nel contenitore dati jQuery) $("#book-js").data(); // rimozione di 2 chiavi associate a #books-js dal contenitore dati jQuery $("#book-js").removeData(["price","name"]);

Funzione $.data()

Questa funzione esegue azioni simili al metodo dati, ma a differenza di esso funziona a un livello inferiore. Pertanto, nella maggior parte dei casi viene utilizzato il metodo dei dati, perché è uno strumento più conveniente per lavorare con la memoria interna di jQuery.

Questa funzione è destinata esclusivamente all'utilizzo con l'archiviazione jQuery e, a differenza del metodo $("selector").data(), non recupera i dati dagli attributi di dati HTML 5.

Sintassi della funzione jQuery.data():

// Opzione 1: salvataggio delle informazioni nello spazio di archiviazione jQuery $.data(element,key,value); // elemento - elemento DOM a cui verrà associata la coppia chiave-valore // chiave - chiave (stringa) che verrà associata al valore // valore - valore (qualsiasi tipo di dati tranne undefinito) // Opzione 2 - ottenere informazioni dal negozio jQuery $.data(elemento,chiave); // elemento - elemento DOM associato ai dati // chiave - nome a cui è associato il valore desiderato // Opzione 3 - restituzione di tutti i dati associati all'elemento specificato dall'archivio dati $.data(element); // elemento - elemento DOM associato ai dati

Un esempio di utilizzo della funzione $.data() per archiviare informazioni associate a uno specifico elemento DOM nello storage jQuery:

// memorizza le informazioni associate all'elemento id="book-html" $.data(document.getElementById("book-html"),"name","HTML in Action"); // aggiungendo un'altra informazione associata allo stesso elemento $.data(document.getElementById("book-html"),"price","760"); "760" // recupero dei dati dall'archivio jQuery associato all'elemento id="book-html" come oggetto var obj = $.data(document.getElementById("book-html")); // ottiene il valore del nome dell'oggetto var name = obj.name; // ottiene il valore del prezzo dell'oggetto var price = obj.price;

Funzione $.removeData()

Questa funzione, come il metodo RemoveData, viene utilizzata per rimuovere i dati dalla memoria interna di jQuery.

$.removeData() è una funzione di basso livello, proprio come $.data() . Pertanto, un'opzione più conveniente è utilizzare il metodo data() anziché la funzione $.data().

Utilizzando la funzione jQuery.removeData():

// Opzione 1: rimozione di tutte le informazioni dall'archivio associato all'elemento specificato $.removeData(element); // elemento - elemento DOM a cui sono associati i dati da eliminare // Opzione 2 - rimuove una coppia chiave-valore dall'insieme di dati associati all'elemento specificato $.removeData(element,key); // elemento - elemento DOM associato ai dati // chiave - chiave che definisce un insieme di informazioni (valore-chiave) che deve essere rimosso dal contenitore dati jQuery

Dimostrazione dell'utilizzo della funzioneremoveData:

// inserimento degli attributi dei dati nello spazio di archiviazione jQuery $("#book-css").data(); // ottenere la chiave del prezzo dallo store jQuery $("#book-css").data("price"); // 1170 // ottenere la chiave del nome dall'archivio jQuery $("#book-css").data("name"); // "CSS per professionisti" // rimozione della chiave del prezzo dallo spazio di archiviazione $.removeData(document.getElementById("book-css"),"price"); // quando riceviamo una chiave di elemento inesistente, otteniamo il valore undefinito $.data(document.getElementById("book-css"),"price"); //non definito

Funzione $.hasData()

Questa funzione determina se un elemento ha dati nella memoria interna di jQuery.

Utilizzando $.hasData() :

$.hasData(elemento); // elemento - elemento DOM che deve essere controllato per i dati in $.cache

La funzione hasData restituisce true se sono presenti dati nell'archivio associati all'elemento specificato. Altrimenti, questa funzione restituisce false.

Lo spazio di archiviazione interno $.cache viene utilizzato anche dalla libreria jQuery stessa. Un esempio lo utilizza per archiviare il codice del gestore eventi jQuery.

Un esempio di utilizzo della funzione hasData:

// controllo dei dati nella memoria interna associata all'elemento #book-css $.hasData(document.getElementById("book-css")); //false // inserisce il valore nella memoria interna $("#book-css").data("name","CSS per professionisti"); // controllo dei dati nella memoria interna associata all'elemento #book-css $.hasData(document.getElementById("book-css")); //true // rimuove il valore dalla memoria interna $.removeData(document.getElementById("book-css")); // controllo dei dati nella memoria interna associata all'elemento #book-css $.hasData(document.getElementById("book-css")); //falso

Puoi capire come lavorare in jQuery con gli attributi dei dati che appaiono nelle specifiche del linguaggio HTML5 nell'articolo "jQuery - Metodi Attr e RemoveAttr". Questi metodi (attr e deleteAttr) vengono utilizzati non solo per gestire gli attributi dei dati, ma anche qualsiasi altro attributo degli elementi HTML.