Retour
JQuery: Introduction
Ce premier cours de la série sur JQuery permet de découvrir les bases de cette librairie JavaScript largement utilisée dans le développement web.
Nous allons voire en quoi consiste la libraire et comment l'integrer dans un projet.
0
Prérequis
Pour suivre cette serie d'inititaion, vous devez avoir une expérience pratique avec HTML et CSS et une compréhension de base du langage JavaScript.
- Initiation à HTML.
- Initiation à CSS.
- Initiation au language Javascript.
Objectifs
À la fin de ce chapitre, vous serez en mesure de :
- Comprendre les fondamentaux de JQuery.
- Savoir comment intégrer JQuery dans une page web
- Comprendre l'importance de JQuery pour simplifier la programmation web
Structure du projet
Vous pouvez récuperer le projet de départ sur GitHub:
git clone https://github.com/Djemai-Samy/1.jquery-initiation
Ou récupérer le projet de départ sur GitLab:
git clone https://gitlab.com/tutoriels-dev/1.web/3.javascript/jquery/1.jquery-initiation/-/tree/1-introduction
1.jquery-intiation
┣ 📜index.js
┣ 📜index.css
┗ 📜index.html
JQuery c'est quoi?
JQuery est une librairie JavaScript qui permet de simplifier la manipulation du Document Object Model (DOM) d'une page web.
Elle a été créée en 2006 par John Resig et a rapidement gagné en popularité grâce à sa simplicité et son efficacité.
Aujourd'hui, elle est utilisée par de nombreux développeurs web pour créer des sites web dynamiques et interactifs.
L'utilisation de JQuery présente de nombreux avantages pour les développeurs web.
Tout d'abord, elle permet de simplifier la manipulation du DOM en fournissant des fonctions prêtes à l'emploi.
Cela permet de gagner du temps et d'augmenter l'efficacité dans la programmation.
De plus, JQuery est compatible avec la plupart des navigateurs web, ce qui facilite la création de sites web multiplateformes.
Enfin, elle permet de réduire la quantité de code nécessaire pour effectuer des tâches courantes, ce qui rend le développement plus rapide et plus facile.
Comment intégrer JQuery
Il existe plusieurs façons d'intégrer JQuery dans une page web.
Utiliser un CDN
La méthode la plus courante consiste à utiliser un Content Delivery Network (CDN) pour charger la librairie JQuery à partir d'un serveur externe.
Cela permet de réduire le temps de chargement de la page et d'augmenter la vitesse de navigation.
Une fois la version choisie, vous pouvez cliquer sur minified, pour récuperer le code à coller dans votre poge web:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CDN de JQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.slim.min.js" integrity="sha256-a2yjHM4jnF9f54xUQakjZGaqYs/V1CYvWpoqZzC2/Bw=" crossorigin="anonymous"></script>
<!-- Votre script -->
<script src="./index.js" defer></script>
<title>JQuery: Introduction</title>
</head>
<body>
<h1>JQuery: Introduction</h1>
<p>
Ce premier cours de la série sur JQuery permet de découvrir les bases de cette librairie JavaScript largement utilisée dans le développement web.
</p>
<p>
Nous allons voire en quoi consiste la libraire et comment l'integrer dans un projet.
</p>
</body>
</html>
Télecharger la librairie
Il est également possible de télécharger la librairie JQuery et de l'héberger sur son propre serveur.
Cette méthode est particulièrement utile si l'on souhaite personnaliser la librairie ou si l'on n'a pas accès à un CDN.
Une fois la version choisie est téléchargée, vous pouvez ajouter le script dans vos pages html.
Premier exemple
Pour comprendre comment fonctionne JQuery, il est important de comprendre le concept de Document Object Model (DOM).
Le DOM est une représentation hiérarchique de la structure d'une page web, qui permet d'accéder et de manipuler les éléments HTML.
Pour manipuler le DOM avec JQuery, on utilise des sélecteurs qui permettent de sélectionner des éléments HTML spécifiques.
Par exemple, pour sélectionner tous les paragraphes de la page web, on utilise le sélecteur $("p").
// Sélectionner tous les p du DOM
let listeP = $('p');
Conclusion
Dans ce premier cours, nous avons vu les bases de JQuery, son utilisation, son fonctionnement et comment l'intégrer dans une page web.
Nous avons également vu les avantages de l'utilisation de JQuery, notamment la simplification de la manipulation du DOM, le gain de temps et d'efficacité dans la programmation, ainsi que la compatibilité avec plusieurs navigateurs.
Nous avons terminé ce cours en montrant un exemple simple de manipulation du DOM avec JQuery, en sélectionnant des élément HTML.
Dans le prochain cours, nous approfondirons la manipulation du DOM avec JQuery en apprenant à ajouter et supprimer des éléments, modifier les attributs et bien plus encore.
Nous vous invitons à explorer les ressources utiles pour continuer à apprendre JQuery nottamment, la documentation officielle de JQuery .
Aller plus loin
Commentaires
JQuery: Les animations
Dans ce cours, vous apprendrez à ajouter des animations et des effets à vos pages web en utilisant les fonctions prêtes à l'emploi de JQuery.
Vous découvrirez les fonctions de base d'animation de JQuery, comme fadeIn, fadeOut, slideUp et slideDown, ainsi que les effets d'animation avancés.
Web
Front
Javascript
JQuery
DOM
Animation
