jQuery pour débutants
jQuery pour débutants
jQuery pour débutants 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,
Bienvenue dans le cours jQuery pour débutants .
Dans cette section, nous commencerons à étudier jQuery en détail.
Introduction 2
Avant de commencer ce cours,
il est nécessaire d'avoir suivi les cours suivants.
- Premiers pas avec HTML
- Premiers pas avec CSS
- Fondamentaux de JavaScript
- Si vous maîtrisez déjà ces sujets, vous pouvez poursuivre le cours.
Commençons
Commençons.
Tout d'abord, répondons à la question : à quoi sert jQuery ?
Révisons nos bases avant de répondre à la question
Avant de répondre à la question, révisons nos bases.
Le langage HTML est un langage de balisage. Il s'agit donc d'un langage de balisage de texte, et non d'un langage de programmation. Il est très éloigné de concepts tels que la programmation orientée objet. En d'autres termes, sa structure ne contient pas d'objets : les éléments que nous connaissons sont les balises HTML, les attributs, etc.
JavaScript effectue des opérations sur le DOM
Nous devons souvent effectuer des opérations sur les éléments HTML des pages web. Pour cela, et afin de rendre les éléments HTML accessibles à JS, nous les représentons à l'aide d'un modèle appelé DOM (Document Object Model).
JavaScript effectue des opérations sur le DOM, qui constitue l'équivalent sous forme d'objets de la page web. Nous appelons cela la manipulation du DOM.
Exemple
Voici un exemple.
Nous avons un élément bouton comme dans l'exemple ci-dessous, contenant le texte 'Non cliqué' . Lorsque nous cliquerons sur le bouton, nous remplacerons son texte par 'Cliqué'.
Pour y parvenir, nous devons effectuer une manipulation du DOM avec le langage JavaScript.
Dans notre cours d'introduction à JavaScript, nous avons appris à gérer un document web avec JavaScript. jQuery est une bibliothèque qui nous permet d'effectuer des manipulations du DOM de manière plus concise et plus simple qu'avec JavaScript.
<!--Initial Element -->
<button id="my-button">Not Clicked</button>
<!---Desired Element after clicking the button-->
<button id="my-button">Clicked</button>Question
Une question pour vous !
Exemple 2
Dans l'exemple ci-dessous, nous avons défini un bouton dont l'identifiant est my-button.
Accédons maintenant à cet élément avec JavaScript via le DOM.
Lorsque nous cliquerons sur le bouton, nous accéderons au DOM avec le code JS et modifierons la propriété innerHTML de l'élément dont l'identifiant est my-button pour lui attribuer la valeur click.
<button id="my-button">
Not Clicked
</button>
<script>
let myButton = document.getElementById('my-button');
myButton.addEventListener("click",
function(){
myButton.innerHTML = "Clicked"
})
</script>Avertissement
jQuery n'est rien d'autre qu'une bibliothèque créée pour simplifier l'utilisation des fonctions et des méthodes de JS Core.
En d'autres termes, elle nous permet d'effectuer plus facilement, avec une syntaxe plus simple et plus lisible, de nombreuses opérations réalisables avec VanillaJS.
Explication de l'exemple
Expliquons le code.
let myButton = document.getElementById('my-button');
Nous affectons l'objet document de JavaScript à la variable nommée myButton à l'aide de la méthode getElementById.
myButton.addEventListener("click", function(){
myButton.innerHTML = "Clicked"
})
Ensuite, nous avons à la fois écouté l'événement click du bouton et modifié le bouton.
Nous avons effectué une manipulation du DOM en utilisant les fonctionnalités principales du langage sans utiliser de bibliothèque ni de framework, une approche appelée native ou vanilla.
Écrivons le même code avec jQuery et profitons des fonctionnalités proposées par la bibliothèque jQuery.
Avertissement
Le concept, désigné sous le nom de VanillaJS à de nombreux endroits, correspond en réalité uniquement aux objets, méthodes et fonctions JavaScript natifs, ainsi qu’à l’utilisation des fonctionnalités proposées par le navigateur.
Exemple avec jQuery
Vous trouverez ci-dessous notre exemple précédent réalisé avec jQuery.
Veillez simplement à ne pas trop raccourcir le code en négligeant la syntaxe.
<script>
$('#my-button').on('click', function(){
$(this).text('Clicked');
})
</script>
<button id="my-button">Not Clicked</button>Félicitations
Félicitations 🎉
Dans cette section, nous avons commencé à apprendre jQuery et compris à quel point jQuery peut nous simplifier la vie.
Rendez-vous dans la prochaine section !
Questions Fréquemment Posées
La leçon « jQuery pour débutants » est-elle gratuite ?
Oui — le texte complet de « jQuery pour débutants » 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 « jQuery pour débutants » ?
jQuery pour débutants 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 « jQuery pour débutants » ?
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.