Contenu principal
Cours : Apprendre à coder > Chapitre 7
Leçon 2: Accès au DOM avec jQuery- Trouver des éléments avec jQuery
- Défi : licorner une page avec jQuery
- Déboguer des pages Web avec la console du navigateur
- Obtenir des informations sur les éléments avec jQuery
- Défi : des découvertes célèbres
- Résumé : Accès au DOM avec jQuery
- Projet : le détective du DOM
- Parenthèses historiques : comment John a construit jQuery ?
Projet : le détective du DOM
Le site Web Khan Academy importe jQuery, donc vous pouvez en fait ouvrir, dès maintenant, votre console JavaScript et exécuter cette ligne de code afin de montrer le contenu textuel de tous les éléments
<h1> de la page :$("h1").text();Vous voulez savoir combien il y a d'éléments
<h1> ? Exécutez cette ligne de code :$("h1").length;Maintenant, essayez d'utiliser des sélecteurs CSS pour trouver plus d'éléments, dans cette page Khan Academy, comme :
- Tous les liens.
- Cet article.
- Toutes les images.
- La barre latérale de navigation.
- Votre nom dans le coin en haut à droite.
- Le pied de page.
- ...continuez !
Nous vous invitons à partager vos sélecteurs dans les discussions ci-dessous, mais gardez à l'esprit que notre HTML est constamment modifié, donc les sélecteurs qui fonctionnaient pourraient ne plus être à jour. Il y a souvent plusieurs sélecteurs CSS différents qui peuvent trouver le même élément. Il reste encore donc beaucoup de bonnes réponses.
Coiffez maintenant votre tête avec un chapeau de détective et commencez à enquêter sur notre DOM !
Vous souhaitez rejoindre la discussion ?
$("a").length; ===> 150
$("li").length; ===> 116
$("img");
$("span._wozql4");(1 vote)- $("h1").text();
"Projet : le détective du DOM"
$("h1").length;
1
$("h2").length;
5
$("a").length;
83
$("footer").length;
1(1 vote) 
$("h1").text();
"Projet : le détective du DOM"
$("h1").length;
1
$("link").length;
22
$(".name").text();
""
$("#name").text();
""(1 vote)
'Projet : le détective du DOM'
$("h1").length;
1
$("link").length;
16
$("a").length;
67
$("img").length;
12
$("li").length;
81
$("footer").length;
0(1 vote)
$("a").length; ===> 150
$("li").length; ===> 116(1 vote)- $("a");
$("li");
$("img");
$("._qv4xttz");
$("span._wolzql4");
$("#_172kndo");(1 vote)