I selettori di jQuery devono gran parte della loro efficacia al fatto di operare in un contesto preciso dell'albero DOM del documento. Per impostazione predefinita, i selettori operano avendo come riferimento l'oggetto document, ma questa impostazione può essere modificata usando la sintassi estesa del wrapper jQuery $().
Consideriamo questa struttura HTML:
<ul id="test">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
Tradizionalmente siamo abituati ad operare sulle voci di lista in questo modo:
$('#test li').each(function() {
//...
});
A livello di performance, questo comporta un notevole dispendio di risorse, specie quando gli elementi sono molto numerosi. La sintassi di jQuery è del tutto simile a quella dei CSS: selettori con maggiore specificità sono più performanti di selettori con minore specificità.
Possiamo usare il contesto dei selettori in questo modo:
$('li', '#test').each(function() {
//...
});
In questo modo il contesto non è più document ma #test, e quindi l'engine di jQuery userà tale contesto per selezionare gli elementi voluti. Questo comporta un significativo aumento della performance, e si rivela decisivo soprattutto nelle situazioni di più elevato carico da parte del browser.