Come detto in precedenza tutto ciò che possiamo fare con jQuery gira intorno all'oggetto/funzione $, il cui utilizzo più comune è quello di selettore CSS:
var elementi = $("#mioId");
In questo esempio la variabile elementi rappresenta un oggetto jQuery contentente un riferimento all'elemento con id mioId.
Come detto in precedenza la stringa passata alla funzione deve rappresentare il selettore CSS degli elementi da ricercare, siano essi un singolo id oppure elementi accomunati da una classe:
$(".miaClasse"); //tutti gli elementi con attributo class "miaClasse"
Come in un foglio di stile sarà possibile indicare più di un selettore anche con sintassi piuttosto complesse:
$(".miaClasse, #mioId, ul#mioMenu li");
//cerca una classe, un id e gli elementi di una specifica lista puntata
Vedremo più avanti le possibili combinazioni di selettori CSS ricercabili con jQuery, ma per completezza è importante dire che, nel caso di ricerca con selettori CSS, è possibile passare alla funzione un secondo argomento per indicare un contesto nel quale operare:
$(".miaClasse",document.getElementById('mioId'));
//Tutti gli elementi con classe "miaClasse" dentro l'elemento DOM con id mioId
Questa caratteristica sarà molto utile quando dovremo ciclare fra gli elementi raccolti da $ per lavorare direttamente su ognuno di loro.
Inutile dire che $ accetta come primo argomento anche riferimenti diretti ad elementi del DOM:
$(document.getElementById('mioId'));
$(window);
Creare nuovi elementi
Proprio per rispettare la sinteticità del progetto la stessa funzione $ può essere utilizzata anche per altri scopi, che verranno interpretati dalla funzione in base agli argomenti passati. Così è possibile creare un nuovo elemento nel DOM semplicemente passandone il tag:
$("<div></div>");
o addirittura:
$("<div/>");
In questo modo possiamo anche creare elementi complessi in un'unica stringa di codice:
var blocco = $("<div><p>Esempio di elementi <strong>nidificati</strong></p></div>");
Comunque avremo la possibilità di applicare tutti i metodi di jQuery ai nuovi elementi:
blocco.addClass("nuovaClasse"); //aggiungo una classe al div
Infine, per inserire questi elementi all'interno della pagina useremo, per esempio, il metodo appendTo:
blocco.appendTo(document.body); //inserisci nel body
blocco.appendTo("#contenitore"); //inserisci dentro un altro elemento
Ecco un esempio pratico.
Lanciare funzioni al caricamento del DOM
Una caratteristica particolare di $ è quella che permette di passare come argomento una funzione. In questo caso le istruzioni passate verranno lanciate "on DOM ready", cioè quando l'albero degli elementi HTML è stato caricato:
$(function () {
alert("DOM caricato!");
});
Questo script differisce da:
window.onload = function () {
alert("Caricato!");
};
in quanto nel secondo la funzione viene lanciata quando tutto il documento è stato caricato, compresi i fogli di stile e le immagini. L'evento DOM ready, invece, permette di associare funzioni agli elementi del documento con la sicurezza che essi verranno eseguiti anche se l'utente li richiama prima del caricamento completo della pagina (esempio).