Premiers pas avec jQuery
Premiers pas avec jQuery
Premiers pas avec jQuery est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 1. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage jQuery Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours jQuery Academy comprend 1 leçons au total.
Introduction
Bonjour,
Pour utiliser la bibliothèque jQuery, nous devons d'abord l'ajouter au document HTML.
Dans l'exemple ci-dessous, l'adresse de la bibliothèque jQuery a été ajoutée comme valeur de l'attribut src entre les balises head.
La bibliothèque jQuery est maintenant prête à être utilisée dans notre projet.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
</head>
<body>
</body>
</html>Sélection avec jQuery
Pour effectuer des opérations sur les éléments HTML (que nous appellerons désormais le DOM), nous devons d'abord sélectionner l'élément.
Dans jQuery, la méthode $() ou jQuery() permet d'effectuer une sélection.
La méthode $() est la plus utilisée par les développeurs.
Le paramètre que nous transmettrons à cette méthode détermine l'élément que nous souhaitons sélectionner.
XPath
L'expression que nous transmettons à la méthode $ est le sélecteur XPath, que nous connaissons également grâce à CSS.
En d'autres termes, nous sélectionnons les éléments HTML dans jQuery de la même manière qu'en CSS.
Exemples XPath
Supposons que notre code HTML soit le suivant.
<div id="my-box" class="my-box">
<p class="my-p">
<span class="my-text">Hello jQuery</span>
</p>
</div>
Sélectionnons des éléments HTML à l'aide de jQuery
// Dummy $ to demonstrate jQuery selectors in Node.js
function $(selector) {
console.log("Selector:", selector);
return [];
}
// Selects the element with the id of my-box.
$('#my-box')
// Selects the element with the my-box class.
$('.my-box')
// Selects all p elements that are descendants of the element with my-box id
$('#my-box p')
// Select the element with the .my-p class that is the child of the element with my-box class.
$('.my-box > .my-p')jQuery nous permet d'écrire un code plus concis
Si nous voulions faire la même chose avec JavaScript Vanilla (pur), nous devrions écrire davantage de lignes de code.
jQuery nous permet d'écrire un code plus concis grâce à ses propres méthodes.
Avertissement
jQuery est simplement une bibliothèque qui facilite le développement web par rapport à JavaScript Vanilla.
Informations
Un autre avantage de jQuery est que tous les navigateurs modernes prennent en charge le code que nous écrivons.
Certains codes que nous écrivons avec VanillaJS peuvent entraîner des effets secondaires dans certains navigateurs, tandis que jQuery garantit un comportement identique dans chaque navigateur grâce à l'abstraction qu'elle fournit.
jQuery nous évite de devoir tenir compte des spécificités de chaque navigateur lorsque nous écrivons du code.
$(document).ready
Avant d'aborder les bases de jQuery, apprenons à utiliser la méthode $(document).ready.
Comme nous nous en souvenons avec HTML, nous avons indiqué que les scripts JavaScript pouvaient être placés n'importe où entre la balise head ou entre les balises body en HTML.
$(document).ready 2
Supposons que nous disposions d'un code HTML semblable à celui ci-dessous.
Notre navigateur interprétera notre code depuis la balise <!DOCTYPE html> jusqu'à la balise de fermeture </html>.
L'instruction <script src = "https://code.jquery.com/jquery-3.5.1.slim.js"> </script> lancera le téléchargement de la bibliothèque via code.jquery.com.
À la ligne suivante, la méthode $ de jQuery sélectionne le DOM. Cependant, cela pose un problème. Si le document HTML n'est pas entièrement chargé au moment de l'appel de la méthode $ ('# test'), notre code JS échouera.
Dans ce cas, la méthode $(document).ready permet de s'assurer que le document est entièrement chargé.
<div id="test">Hello Coddy</div>
<script>
$('#test').text('Hello Coddy')
</script>
$(document).ready 3
Après la définition ci-dessus,
Il nous suffit d'utiliser la méthode $(document).ready(). Cette méthode attendra que tout le contenu soit chargé, puis elle s'exécutera.
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div id="test">Hello Coddy</div>
<script>
$(document).ready(function(){
$('#test').text('Hello Coddy')
})
</script>
</body>
</html>Question
Allez, répondez à la question !
Félicitations
Félicitations 🎉
Dans cette section, nous avons commencé à découvrir la bibliothèque jQuery ainsi que sa méthode $(document).ready().
Dans la prochaine section, nous apprendrons les sélecteurs de jQuery.
Questions Fréquemment Posées
La leçon « Premiers pas avec jQuery » est-elle gratuite ?
Oui — le texte complet de « Premiers pas avec jQuery » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours jQuery Academy, passe à CoddyKit PRO. Le cours jQuery Academy comprend 1 leçons au total.
Qu'est-ce que j'apprendrai dans « Premiers pas avec jQuery » ?
Premiers pas avec jQuery Tu pratiques jQuery Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer jQuery Academy ?
Aucune expérience préalable n'est requise. jQuery Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 1.
Combien de temps prend la leçon « Premiers pas avec jQuery » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon jQuery Academy ?
Oui. Chaque leçon jQuery Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.