Il wrapper $() di jQuery

Il wrapper $() di jQuery non è altro che un alias per jQuery(). Questo wrapper è alla base dell'intero meccanismo di selezione degli elementi in jQuery. Vediamolo in dettaglio.

L'uso principale di questo wrapper è la trasformazione di espressioni CSS in oggetti jQuery:

var items = $('#nav li');

Ora la variabile items contiene ciò che viene definito come un wrapped set di elementi. Questi elementi sono oggetti jQuery. Trattandosi di oggetti jQuery non è possibile operare su di essi utilizzando i metodi e le proprietà del DOM. Per farlo occorre riportare questi elementi al loro stato originario:

var nav = $('#nav')[0]; // elemento DOM
nav.className = 'nav';

Per gli elementi singoli si usa la notazione [0] degli array per trasformare l'elemento jQuery in un elemento DOM. Per elementi multipli si utilizza invece il metodo .get():

var items = $('#nav li').get(); // elementi DOM

for(var i = 0; i < items.length; i++) {
	var item = items[i];
	item.className = 'item-' + (i+1);
}

Il wrapper $() accetta anche espressioni DOM per selezionare gli elementi:

var nav = $(document.getElementById('nav'));

L'espressione DOM viene convertita in modo tale che l'oggetto restituito sia un oggetto jQuery. Questo wrapper accetta anche oggetti JavaScript come argomento, anche se l'uso principale di questa tecnica è limitato alla creazione di eventi custom sugli oggetti.

Il wrapper $() può accettare come secondo parametro il contesto in cui vanno selezionati gli elementi. Per contesto si intende la sezione del documento a cui fanno riferimento gli elementi selezionati. Ad esempio:

var items = $('li', '#nav'); // #nav come contesto

Usare il contesto è altamente consigliato per migliorare la performance di jQuery. Non specificandolo, infatti, si obbliga jQuery ad effettuare una ricerca sull'intero oggetto document.

Infine, questo wrapper può essere usato per creare nuovi elementi. In questo caso si può specificare un oggetto letterale come secondo parametro che conterrà le proprietà e gli attributi del nuovo elemento:

$('<div/>', {
	id: 'test',
	'class': 'test'
	}).appendTo('body');

Si tenga presente che il nuovo elemento non viene automaticamente inserito nel documento. Occorre sempre usare uno dei metodi di jQuery preposti per lo scopo.