Catégories
jQuery

jQuery tutoriel 2 – les sélecteurs

jQuery permets d’interagir avec les éléments de notre page HTML (cacher, ajouter une classe, modifier le texte…) en suivant le process suivant:

  1. sélectionner un ou plusieurs éléments de la page (la balise HTML, classe CSS, ou encore la balise contenant un attribut donné) grâce à un sélecteur (syntaxe de sélection de CSS)
  2. appliquer une méthode sur cet (ou ces) éléments (par exemple changer le style que l’on y applique)

Syntaxe jQuery:

pour sélectionner un  élément de la page il suffit simplement d’écrire dans notre portion de script Javascript:

jQuery(‘selecteur’)

ou de façon plus compacte (ce qu’on utilise le plus fréquement):

$(‘selecteur’)

le $ est un raccourci pour la fonction jQuery

ex: $(‘p’)  va nous permettre de sélectionner toutes les balises <p> de notre page

Éléments pouvant être sélectionnés grâce aux sélecteurs jQuery:

  • les balises HTML
  • les classes CSS
  • sélectionner un noeud du DOM grace à un attributs de balise (voir ci-dessous)

sélectionner des balises HTML:

sélection de toutes les balises <h1> d’une page:
$(‘h1’) exemple trivial

sélection de plusieurs éléments simultanément:
$(‘h1, a, div’) permet de sélectionner toutes les balises <h1>, <a> et <div> de notre page

$(‘h3 div‘) retourne tous les <div>inclus dans un <h3> (attention ne sélectionne pas les <div>

 

sélectionner par ID:

lorsque vous souhaitez sélectionner un <div id= »toto »> et non pas tous les <div> de votre page, il est possible d’utiliser la syntaxe suivante:
$(‘#toto’)

sélectionner par classe CSS:

lorsque vous souhaitez sélectionner un ensemble d’éléments de la page ayant une classe CSS donnée, (pour par exemple appliquer une autre mise en forme):
$(‘.broozCssClass’) permettra de retourner tous les éléments comme
<div class= »broozCssClass »> ou encore <h2 class= »broozCssClass »>

sélectionner par attributs:

si nous cherchons à sélectionner les balises en fonctions de leurs attributs, jQuery nous mets à disposition la syntaxe à crochets $(‘balise[attribut]’)

par ex, $(‘a[href]’) va sélectionner tous les liens de notre page, c’est à dire les balises <a> contenant un attribut href, soit tous les <a href…>

de plus il est possible de spécifier la valeur de l’attribut comme par exemple:
$(‘img[alt= »icone »]’) va nous trouver toutes les balises du type:
<img style= »border:0 » src= »/img/icon3.gif » alt= »icone » />

attention la sélection par attribut est sensible à la casse (case sensitive), donc
$(‘img[alt= »icone »]’) est bien différent de $(‘img[alt= »IcoNe »]’)

pour approfondir les sélecteurs:

vous pouvez vous référer à la documentation officielle pour découvrir toutes les possibilités offertent par les sélecteurs jQuery.
Les sélecteur couverts par cet articles: Basic jQuery selectors