La première chose à apprendre de JQuery afin d'être en mesure de séparer votre code Javascript et (X)HTML sont les Sélecteurs. Les sélecteurs permetttent de sélectionner un/des éléments en dehors de DOM et ces derniers peuvent être manipuler comme toutes autres objets. Si vous êtes famillié avec CSS, vous allez saisir rapidement les sélecteurs. Ceux-ci sont dans la réalité la même chose et ils utilisent presque la même syntaxe. JQuery permet la sélection des éléments grâce à une fonction spéciale nommé « $ ».
Exemples communs d'utilisation des sélecteurs sous JQuery
$(document); // Activate jQuery for object
$('#monDiv') // Sélectionne l'éléments ayant l'ID «monDiv».
$('p.first') // Sélectionne tous les éléments <p> ayant la classe «first».
$('p[title="Bonjour"]') // Sélectionne tous les éléments <p> dont le titre débute est «Bonjour».
$('p[title^="H"]') // Sélectionne tous les éléments <p> dont le titre débute par «H».
$('ul, ol, dl') // Sélectionne tous les éléments <ul>, <ol> et <dl>
Voilà, je crois que le tout ne demande pas plus d'explication que celà. Tous les sélecteurs CSS vont fonctionner avec JQuery et ce dernier permet encore plus de possibilité que CSS.
Jeu de briques
Snake
Pacman
Bubble