jQuery & WordPress – Le DOM et les sélecteurs

Je retrouve souvent plusieurs personnes appliquant certains de mes tutos me posant les mêmes questions ou me soumettant les mêmes problèmes d’intégration. En général, les soucis sont dû à une compréhension erronée des manipulations du DOM ou de la manière dont agit le JavaScript sur votre code.

Aujourd’hui, je vous fais un petit tuto pour tous ceux qui veulent toucher à jQuery sans nécessairement comprendre tout JavaScript.

C’est pour cela que nous allons (re)voir ce qu’est le DOM ainsi que les sélecteurs utilisés dans jQuery.

Coté client

Comme JavaScript, jQuery est un langage qui s’exécute coté client.

Vous l’avez certainement déjà entendu sans vraiment comprendre ce que cela entraine par rapport à votre code. En gros, le JavaScript modifie le résultat envoyé par le serveur sur votre navigateur.

Donc le JavaScript ne modifiera jamais du code PHP. De rares interactions unilatérales avec le serveur pourront être effectuées mais via une interface spéciale – en Ajax par exemple en utilisant JSON.

Document Object Model

Le JavaScript parcourt une page web en respectant une hiérarchie très simple que l’on nomme le DOM. Lorsque vous créez votre thème WordPress, ou même un site sans CMS, essayez de cartographier votre site Web.

Schéma - Exemple DOM
Schéma – Exemple DOM

 

 

Le but de cette manœuvre est d’organiser votre travail, ces croquis sont la clé de la réussite. Ils vous permettront de vous faire une idée de l’architecture de votre page.

Le DOM fonctionne un peu à la manière d’un arbre généalogique, on parlera d’éléments enfants et parents.

Par exemple dans une liste : <ul> est parent de <li> et tout les <li> de cette <ul> sont frères. Pour voyager dans cet arbre nous utiliserons des sélecteurs.

Les sélecteurs

Voici le secret de jQuery. En effet, cette librairie tire tout son intérêt de ses sélecteurs.

Ceux-ci sont simples à comprendre si vous manipulez aisément le langage CSS. Pour sélectionner une ID en css, vous utiliserez un dièse et pour une classe, un point.

La même chose est applicable avec jQuery :

  • jQuery(‘#id’)
  • jQuery(‘.class’)

N.B : lorsque vous utilisez un méta-caractère pour votre nom de classe ou d’ID, ce caractère doit être échappé par un double backslash (\\). Voici les caractères devant être échappé ; ! »#$%&'()*+,./:;<=>?@[\]^`{|}~

A cela, vous pouvez ajouter des opérateurs utilisés dans le CSS dont voici une liste :

  • Le sélecteur « * » permet de sélectionner tous les éléments. Utile pour compter tout les éléments d’une page web.
    Syntaxe : jquery(‘*’)
  • Le sélecteur « > » sélectionne tous les éléments directement enfant du ou des éléments parents spécifiés.
    Syntaxe : jQuery(‘parent > enfant’)
  • Le sélecteur « + » sélectionne l’élément adjacent suivant l’élément précédent (du même élément parent).
    Syntaxe : jQuery(‘precedent + suivant’)
  • Le sélecteur « ~ » sélectionne tous les éléments adjacents suivant l’élément précédent (du même parent).
    Syntaxe : jQuery(‘precedent ~ suivants’)

Ensuite, si vous voulez encore affiner votre sélection, vous pouvez également utiliser les pseudo-classes. Également basé sur le CSS :

  • :button
  • :checkbox
  • :checked
  • :contains()
  • :disabled
  • :empty
  • :enabled
  • :eq()
  • :even
  • :file
  • :first-child
  • :first
  • :focus
  • :gt()
  • :has()
  • :header
  • :hidden
  • :image
  • :input
  • :last-child
  • :last
  • :it()
  • :not()
  • :nth-child()
  • : odd
  • : only-child
  • :parent
  • :password
  • :radio
  • :reset
  • :selected
  • :submit
  • :text
  • :visible

Je vous renvoie vers votre cours CSS pour comprendre toutes ces pseudo-classes…

Après tout ceci, il reste les attributs agissant directement sur le nom du sélecteur :

[nom|=’valeur’]

Sélectionne les éléments dont nom est égal à ou commence par valeur.

On nomme ce sélecteur : sélecteur de préfixe.

[nom*=’valeur’]

Sélectionne les éléments dont nom est égale à ou contient en entier valeur.

[nom~=’valeur’]

Sélectionne les éléments dont nom est égale à ou contient le mot valeur.

N.B : Si on utilise comme classe « mot-sousclasse », et que l’on veut tout les éléments dont la classe contient « mot », nous utiliseront stricto-sensu le sélecteur de contenu. Car ce sélecteur ne conviendra pas.

[nom$=’valeur’]

Sélectionne les éléments dont nom est égale à ou commence par valeur.

[nom=’valeur’]

Sélectionne les éléments dont nom est strictement égale à valeur.

On nomme ce sélecteur : sélecteur d’égalité.

[nom!=’valeur’]

Sélectionne les éléments dont nom est strictement différent de valeur.

On nomme ce sélecteur : sélecteur d’inégalité ou d’opposition.

[nom^=’valeur’]

Sélectionne les éléments dont nom commence par valeur.

N.B : Si on utilise comme classe « mot-sousclasse », et que l’on veut tout les éléments dont la classe commence par « mot », nous n’utiliseront pas ce sélecteur de contenu. Car ce sélecteur ne conviendra pas.

Vous voila prêt à vous enfoncer dans cette matière qu’est jQuery. J’espère vous avoir éclairé sur les méthodes utilisées pour voyager à travers le DOM. Sinon, je serai ravi de répondre à vos questions.

7 commentaires

  1. Daniel

    Très bon article qui reprendre tout ce que doit savoir un développeur pour maîtriser et s’amuser avec Jquery.

    Par contre, je ne vois pas trop le rapport avec WordPress comme indiqué dans le titre de la publication…

    1. Aurélien Denis

      Oui good job de la part de Christopher !

      Pour le titre, c’est moi à la relecture qui l’ait ajouté pour coller avec le reste de la série sur jQuery… mais après coup je me suis rendu compte qu’il n’y avait pas vraiment de lien.

    2. Cybercraft auteur de l’article

      Ah oui, j’avais pas vu la modification du titre… Le but de cette article est plutôt pour vocation d’addendum que de tutoriel comme a l’habitué. Il est une sorte d’intro à la compréhension de jQuery.

Laisser un commentaire