Développeur FullStack & Devops

Notes et mémos techniques

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

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

d'une page: $('h1') exemple trivial

sélection de plusieurs éléments simultanément: $('h1, a, div') permet de sélectionner toutes les balises

, et
de notre page

$('h3 div') retourne tous les **

****inclus dans un**

(attention ne sélectionne pas les

sélectionner par ID:

lorsque vous souhaitez sélectionner un

et non pas tous les
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

debutant
javascript
jquery
programmation
tutoriel
rédigé le 12/05/12 par Behrouze

A proposCheat SheetsOutilsVidéos