Syntaxe jQuery


Avec jQuery, vous sélectionnez (interrogez) des éléments HTML et effectuez des "actions" sur eux.


Syntaxe jQuery

La syntaxe jQuery est conçue sur mesure pour sélectionner des éléments HTML et effectuer une action sur le ou les éléments.

La syntaxe de base est : $( selector ). geste ()

  • Un signe $ pour définir/accéder à jQuery
  • Un ( sélecteur ) pour "interroger (ou rechercher)" des éléments HTML
  • Une action jQuery () à effectuer sur le ou les élément(s)

Exemples:

$(this).hide()- masque l'élément courant.

$("p").hide()- cache tous les éléments <p>.

$(".test").hide()- cache tous les éléments avec class="test".

$("#test").hide()- cache l'élément avec id="test".

Connaissez-vous les sélecteurs CSS ?

jQuery utilise la syntaxe CSS pour sélectionner des éléments. Vous en apprendrez plus sur la syntaxe du sélecteur dans le prochain chapitre de ce didacticiel.

Astuce : Si vous ne connaissez pas CSS, vous pouvez lire notre Tutoriel CSS .


L'événement Document prêt

Vous avez peut-être remarqué que toutes les méthodes jQuery de nos exemples se trouvent dans un événement document prêt :

$(document).ready(function(){

  // jQuery methods go here...

});

Ceci afin d'empêcher tout code jQuery de s'exécuter avant que le document n'ait fini de se charger (est prêt).

Il est recommandé d'attendre que le document soit complètement chargé et prêt avant de travailler dessus. Cela vous permet également d'avoir votre code JavaScript avant le corps de votre document, dans la section head.

Voici quelques exemples d'actions qui peuvent échouer si les méthodes sont exécutées avant que le document ne soit entièrement chargé :

  • Essayer de masquer un élément qui n'est pas encore créé
  • Essayer d'obtenir la taille d'une image qui n'est pas encore chargée

Astuce : L'équipe jQuery a également créé une méthode encore plus courte pour l'événement document ready :

$(function(){

  // jQuery methods go here...

});

Utilisez la syntaxe que vous préférez. Nous pensons que l'événement document prêt est plus facile à comprendre lors de la lecture du code.