jQuery: domande e risposte per chi inizia

In questo articolo affronteremo in dettaglio le domande più frequenti poste da chi utilizza jQuery per la prima volta.

Come posso selezionare un elemento usando una classe on un ID?

jQuery utilizza la stessa sintassi dei CSS. Quindi per un ID useremo:

$( "#myDivId" )

e per una classe:

$( ".myCssClass" )

oppure:

$( "div.myCssClass" )

esattamente come avviene nei CSS.

Come posso selezionare un elemento se ho già un elemento DOM?

Si può passare l'elemento DOM al wrapper $() che lo convertirà in un elemento jQuery:

var myDomElement = document.getElementById( "foo" ); 
$( myDomElement ).find( "a" );

Come faccio a sapere se un elemento ha una particolare classe CSS?

Si può usare il metodo booleano hasClass():

var $test = $( "#test" );

if( $test.hasClass( "evident" ) ) {

	//...

}

Per classi multiple si può utilizzare il metodo is():

if( $test.is( ".evident.alert" ) ) {

	//...
}

Come faccio a sapere se un elemento esiste?

Si può testare se l'elemento ha la proprietà length impostata:

if( $( "#test" ).length)  {

	//...
}

Come faccio a sapere se un elemento è visibile o meno?

Si possono usare i selettori personalizzati :visible e :hidden:

if( $( "#test" ).is( ":hidden" ) ) {

	//...

}

Come faccio ad abilitare o disabilitare gli elementi dei form?

Si può usare il metodo attr() per impostare l'attributo disabled su true:

$( "#submit" ).attr( "disabled', true );

Per abilitarli si può rimuovere l'attributo disabled:

$( "#submit" ).removeAttr( "disabled" );

Come faccio ad abilitare o disabilitare le checkbox?

Si può utilizzare lo stesso approccio visto in precedenza ma stavolta operando sulla proprietà checked:

$( "#choice" ).prop( "checked', true );

Stesso discorso se si vuole deselezionare una checkbox:

$( "#choice" ).prop( "checked', false );

Come posso ottenere il valore selezionato di un elemento select?

Quando si invia un form, si può utilizzare direttamente il metodo val():

var value = $( "#select" ).val();

Durante la selezione, invece, si può usare l'evento change() e il selettore :selected sugli elementi option:

$( "#select" ).change(function() {

	var value = $( "option:selected", $( this ) ).val();

});

Se invece si vuole selezionare il testo di un elemento option e non il suo valore, si può scrivere:

$( "option:selected", "#select" ).text();

Come posso utilizzare la risposta del server in una richiesta AJAX?

Si possono utilizzare i metodi preposti per ciascun componente AJAX di jQuery:

$.ajax({
     url: "/ajax/endpoint",
     success: function( response ) {
        // la richiesta ha avuto successo
     },
     error: function( xhr ) {
        console.log( "Error!  Status = ' + xhr.status ); // errore
     }
});

Per intervenire quando una richiesta è stata completata si può usare il metodo complete:

$.ajax({
     url: "/ajax/endpoint",
     success: function( response ) {
        // la richiesta ha avuto successo
     },
     error: function( xhr ) {
        console.log( "Error!  Status = ' + xhr.status ); // errore
     },
     complete: function() {
         //...
     }
});

Come posso trasformare un elemento jQuery in un elemento DOM?

I seguenti due metodi sono equivalenti:

var test = $( "#test" )[0];
var test = $( "#test" ).get( 0 );