Résumé : Accès au DOM avec jQuery

Pour trouver des éléments du DOM avec jQuery, passez un sélecteur CSS valide dans la fonction jQuery :

$("h1"); // sélectionne toutes les balises <h1>
$("#titre"); // sélectionne l'élément possédant l'ID "titre"
$(".attention"); // sélectionne tous les éléments possédant le nom de classe "attention"

Remarquez que la fonction jQuery peut être nommée $, ou jQuery, c'est la même chose :

jQuery("h1"); 
jQuery("#titre"); 
jQuery(".attention");

La plupart des gens préfère $ car c'est plus court.

La fonction jQuery retournera toujours une collection jQuery correspondant aux éléments, même s'il n'y a qu'un seul élément correspondant (ou aucun !). Vous pouvez en lire plus sur la fonction jQuery dans sa documentation.

Une fois que vous avez trouvé les éléments du DOM avec jQuery, vous pouvez faire des choses, comme définir leur contenu avec text() : $("#temperature").text("89° Fahrenheit"); (Voir l'exemple complet)

Vous pouvez utiliser la même méthode text() pour obtenir le contenu, en ne passant aucun paramètre :
var titre = $("#titre").text();

Dans le prochain module, vous allez découvrir beaucoup plus de méthodes qui permettent d'obtenir ou de définir des propriétés d'éléments du DOM.

En tâches de fond, ces fonction jQuery utilisent toutes l'API DOM que nous avons enseignée dans le cours HTML/JS. Par exemple, la fonction $ utilise des méthodes comme getElementById() et querySelectorAll(), et attr() utilise la méthode getAttribute(). Quand vous utilisez la fonction $, vous pouvez utiliser ces méthodes avec moins de lignes de code, et aussi savoir que votre code fonctionnera dans tous les navigateurs supportés par jQuery, ce qui est particulièrement important quand on utilise les fonctions les plus récentes de l'API DOM.

Vous souhaitez rejoindre la discussion ?

Connectez-vous

Trier par :

Pas encore de posts.

Vous comprenez l'anglais ? Cliquez ici pour participer à d'autres discussions sur Khan Academy en anglais.