<-

Retour

JQuery: Introduction

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

Partager sur twitterPartager sur FacebookPartager sur LinkdinPartager sur Telegram

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.


  1. Initiation à HTML.

  1. Initiation à CSS.

  1. Initiation au language Javascript.

Objectifs

À la fin de ce chapitre, vous serez en mesure de :


  1. Comprendre les fondamentaux de JQuery.
  2. Savoir comment intégrer JQuery dans une page web
  3. 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

IsLoading