Rechercher avec une classe (les sélecteurs jQuery)

Nous avons vu précédemment comment rechercher un élément HTML avec son identifiant. Sur le même principe nous pouvons rechercher un élément HTML qui possède une classe spécifiée et lui appliquer une mise en forme CSS.

Rechercher avec une classe

Nous reprenons l’exemple précédent dans lequel le script va rechercher l’élément HTML qui possède la classe .bordure et lui appliquer une bordure en CSS.

Voici l’affichage obtenu

les sélecteurs jQuery: Rechercher avec une classe

les sélecteurs jQuery: Rechercher avec une classe

Rechercher avec l’identifiant (les sélecteurs jQuery)

Les sélecteurs CSS sont des critères de choix pour cibler les éléments d’une page web. Notez qu’il existe aussi des sélecteurs propres à jQuery. Dans cet article nous allons étudier la syntaxe du sélecteur qui permet de rechercher les éléments HTML des pages avec l’identifiant.

Rechercher avec l’identifiant

Dans cet exemple, nous avons trois paragraphes <p>, dont le second possède l’identifiant #deuxieme: <p id="deuxieme">.

L’objectif du script jQuery est d’appliquer une mise en forme CSS sur ce deuxième paragraphe identifié seul. Nous allons pouvoir le rechercher avec son identifiant #deuxieme.

Explication :

Une fois la page chargée avec le DOM, $(document).ready(function(){...});, le script recherche l’élément HTML avec l’identifiant #deuxieme: $("#deuxieme"). Une fois trouvé, une mise en forme CSS est appliquée à l’aide de la méthode jQuery css().

Voici l’affichage obtenu

Le même exemple en utilisant la recherche avec une classe.

Initialiser un script jQuery

La syntaxe

Une fois que vous avez lié vos pages web avec la bibliothèque jQuery, il faut maintenant indiquer à votre script qu’il peut être utilisé. Pour ce faire, il faut initialiser le script.

Le caractère $ est l’alias qui permet de cibler jQuery à partir du document (document) qu’est la page web. Cela permet de créer un objet jQuery.

Quand la page et tous ses éléments constitutifs sont chargés (ready()) nous pouvons utiliser le script : function(){...};.

Initialiser un script jQuery

La première syntaxe est la plus complète et la plus simple à comprendre. Mais, pour aller plus vite, vous pouvez aussi utiliser la syntaxe courte :

Ces deux syntaxes sont strictement identiques et elles produiront les mêmes résultats.