Come configurare smartphone e PC. Portale informativo
  • casa
  • Recensioni
  • Ottieni il valore di un attributo jquery. HTML: attributi degli elementi

Ottieni il valore di un attributo jquery. HTML: attributi degli elementi

Ogni attributo, ad eccezione dei booleani, ha un valore che appartiene a uno dei seguenti tipi: parola chiave, stringa, indirizzo, numero, percentuale, codice lingua. Questi non sono tutti i tipi, ma i più comuni.

Parola chiave

Alcuni attributi hanno valori riservati chiamati "parole chiave". Ad esempio, il valore dell'attributo type di un elemento definisce il tipo dell'elemento del modulo. Sotto l'elemento crea un pulsante.

Le parole chiave obbediscono alla specifica, l'elenco dei loro significati è limitato e non può essere modificato arbitrariamente.

Linea

Una stringa è un testo racchiuso tra virgolette doppie o singole.

Le virgolette definiscono l'inizio e la fine della stringa, quindi le stesse virgolette non possono essere aggiunte all'interno della stringa. Ad esempio, la riga seguente utilizza la combinazione errata di virgolette.

Per scrivere correttamente una stringa con virgolette interne, ci sono diverse opzioni.

1. Sfuggi alle virgolette interne in questo modo - \ ". In questo caso, non sarà più percepito dal browser come virgolette, ma viene considerato un simbolo.

2. Utilizzare una combinazione di virgolette singole e doppie.

Qui, la stringa dell'attributo title è racchiusa tra virgolette singole, quindi possiamo tranquillamente scrivere una doppia virgoletta all'interno.

Tutto funziona allo stesso modo per le virgolette singole.

L'indirizzo

Un indirizzo è un percorso a un documento, ad esempio, a un file grafico. L'indirizzo è necessario quando viene creato un collegamento a un sito, un'altra pagina Web o viene caricato un file specifico. Ad esempio, nell'elemento l'indirizzo viene utilizzato come valore dell'attributo src, imposta il percorso del file con l'immagine.

Distinguere tra indirizzi assoluti e relativi.

Indirizzi assoluti

Tali indirizzi funzionano ovunque e ovunque, indipendentemente dal nome del sito o della pagina web in cui viene fornito l'indirizzo e iniziano sempre specificando il protocollo di trasferimento dei dati. Per le pagine Web, di solito è HTTP (HyperText Transfer Protocol), quindi gli indirizzi assoluti iniziano con la parola chiave http: //. L'esempio 1 mostra un collegamento che utilizza un indirizzo assoluto.

Esempio 1. Utilizzo di un indirizzo assoluto in un collegamento

Collegamento

Google

Oltre al protocollo HTTP esiste anche il protocollo sicuro HTTPS. Non è sempre ovvio quale protocollo viene utilizzato nel sito, quindi può essere omesso del tutto nell'indirizzo del collegamento. In questo caso, l'indirizzo sarà scritto come segue:

Google

Gli indirizzi assoluti vengono utilizzati principalmente per puntare a un'altra risorsa di rete e raramente vengono utilizzati per i collegamenti interni.

Indirizzi relativi

Gli indirizzi relativi sono specificati dalla radice del sito o dal documento corrente. Ad esempio il codice significa scaricare un file grafico denominato pic.png, che si trova nella stessa cartella della pagina web stessa. Di seguito sono riportati alcuni esempi di tali indirizzi.

/
L'indirizzo di solito punta al file index.html, che si trova nella radice del sito. Se manca il file index.html, il browser di solito visualizza un elenco di file che si trovano in questa directory. Il nome del file non deve essere index.html, questo parametro viene modificato attraverso le impostazioni del server web - questo è il nome del programma che analizza le richieste provenienti dal browser e gli passa i documenti mostrati all'utente.

/images/pic.png
Un trattino (/) davanti all'indirizzo indica che l'indirizzamento inizia dalla radice del sito. Il collegamento porta al file pic.png situato nella cartella delle immagini. E questo, a sua volta, si trova alla radice del sito.

../help/me.html
Due punti davanti al nome dicono al browser di andare un livello più in alto nell'elenco delle cartelle del sito e lì di "cercare" nella cartella della guida per un file chiamato me.html.

manuale / info.html
Se non ci sono caratteri aggiuntivi davanti al nome della cartella, come punti o trattini, la cartella si trova all'interno della cartella corrente e il file info.html è già al suo interno.

Gli indirizzi root del sito come / demo / funzionano solo sotto il controllo di un server web e non sono applicabili su un computer locale.

Link

Guarda la mia foto!

Come fare la stessa foto?

A volte puoi trovare indirizzi nel form. /File /doc.html. Un punto davanti significa che il conto alla rovescia proviene dalla cartella corrente. Questa notazione è ridondante e può essere abbreviata in file / doc.html.

Numeri

I numeri sono composti da cifre da 0 a 9; i numeri negativi sono preceduti da un segno meno (-45) se necessario. L'esempio 3 mostra l'uso dei numeri come valori degli attributi.

Esempio 3. Utilizzo dei numeri

Numeri

Temperatura dell'acqua

Basso Normale Caldo Acqua bollente

Oltre agli interi, è consentito utilizzare frazioni decimali, mentre le parti intere e frazionarie sono separate l'una dall'altra da un punto - 36,6, come mostrato nell'esempio 4.

Esempio 4. Numeri frazionari

input, attributo massimo

Indica la tua temperatura in gradi:

Interesse

La notazione percentuale consente di eseguire lo snap alle dimensioni dell'elemento padre e impostare le dimensioni relative ad esso. Supponiamo di avere il seguente codice:

Elemento situato all'interno

Quindi l'elemento

Sarà un genitore per ... È vero anche il contrario: l'elemento è un figlio di

Di conseguenza, in questo caso, la larghezza dell'immagine in percentuale viene calcolata dal paragrafo padre, che per impostazione predefinita occupa tutto lo spazio libero della finestra in larghezza.

Il browser capisce che stiamo parlando di percentuali se viene aggiunto un simbolo% dopo il numero, ad esempio: larghezza = "40%".

L'esempio 5 mostra il codice di una pagina web, in cui la larghezza dell'immagine è indicata in percentuale.

Esempio 5. Dimensioni dell'immagine in percentuale

Immagine

Il risultato di questo esempio è mostrato in Fig. 1. La larghezza dell'immagine è impostata al 100%, quindi occupa l'intera larghezza disponibile della finestra del browser. L'altezza non è specificata e viene calcolata automaticamente dal browser.

Riso. 1. Dimensione dell'immagine in percentuale

Il vantaggio della notazione percentuale è che la dimensione dell'immagine cambia con la larghezza della finestra del browser e non rimane statica. Gli svantaggi includono il deterioramento della qualità dell'immagine quando è fortemente allungata.

Codice lingua

Viviamo in un'era di globalizzazione, quando i siti web contengono testi in diverse lingue. Per mostrare ai motori di ricerca in quale lingua è scritto il testo e impostare le proprie impostazioni per le diverse lingue (tipi di virgolette, ad esempio) e la lingua del testo è indicata sotto forma di codice. L'attributo lang viene utilizzato per impostare la lingua (esempio 6).

Esempio 6. Utilizzo dell'attributo lang

lang

Frase in francese

Je n "ai pas mangé depuis six jours

In questo esempio, la lingua russa è specificata per l'intera pagina utilizzando l'attributo lang con il valore ru. Per indicare che la lingua si applica all'intera pagina, viene aggiunto un attributo all'elemento ... Per il testo francese, è stato aggiunto all'elemento l'attributo lang con un valore fr

Puoi vedere i valori validi dell'attributo lang in questa pagina.

Vlad Merzhevich

Ciascun attributo del tag contiene un valore di un tipo e un formato di scrittura specifici. Si distinguono i seguenti tipi di valori: parole chiave, numeri, data e ora, colori, URL.

Tutti gli attributi sono caratterizzati dai seguenti principi.

  • Se non viene specificato alcun valore in modo esplicito, viene applicato il valore predefinito o l'attributo viene ignorato.
  • Se viene specificato un valore di attributo non valido, ad esempio, viene aggiunto del testo invece di un numero, il valore di tale attributo viene ignorato e viene utilizzato il valore predefinito.

Non tutti gli attributi hanno un valore predefinito, se non esiste tale attributo o se il suo valore non è corretto, l'attributo viene ignorato.

parole chiave

Questo è un dato insieme fisso di determinate parole che possono essere sostituite come valori di attributo. Le parole chiave non fanno distinzione tra maiuscole e minuscole e possono essere scritte in qualsiasi modo conveniente. Ad esempio, i valori per palmare, palmare e palmare sono in effetti gli stessi.

L'esempio 1 mostra come creare un modulo POST al server utilizzando il valore post dell'attributo method.

Esempio 1. Metodo di invio del modulo

HTML5 IE Cr Op Sa Fx

parole chiave

In questo esempio, nell'elemento

l'attributo method viene utilizzato con il valore post. Se questo attributo non è specificato, verrà sostituito il valore predefinito get. Per il primo elemento l'attributo type non è specificato, poiché viene automaticamente sostituito con il valore text, e per il secondo l'attributo type è già specificato per creare il pulsante di invio del modulo.

Numeri

I numeri includono: numeri interi positivi contenenti una o più cifre da 0 a 9; numeri negativi; così come reale o frazionario (ad esempio, 0,5).

Interi positivi

Vengono utilizzati attivamente quando è necessario impostare il numero di colonne, limitare la dimensione del campo del modulo e il numero di caratteri inseriti, impostare la larghezza e l'altezza dell'immagine, ecc. L'esempio 2 mostra la creazione di un elenco numerato a partire con 11.

Esempio 2. Utilizzo di un numero intero

HTML5 IE Cr Op Sa Fx

Numero intero

  1. Cheburashka
  2. Coccodrillo Gena
  3. Shapoklyak

Interi negativi

Gli interi negativi sono usati meno frequentemente degli interi positivi per ovvie ragioni. Non possono essere utilizzati per specificare l'enumerazione o la larghezza, se non altro perché non ci sono immagini con larghezze negative. Quindi in HTML tali numeri vengono utilizzati principalmente nei moduli per limitare l'input.

Per indicare un numero negativo, precederlo con un segno meno (-) senza spazi (ad esempio: -15). L'esempio 3 mostra l'uso di valori negativi.

Esempio 3. Numero con segno meno

HTML5 IE Cr Op Sa Fx

Numeri negativi

Immettere un numero con incrementi di 2

Firefox non supporta il tipo di numero e visualizza invece un campo di testo normale.

Numeri reali

Ciò include le frazioni decimali e un punto viene utilizzato per separare le parti intere e frazionarie. Il numero può essere negativo, quindi viene inserito un segno meno (-).

Esempi di numeri reali: -0,84, 3,1415926, 1,717.

Esiste anche una seconda forma di scrittura dei numeri reali, quando il simbolo latino e o E viene aggiunto dopo il numero, quindi il numero che indica il grado, e può anche essere con un segno meno. Questo è analogo a moltiplicare il numero davanti a E per 10 alla potenza indicata dopo E. Ecco alcuni esempi per chiarezza.

3,1415926e5 = 3,1415926 × 10 5 = 3,1415926 × 100000 = 314159,26

5e-2 = 5 × 10 -2 = 5/100 = 0,05

78e2 = 78 × 10 2 = 7800

Il browser Opera non funziona correttamente con i numeri reali che hanno una E maiuscola, quindi inserisci una e minuscola.

data e ora

Utilizzato per indicare l'anno, il mese e l'anno o la data e l'ora complete.

La data e l'ora sono specificate in un formato speciale, un esempio del quale è mostrato nella tabella. uno.

Ogni unità ha la sua forma e i suoi limiti predeterminati.

  • Anno - impostato in quattro cifre (1860).
  • Mese - due cifre (01 - gennaio, 02 - febbraio, 12 - dicembre).
  • Giorno - due cifre da 01 a 31.
  • Ora - due cifre da 00 a 23.
  • I minuti sono due cifre da 00 a 59.
  • I secondi sono due cifre da 00 a 59.
  • Fuso orario: ore e minuti con un segno più o meno.

La data e l'ora sono separate da una lettera latina maiuscola T. Il fuso orario, se necessario, viene scritto dopo l'ora con un segno più o meno. Ad esempio, per Mosca il fuso orario sarà +03: 00.

Colori

Il valore del colore è composto da tre numeri che vanno da 0 a 255 in esadecimale che rappresentano i componenti rosso, verde e blu nello spazio colore sRGB. Ogni valore di colore deve iniziare con un carattere cancelletto (#), seguito comunque dai seguenti sei numeri o lettere: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C , D, E, F. Non sono ammessi altri caratteri. Per ulteriori informazioni sul colore in HTML, vedere.

URL

Un URL è l'indirizzo di un documento o file. Contiene diverse parti, non tutte necessarie. Questi sono protocollo, nome host, porta, percorso, stringa di query e hash. Tavolo 2 elenca i parametri URL con la loro descrizione.

tab. 2. Parametri URL
Parametro Descrizione Esempio
protocollo Protocollo di rete. Per i documenti ipertestuali, questo è HTTP. http: //
https: //
Nome host Indirizzo Web. luogo
www.google.com
porta Una risorsa di sistema allocata al server web. Il valore predefinito è 80, puoi lasciarlo vuoto. :80
sentiero Il percorso del documento sul sito. /open/doc.html
stringa della domanda Una stringa in cui vengono passati i parametri della richiesta GET con valori. È scritto dopo il punto interrogativo (?). nome = vasya
hash La riga dopo il cancelletto (#). #superiore

A seconda della presenza di determinati parametri si distingue tra indirizzi assoluti e relativi. L'indirizzo assoluto contiene la porta e l'hostname, quello relativo contiene il percorso del documento. La stringa di query e l'hash possono essere aggiunti a qualsiasi tipo di indirizzo. Se l'URL contiene solo un hash, il documento corrente andrà all'elemento con id = "hash_name". L'hash nell'attributo id non è scritto in questo caso.

L'URL è affetto dall'attributo href, l'indirizzo del documento, tenendone conto, potrebbe risultare diverso da quello esplicitamente impostato.

Domande da verificare

1. Kolya ha scritto un numero errato nel codice seguente, ma il validatore non ha generato alcun errore. Come mai?

2. Dasha ha usato il numero 12g5 nella riga

Ma il browser Chrome non ha mostrato alcun risultato. Come mai?

3. Quanti modi ci sono in HTML per impostare il colore arancione?

Salva questa pagina per testare gli esempi seguenti.

La libreria jQuery consente di ottenere e impostare i valori degli attributi degli elementi contenuti in un oggetto jQuery. I metodi di JQuery per la manipolazione degli attributi sono descritti nella tabella seguente:

Metodi per lavorare con gli attributi
Metodo Descrizione
attr (nome) Restituisce il valore dell'attributo con il nome specificato per il primo degli elementi contenuti in un oggetto jQuery
attr (nome, valore) Imposta il valore dell'attributo con il nome specificato per tutti gli elementi contenuti in un oggetto jQuery
attr (oggetto di visualizzazione) Imposta gli attributi specificati sull'oggetto di visualizzazione per tutti gli elementi contenuti nell'oggetto jQuery
attr (nome, funzione) Imposta l'attributo specificato per tutti gli elementi contenuti in un oggetto jQuery utilizzando la funzione
removeAttr (nome), removeAttr (nome) Rimuove gli attributi da tutti gli elementi contenuti in un oggetto jQuery
prop (nome) Restituisce il valore della proprietà specificata per il primo degli elementi contenuti in un oggetto jQuery
prop (nome, valore), prop (oggetto di visualizzazione) Imposta il valore di una o più proprietà per tutti gli elementi contenuti in un oggetto jQuery
prop (nome, funzione) Imposta il valore della proprietà specificata per tutti gli elementi contenuti in un oggetto jQuery utilizzando la funzione
removeProp (nome) Rimuove la proprietà specificata da tutti gli elementi contenuti nell'oggetto jQuery

Se metodo attr() chiamato con un argomento, jQuery restituisce il valore dell'attributo specificato per il primo degli elementi nell'insieme selezionato. Di seguito viene fornito un esempio pertinente:

$ (funzione () (var srcValue = $ ("img"). attr ("src"); console.log ("Valore attributo:" + srcValue);));

In questo scenario, selezioniamo tutti gli elementi img nel documento, quindi utilizziamo il metodo attr() per recuperare il valore dell'attributo src, che, quando viene letto, ottiene una stringa. Il seguente output viene stampato sulla console:

Il recupero del valore dell'attributo per tutti gli elementi contenuti in un oggetto jQuery viene effettuato utilizzando i metodi each() e attr() insieme:

$ (function () (var srcValue = $ ("img"). each (function (index, element) (console.log ("Il valore dell'attributo src:" + $ (this) .attr ("src") );) );));

Questo script crea un oggetto jQuery dall'oggetto HTMLElement passato alla funzione come argomento utilizzando la funzione $ (). Questo oggetto contiene un singolo elemento ideale per il metodo attr().

Impostazione dei valori degli attributi

Se viene utilizzato il metodo attr() per impostare il valore di un attributo, la modifica viene applicata a tutti gli elementi contenuti nell'oggetto jQuery. Quindi, in questo caso, il metodo si comporta in modo diverso rispetto alla lettura degli attributi, quando viene restituito solo il valore di un attributo di un elemento. Quando l'attributo è impostato, il metodo attr() restituisce un oggetto jQuery, il che significa che può essere concatenato.

Di seguito è mostrato uno script di esempio che imposta il valore di un attributo:

$ (funzione () ($ ("img") .. png ");));

Questo script seleziona tutti gli elementi img nel documento e collega l'attributo src all'immagine lily.png. Il valore impostato viene applicato a tutti gli elementi selezionati, come mostrato in figura:

Impostazione di più attributi

Puoi impostare i valori di più attributi con una singola chiamata al metodo attr(), passando un oggetto come argomento. Le proprietà di un tale oggetto vengono interpretate come nomi di attributi e valori di proprietà come valori di attributi. Questo oggetto viene comunemente chiamato oggetto mappa. Di seguito viene fornito un esempio pertinente:

$ (funzione () (var attrValues ​​= (src: "http: //site/downloads/jquery/lily.png", stile: "bordo: rosso solido spesso"); $ ("img"). attr ( attrValues) ;));

Questo script crea un oggetto che definisce le proprietà denominate src e style. Successivamente nel documento, vengono selezionati gli elementi img e viene passato un oggetto di visualizzazione al metodo attr(). La visualizzazione della pagina nella finestra del browser è mostrata in figura:

Impostazione dinamica dei valori degli attributi

I valori degli attributi possono essere determinati in fase di esecuzione passando una funzione al metodo attr() come argomento. Di seguito viene fornito un esempio pertinente:

$ (function () ($ ("img"). attr ("src", function (index, oldVal) (if (oldVal.indexOf ("rose")> .png ";) else if ($ (this). più vicino ("# riga2"). lunghezza> .png ";)));));

Gli argomenti passati alla funzione specificata sono l'indice dell'elemento in elaborazione nel set e il valore precedente dell'attributo. La this variabile fa riferimento all'oggetto HTMLElement attualmente elaborato. Se vuoi modificare un attributo, la funzione deve restituire una stringa contenente il nuovo valore. Se non viene restituito alcun risultato, viene utilizzato il vecchio valore dell'attributo. In questo esempio, la funzione viene utilizzata per modificare selettivamente le immagini visualizzate dagli elementi img.

Rimozione di attributi

Gli attributi possono essere rimossi (annullati) usando il metodo removeAttr() come mostrato nell'esempio sotto.

Come impostare o modificare il valore di un attributo utilizzando jQuery

5 (100%) 3 voti

La libreria jQuery offre la possibilità di impostare o modificare il valore degli attributi in due modi. Il metodo Attr() viene utilizzato per impostare e modificare il valore degli attributi. Abbiamo già parlato di questo metodo: oltre all'impostazione o alla modifica, utilizzando questo metodo possiamo.

Sintassi del metodo Attr() per impostare/modificare il valore

  • attr (nome, valore)
    • Imposta l'attributo specificato sul valore passato per tutti gli elementi nell'oggetto jQuery.
  • Parametri
    • nome - (Stringa) Il nome dell'attributo da impostare.
    • valore - (Stringa | Numero | Booleano | Funzione) Specifica il valore dell'attributo, che può essere qualsiasi espressione JavaScript. Qualsiasi valore diverso da una funzione viene convertito in una stringa. La funzione viene chiamata per ogni elemento dell'insieme, passando l'indice dell'elemento e il valore corrente dell'attributo con il nome dato nell'elemento. Il valore restituito dalla funzione diventa il valore dell'attributo.
  • ritorna
    • La collezione jQuery.

Esempio di utilizzo:

$ ("# mia_immagine"). attr ("titolo", "Mia immagine");

La prima opzione, utilizzando il metodo a prima vista, sembra semplice, ma non lo è! Come hai già capito, il secondo parametro (value) il metodo .attr() assume il valore che verrà impostato. Il valore può essere qualsiasi espressione JavaScript che alla fine restituirà una stringa.

Diventa molto più interessante quando il parametro value è una funzione incorporata o un riferimento a una funzione. In tali casi, la funzione viene chiamata per ogni elemento recuperato con il valore di ritorno della funzione utilizzato come valore dell'attributo. Quando viene chiamata una funzione, le vengono passati due parametri. Uno contiene l'indice in base zero dell'elemento nell'insieme e l'altro contiene il valore corrente dell'attributo con il nome dell'elemento. Inoltre, l'elemento viene impostato come contesto della funzione (this) per chiamarlo. Ciò consente alla funzione di personalizzare la sua gestione per ogni elemento specifico - il vantaggio principale di usarlo in questo modo.

Un esempio che utilizza il metodo .attr() come valore:

$ (""). attr ("titolo", funzione (indice, valorePrecedente) (restituisce valorePrecedente + "Io sono elemento" + indice + "e il mio nome è" + (this.id || "unset");)) ;

Con questo metodo, mettiamo sulla pagina tutti gli elementi HTML che hanno un attributo title, e cambiamo l'attributo di ogni elemento. La modifica viene effettuata aggiungendo al valore esistente una stringa composta utilizzando l'indice dell'elemento nel DOM e l'identificatore dell'attributo di ogni specifico elemento, se presente, o, in caso contrario, una stringa 'unset' (consente di ripristinare tutte le impostazioni ).

Il secondo caso d'uso per il metodo .attr() consiste nell'impostare/modificare il valore di più attributi contemporaneamente.

Sintassi del metodo che può modificare i valori di più attributi contemporaneamente

  • attr (attributi)
    • Utilizza le proprietà e i valori specificati dall'oggetto passato per impostare gli attributi appropriati su tutti gli elementi del set corrispondente.
  • Parametri
    • nome- (Stringa) Il nome dell'attributo da impostare.
    • attributi- Un oggetto le cui proprietà vengono copiate come attributi a tutti gli elementi dell'insieme.
  • ritorna
    • La collezione jQuery.

Con questa opzione, utilizzando il metodo attr(), è possibile modificare o impostare molto rapidamente il valore di più attributi su tutti gli elementi dell'insieme. Il metodo accetta un parametro e deve essere un oggetto. Le proprietà dell'oggetto sono i nomi di quegli attributi con cui vogliamo lavorare.

Esempio di utilizzo:

$ ("input"). attr ((value: "", placeholder: "Site search", title: "Please enter a value"));

Diamo un'occhiata all'esempio sopra. Siamo sulla pagina tutti gli elementi di input e cambiamo il valore, il segnaposto e gli attributi del titolo di tutti gli elementi trovati, se lo sono, e se no, allora aggiungiamo.

AVVERTIMENTO

La modifica dell'attributo type di un elemento di input o pulsante creato tramite il metodo document.createElement() genera un'eccezione in Internet Explorer 6-8.

Ultimo aggiornamento: 1.11.2015

Nel capitolo precedente abbiamo imparato come recuperare elementi utilizzando selettori e vari metodi, come perfezionare la selezione, lasciando solo gli elementi necessari. Tuttavia, la selezione in sé non sarebbe importante se jQuery non supportasse la manipolazione degli elementi selezionati. Quindi vediamo che tipo di manipolazione degli elementi possiamo fare con jQuery.

Attributi e proprietà degli elementi

La libreria jQuery ci offre un toolkit per manipolare le proprietà e gli attributi degli elementi. Prima di passare ai metodi diretti di jQuery, tuttavia, è opportuno notare come le proprietà e gli attributi differiscano.

Gli attributi sono elementi del markup dell'elemento come id, style, class e molti altri. Le proprietà, invece, rappresentano elementi di oggetti javascript.

Nonostante questa distinzione, esiste una mappatura tra proprietà e attributi. Quindi, l'attributo id corrisponderà alla proprietà id. Ad esempio, abbiamo un collegamento:

Cioè, visualizzerà il valore dell'attributo id sulla console. Allo stesso tempo, non tutti gli attributi hanno lo stesso nome per tutti gli attributi. Ad esempio, l'attributo class corrisponde alla proprietà className.

Modifica delle proprietà

JQuery fornisce un metodo prop() per lavorare con le proprietà. Per ottenere i valori di una proprietà, dobbiamo passare il nome della proprietà a questo metodo. Ad esempio, ecco come possiamo ottenere tutti gli URL dei link sulla pagina:

$ ("a"). each (funzione (indice, elem) (console.log ($ (elem) .prop ("href"));));

Per modificare il valore di una proprietà, è sufficiente passare un nuovo valore come secondo parametro:

$ ("a"). first (). prop ("href", "33.html");

Rimozione delle proprietà

Per rimuovere le proprietà, possiamo usare il metodo removeProp ("property_name"):

$ ("a"). first(). removeProp ("href");

Successivamente, alla proprietà verrà assegnato un nuovo valore: undefined, che indicherà che la proprietà non è definita.

Lavorare con gli attributi

Lavorare con gli attributi è molto simile a lavorare con le proprietà. Quindi, per ottenere il valore di un attributo di un elemento, dobbiamo utilizzare il metodo attr ("nome_attributo"):

$ ("a"). each (funzione (indice, elem) (console.log ($ (elem) .attr ("href"));));

L'azione di questo metodo è simile a quella mostrata per il metodo prop: l'output di tutti gli indirizzi di collegamento alla console.

E passando un valore come secondo parametro al metodo attr, puoi impostare un nuovo valore per l'attributo:

$ ("a"). first (). attr ("href", "33.html");

E anche per rimuovere i valori degli attributi, possiamo usare il metodo removeAttr ("nome_attributo"):

$ ("a"). first(). removeAttr ("href");

Nota, se nel caso di rimozione di una proprietà tramite il metodo removeProp, l'attributo corrispondente alla proprietà è rimasto, ad essa è stato assegnato solo il valore della proprietà, cioè non definito, quindi quando l'attributo viene rimosso tramite removeAttr, l'attributo viene rimosso dal markup dell'elemento.

Attributi personalizzati HTML5

HTML5 ha introdotto funzionalità come attributi personalizzati. La loro essenza è che possiamo applicare attributi aggiuntivi all'elemento, che memorizzerà un valore aggiuntivo. Attributi simili iniziano con il prefisso dati- seguito dal nome effettivo dell'attributo e dal suo valore. Ad esempio, nell'esempio seguente, aggiungo un attributo data-year che memorizzerà l'anno:

  • Giava
  • C/C++

Il metodo dei dati viene utilizzato per lavorare con tali attributi. Ha i seguenti casi d'uso:

    data ("nome attributo"): ottiene il valore dell'attributo del primo elemento nell'insieme. Il nome dell'attributo viene passato come parametro senza prefisso dati-

    Quindi, possiamo ottenere il valore dell'attributo dall'esempio precedente come segue:

    Console.log ($ ("ul"). Dati ("anno"));

    data(): restituisce un oggetto javascript che contiene un insieme di attributi e i relativi valori come coppie chiave-valore.

    Ad esempio, supponiamo di avere un elemento con due attributi:

      Quindi il metodo data() restituirebbe un oggetto (descrizione: "lang", anno: "2010"). E per ottenere il valore di un singolo attributo, puoi scrivere in questo modo:

      Console.log ($ ("ul"). Data (). Anno);

      data ("attributo", "nuovo valore"): imposta il valore dell'attributo alla stringa passata come secondo parametro:

      $ ("ul"). first (). data ("anno", "2012");

      Un oggetto javascript intero può anche fungere da nuovo valore e questo attributo conterrà l'intero oggetto come valore:

      $ ("ul"). first (). data ("lang", (rate: "tiobe", year: 2012));

    Se vogliamo rimuovere un attributo, per questo dobbiamo utilizzare il metodo removeData ("nome_attributo").

Principali articoli correlati