Les sélecteurs jQuery

Dans le chapitre précédent, nous avons vu quelques exemples de comment sélectionner différents éléments HTML.

Les sélecteurs permettent de sélectionner des éléments HTML (ou groupes d'éléments) par le nom de l'élément, le nom d'attribut ou par le contenu

jQuery sélecteurs d'élément

jQuery utilise des sélecteurs CSS pour sélectionner des éléments HTML.

$("p") sélectionne tous les éléments <p>.

$("p.intro") sélectionne tous les éléments <p> de classe = " intro"

$("p#Demo") sélectionne tous les éléments <p> avec l'id = " démo ".

jQuery sélecteurs d'attribut

jQuery utilise les expressions XPath pour sélectionner les éléments ayant des attributs donnés.

$("[href]") sélectionner tous les éléments avec un attribut href.

$("[href='#']") sélectionner tous les éléments avec une valeur de href égale à " # ".

$("[href!='#']") sélectionner que tous les éléments avec un attribut href différent de " # ".

$("[href$='.jpg']") sélectionner tous les éléments avec un attribut href qui se termine par " .jpg ".

jQuery sélecteurs CSS

Les sélecteurs CSS jQuery permet de modifier les propriétés CSS pour les éléments HTML.

L'exemple suivant modifie la couleur d'arrière-plan de tous les éléments p au jaune :

Exemple : 📝 Copier le code

  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery demo sélecteur</title>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
      $("p").css("background-color","#FFFF00")
    })
  })
  </script>
  </head>
  <body>
  <h2>Changer la couleur du fond</h2>
  <p>Ceci est un paragraphe.</p>
  <p>Un autre paragraphe.</p>
  <button>Cliquer ici</button>
  </body>
  </html>

Quelques exemples de plus

Syntaxe	Description
$(this)	Élément HTML actuel
$("p")	Tous les éléments <p>
$("p.intro")	Tous les éléments <p> de classe = « intro »
$("p#intro")	Tous les éléments <p> avec l'id = « intro »
$("p#intro:First")	Le premier élément <p> avec l'id = « intro »
$(".intro")	Tous les éléments de classe = « intro »
$("#Intro")	Le premier élément avec id = « intro »
$("ul li:first")	Le premier élément <li> de chaque liste <ul>
$("[href$='.jpg']")	Tous les éléments avec un attribut href qui se termine par « .jpg »
$("div #intro .head")	Tous les éléments de classe = « head » à l'intérieur d'un élément <div> avec l'id = « intro »

Pour une référence complète, veuillez vous rendre à notre référence de sélecteurs jQuery

Sélecteur personnalisé de jQuery

En plus des sélecteurs définis par CSS, jQuery fournit son propre sélecteur personnalisé pour améliorer encore les capacités de sélection des éléments sur une page.

Code

📝 Copier le code

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
    <title>Sélecteur personnalisé jQuery</title>
<style>
    *{
        padding: 5px;
    }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    /* Mise en évidence des lignes de tableau apparaissant à des places impaires*/
    $("tr:odd").css("background", "yellow");
  
    /* Mettre en évidence les lignes du tableau qui apparaissent à des places paires*/ 
    $("tr:even").css("background", "orange");
  
    /* Mettre en évidence le premier paragraphe*/
    $("p:first").css("background", "red");
  
    /* Mettre en évidence le dernier élément du paragraphe*/ 
    $("p:last").css("background", "green");
  
    /* Mettre en évidence tous les éléments de saisie de type texte dans un formulaire*/ 
    $("form :text").css("background", "purple");
  
    /* Mettre en évidence tous les éléments de saisie avec le type password dans un formulaire*/
    $("form :password").css("background", "blue");
  
    /* Mettre en évidence tous les éléments d'entrée avec le type submit dans un formulaire*/ 
    $("form :submit").css("background", "aqua");
});
</script>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>No.</th>
                <th>Nom</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>John Carter</td>
                <td>johncarter@mail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Peter Parker</td>
                <td>peterparker@mail.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John Rambo</td>
                <td>johnrambo@mail.com</td>
            </tr>
        </tbody>
    </table>
    <p>C'est un paragraphe.</p>
    <p>C'est un autre paragraphe.</p>
    <p>C'est un paragraphe de plus.</p>
    <form>
        <label>Nom: <input type="text"></label>
        <label>Password: <input type="password"></label>
        <input type="submit" value="Sign In">
    </form>
</body>
</html>

Cours precedent:
Syntaxe jQuery

Sommaire de :
JQuery

Cours suivant:
Les événements jQuery

Par gerywa 25 juillet 2014 mis à jour le 24 Fevrier 2022