jQuery - Attributi

Alcuni dei componenti più basilari che possiamo manipolare quando si tratta di elementi DOM sono le proprietà e gli attributi assegnati a quegli elementi.

La maggior parte di questi attributi sono disponibili tramite JavaScript come proprietà del nodo DOM. Alcune delle proprietà più comuni sono:

className
tagName
id
href
title
rel
src

Considera il seguente markup HTML per un elemento immagine:

<img id = "imageid" src = "image.gif" alt = "Image" class = "myclass" 
   title = "This is an image"/>

Nel markup di questo elemento, il nome del tag è img e il markup per id, src, alt, class e title rappresenta gli attributi dell'elemento, ciascuno dei quali consiste in un nome e un valore.

jQuery ci dà i mezzi per manipolare facilmente gli attributi di un elemento e ci dà accesso all'elemento in modo che possiamo anche cambiare le sue proprietà.

Ottieni valore attributo

Il attr() può essere utilizzato per recuperare il valore di un attributo dal primo elemento dell'insieme corrispondente o per impostare i valori dell'attributo su tutti gli elementi corrispondenti.

Esempio

Di seguito è riportato un semplice esempio che recupera l'attributo title del tag <em> e imposta il valore <div id = "divid"> con lo stesso valore -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            var title = $("em").attr("title");
            $("#divid").text(title);
         });
      </script>
   </head>
	
   <body>
      <div>
         <em title = "Bold and Brave">This is first paragraph.</em>
         <p id = "myid">This is second paragraph.</p>
         <div id = "divid"></div>
      </div>
   </body>
</html>

Questo produrrà il seguente risultato:

Imposta valore attributo

Il attr(name, value) può essere utilizzato per impostare l'attributo denominato su tutti gli elementi nel set avvolto utilizzando il valore passato.

Esempio

Di seguito è riportato un semplice esempio che imposta src attributo di un tag immagine a una posizione corretta -

<html>
   <head>
      <title>The jQuery Example</title>
      <base href="https://www.tutorialspoint.com" />
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#myimg").attr("src", "/jquery/images/jquery.jpg");
         });
      </script>
   </head>
	
   <body>
      <div>
         <img id = "myimg" src = "/images/jquery.jpg" alt = "Sample image" />
      </div>
   </body>
</html>

Questo produrrà il seguente risultato:

Applicazione di stili

Il addClass( classes )può essere utilizzato per applicare fogli di stile definiti su tutti gli elementi corrispondenti. È possibile specificare più classi separate da uno spazio.

Esempio

Di seguito è riportato un semplice esempio che imposta class attributo di un tag para <p> -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("em").addClass("selected");
            $("#myid").addClass("highlight");
         });
      </script>
		
      <style>
         .selected { color:red; }
         .highlight { background:yellow; }
      </style>	
   </head>
	
   <body>
      <em title = "Bold and Brave">This is first paragraph.</em>
      <p id = "myid">This is second paragraph.</p>
   </body>
</html>

Questo produrrà il seguente risultato:

Metodi degli attributi

La tabella seguente elenca alcuni metodi utili che è possibile utilizzare per manipolare attributi e proprietà:

Sr.No.	Metodi e descrizione
1	attr (proprietà) Imposta un oggetto chiave / valore come proprietà per tutti gli elementi corrispondenti.
2	attr (chiave, fn) Imposta una singola proprietà su un valore calcolato, su tutti gli elementi corrispondenti.
3	removeAttr (nome) Rimuovere un attributo da ciascuno degli elementi corrispondenti.
4	hasClass (classe) Restituisce vero se la classe specificata è presente su almeno uno dei set di elementi corrispondenti.
5	removeClass (classe) Rimuove tutte o le classi specificate dall'insieme di elementi corrispondenti.
6	toggleClass (classe) Aggiunge la classe specificata se non è presente, rimuove la classe specificata se è presente.
7	html () Ottieni i contenuti html (innerHTML) del primo elemento corrispondente.
8	html (val) Imposta il contenuto html di ogni elemento corrispondente.
9	testo( ) Ottieni il contenuto di testo combinato di tutti gli elementi corrispondenti.
10	testo (val) Imposta il contenuto del testo di tutti gli elementi corrispondenti.
11	val () Ottieni il valore di input del primo elemento corrispondente.
12	val (val) Imposta l'attributo del valore di ogni elemento corrispondente se viene chiamato su <input> ma se viene chiamato su <select> con il valore <option> passato, l'opzione passata verrebbe selezionata, se viene richiamata sulla casella di controllo o sulla casella radio allora verrebbero spuntate tutte le caselle di controllo corrispondenti e la casella radio.

Esempi

Simile alla sintassi e agli esempi precedenti, i seguenti esempi ti darebbero una comprensione sull'uso di vari metodi di attributo in situazioni diverse -

Ecco un elenco completo dei metodi degli attributi in situazioni diverse:

Sr.No.	Selettore e descrizione
1	$("#myID").attr("custom") Ciò restituirebbe il valore dell'attributo personalizzato per il primo elemento corrispondente all'ID myID.
2	$("img").attr("alt", "Sample Image") Questo imposta il alt attributo di tutte le immagini a un nuovo valore "Sample Image".
3	$("input").attr({ value: "", title: "Please enter a value" }); Imposta il valore di tutti gli elementi <input> sulla stringa vuota, così come imposta L'esempio jQuery sulla stringa Immettere un valore .
4	$("a[href^=https://]").attr("target","_blank") Seleziona tutti i collegamenti con un attributo href che inizia con https: // e imposta il suo attributo di destinazione su _blank .
5	$("a").removeAttr("target") Ciò rimuoverà l' attributo di destinazione di tutti i collegamenti.
6	$("form").submit(function() {$(":submit",this).attr("disabled", "disabled");}); Ciò modificherebbe l'attributo disabilitato al valore "disabilitato" mentre si fa clic sul pulsante Invia.
7	$("p:last").hasClass("selected") Questo restituisce vero se l'ultimo tag <p> ha una classe associata selezionata .
8	$("p").text() Restituisce una stringa che contiene il contenuto di testo combinato di tutti gli elementi <p> corrispondenti.
9	$("p").text("<i>Hello World</i>") Ciò imposterebbe "<I> Hello World </I>" come contenuto di testo degli elementi <p> corrispondenti.
10	$("p").html() Ciò restituisce il contenuto HTML di tutti i paragrafi corrispondenti.
11	$("div").html("Hello World") Ciò imposterebbe il contenuto HTML di tutti i <div> corrispondenti su Hello World .
12	$("input:checkbox:checked").val() Ottieni il primo valore da una casella di controllo selezionata.
13	$("input:radio[name=bar]:checked").val() Ottieni il primo valore da una serie di pulsanti di opzione.
14	$("button").val("Hello") Imposta l'attributo del valore di ogni elemento corrispondente <button>.
15	$("input").val("on") Questo selezionerebbe tutta la radio o il pulsante della casella di controllo il cui valore è "on".
16	$("select").val("Orange") Questo selezionerebbe l'opzione Orange in una casella a discesa con le opzioni Orange, Mango e Banana.
17	$("select").val("Orange", "Mango") Questo selezionerebbe le opzioni Orange e Mango in una casella a discesa con le opzioni Orange, Mango e Banana.