Les sélecteurs jQuery

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

Les sélecteurs jQuery

jQuery cours tutorial

jQuery sélecteurs

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




Cours precedent:
cours precedent  Syntaxe jQuery
    Sommaire de :
JQuery
 Cours suivant:
Les événements jQuery    cours suivant
Par gerywa 25 juillet 2014