Explication des sélecteurs jQuery: sélecteurs de classe, sélecteurs d'ID, etc.

Sélecteurs jQuery

jQuery utilise des sélecteurs de style CSS pour sélectionner des parties ou des éléments d'une page HTML. Il vous permet ensuite de faire quelque chose avec les éléments en utilisant des méthodes ou des fonctions jQuery.

Pour utiliser l' un de ces sélecteurs, tapez un signe dollar et entre parenthèses après: $(). C'est un raccourci pour la jQuery()fonction. À l'intérieur des parenthèses, ajoutez l'élément que vous souhaitez sélectionner. Vous pouvez utiliser des guillemets simples ou doubles. Après cela, ajoutez un point après les parenthèses et la méthode que vous souhaitez utiliser.

Dans jQuery, les sélecteurs de classe et d'ID sont comme ceux de CSS. Examinons rapidement cela avant de continuer.

Sélecteur d'ID en CSS

Le sélecteur d'ID CSS applique des styles à un élément html spécifique. Le sélecteur d'ID CSS doit correspondre à l'attribut ID d'un élément HTML. Contrairement aux classes, qui peuvent être appliquées à plusieurs éléments d'un site, un ID spécifique ne peut être appliqué qu'à un seul élément sur un site. L'ID CSS remplacera les propriétés de la classe CSS. Pour sélectionner un élément avec un identifiant spécifique, écrivez un caractère dièse (#), suivi de l'identifiant de l'élément.

Syntaxe

#specified_id { /* styles */ }

Vous pouvez combiner le sélecteur d'ID avec d'autres types de sélecteurs pour styliser un élément très spécifique.

section#about:hover { color: blue; } div.classname#specified_id { color: green; }

Remarque sur les identifiants

L'identification doit être évitée lors du coiffage si possible. Comme il a une spécificité élevée et qu'il ne peut être remplacé que si vous insérez des styles ou ajoutez des styles dans . Le poids des sélecteurs de classe de remplacement d'ID et des sélecteurs de type.

N'oubliez pas que le sélecteur d'ID doit correspondre à l'attribut ID d'un élément HTML.

Spécificité

Les sélecteurs d'identification ont une spécificité élevée, ce qui les rend difficiles à contourner. Les classes ont une spécificité beaucoup plus faible et sont généralement le moyen préféré pour styliser les éléments afin d'éviter les problèmes de spécificité.

Voici un exemple de méthode jQuery qui sélectionne tous les éléments de paragraphe et leur ajoute une classe «selected»:

This is a paragraph selected by a jQuery method.

This is also a paragraph selected by a jQuery method.

$("p").addClass("selected");

Ok, retour à jQuery

Dans jQuery, les sélecteurs de classe et d'ID sont les mêmes que dans CSS. Si vous souhaitez sélectionner des éléments avec une certaine classe, utilisez un point ( .) et le nom de la classe. Si vous souhaitez sélectionner des éléments avec un certain ID, utilisez le symbole dièse ( #) et le nom de l'ID. Notez que HTML n'est pas sensible à la casse, il est donc recommandé de conserver le balisage HTML et les sélecteurs CSS en minuscules.

Sélection par classe:

Paragraph with a class.

$(".p-with-class").css("color", "blue"); // colors the text blue

Sélection par ID:

  • List item with an ID.
  • $("#li-with-id").replaceWith("

    Socks

    ");

    Vous pouvez également sélectionner certains éléments avec leurs classes et leurs identifiants:

    Sélection par classe

    Si vous souhaitez sélectionner des éléments avec une certaine classe, utilisez un point (.) Et le nom de la classe.

    Paragraph with a class.

    $(".pWithClass").css("color", "blue"); // colors the text blue

    Vous pouvez également utiliser le sélecteur de classe en combinaison avec un nom de balise pour être plus précis.

      My Wish List
    `

    $("ul.wishList").append("
  • New blender
  • ");

    Sélection par ID

    Si vous souhaitez sélectionner des éléments avec une certaine valeur d'ID, utilisez le symbole dièse (#) et le nom de l'ID.

  • List item with an ID.
  • $("#liWithID").replaceWith("

    Socks

    ");

    Comme avec le sélecteur de classe, il peut également être utilisé en combinaison avec un nom de balise.

    News Headline

    $("h1#headline").css("font-size", "2em");

    Sélecteurs agissant comme des filtres

    Il existe également des sélecteurs qui agissent comme des filtres - ils commencent généralement par des deux points. Par exemple, le :firstsélecteur sélectionne l'élément qui est le premier enfant de son parent. Voici un exemple de liste non ordonnée avec certains éléments de liste. Le sélecteur jQuery sous la liste sélectionne le premier

  • dans la liste - l'élément de liste «Un» - puis utilise la .cssméthode pour rendre le texte vert.

    • One
    • Two
    • Three
    $("li:first").css("color", "green");

    Remarque: n'oubliez pas que l'application de CSS en JavaScript n'est pas une bonne pratique. Vous devez toujours donner vos styles dans des fichiers css.

    Un autre sélecteur de filtrage,, :contains(text)sélectionne les éléments qui ont un certain texte. Placez le texte que vous souhaitez mettre en correspondance entre parenthèses. Voici un exemple avec deux paragraphes. Le sélecteur jQuery prend le mot «Moto» et change sa couleur en jaune.

    Hello

    World

    $("p:contains('World')").css("color", "yellow");

    De même, le :lastsélecteur sélectionne l'élément qui est le dernier enfant de son parent. Le sélecteur JQuery ci-dessous sélectionne le dernier

  • Original text


  • dans la liste - l'élément de liste «Trois» - puis utilise la .cssméthode pour rendre le texte jaune.

    $("li:last").css("color", "yellow");

    Remarque: Dans le sélecteur jQuery,Worldest entre guillemets simples car il est déjà à l'intérieur d'une paire de guillemets doubles. Utilisez toujours des guillemets simples dans des guillemets doubles pour éviter de terminer involontairement une chaîne.

    Sélecteurs multiples Dans jQuery, vous pouvez utiliser plusieurs sélecteurs pour appliquer les mêmes modifications à plus d'un élément, en utilisant une seule ligne de code. Pour ce faire, séparez les différents identifiants par une virgule. Par exemple, si vous souhaitez définir la couleur d'arrière-plan de trois éléments avec respectivement les identifiants chat, chien et rat sur rouge, procédez simplement:

    $("#cat,#dog,#rat").css("background-color","red");

    Ce ne sont là que quelques-uns des sélecteurs disponibles pour une utilisation dans jQuery. Voir la section Plus d'informations pour un lien vers la liste complète sur le site Web jQuery.

    Plus d'information:

    • Liste complète des sélecteurs jQuery