oujood.com

Les sélecteurs jQuery

Les sélecteurs de jQuery vous permettent de sélectionner et manipuler les éléments HTML comme un groupe ou un seul élément
Les sélecteurs de jQuery vous permettent de sélectionner et manipuler les éléments HTML comme groupe ou un seul élément.

search |

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 :

Sélectionner 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:
cours precedent  Syntaxe jQuery
    Sommaire de :
JQuery
 Cours suivant:
Les événements jQuery    cours suivant
Par gerywa 25 juillet 2014 mis à jour le 24 Fevrier 2022

Trafic Booster
hebergement web


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

font-style

Indique le style de police pour le texte

Objet array js

Objet array js L'objet Array (tableau) : définition et utilisation

fonction levenshtein

Calcule la distance Levenshtein entre deux chaînes



Rentabilisez efficacement votre site

Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci