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.