Syntaxe jQuery

Avec jQuery, vous pouvez sélectionner (rechercher, query) des éléments HTML et leur exécuter des "opérations" (actions).

Exemple de syntaxe jQuery

$(this).hide()
Démonstration de la fonction hide() de jQuery, cache l'élément HTML courant
$("#test").hide()
Démonstration de la fonction hide() de jQuery, cache l'élément avec l'id="test"
$("p").hide()
Démonstration de la fonction hide() de jQuery, cache tous les éléments <p>
$(".test").hide()
Démonstration de la fonction hide() de jQuery, cache tous les éléments avec la classe="test"

Syntaxe jQuery

La syntaxe de jQuery est conçue pour sélectionner des éléments HTML et exécuter des opérations sur eux.

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

  • Le symbole dollar définit jQuery
  • Les sélecteurs (selectors) "recherche" et "trouvé" des éléments HTML
  • L'action() de jQuery exécute des opérations sur les éléments

Exemple

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

$("p").hide() - Cache tous les paragraphes

$(".test").hide() - Cache tous les éléments avec la classe="test"

$("#test").hide() - Cache tous les éléments avec l'id="test"

Astuce :La syntaxe utilisée par jQuery est une combinaison de la syntaxe XPath et des sélecteurs CSS. Dans les prochaines sections de ce tutoriel, vous apprendrez davantage sur la syntaxe des sélecteurs.

Fonction de document prêt

Vous avez peut-être remarqué que dans notre exemple, toutes les fonctions jQuery sont situées dans une fonction document ready :

$(document).ready(function(){
  // Les fonctions jQuery sont ici
});

C'est pour éviter que le code jQuery ne s'exécute avant que le document ne soit complètement chargé (prêt).

Si la fonction est exécutée avant que le document ne soit complètement chargé, l'opération peut échouer. Voici deux exemples spécifiques :

  • Tenter de cacher un élément inexistant
  • Obtenir la taille de l'image non complètement chargée