ISTA KHENIFRA Développement Digital

Programmation en Javascript
JQuery

Introduction à jQuery
Qu’est-ce que jQuery ?
jQuery est une bibliothèque JavaScript rapide, petite et riche en fonctionnalités. Elle rend les choses comme la
manipulation de documents HTML, la gestion d’événements, l’animation et l’interaction AJAX beaucoup plus
simples avec une API facile à utiliser qui fonctionne sur une multitude de navigateurs. Grâce à sa combinaison de
polyvalence et d’extensibilité, jQuery a changé la façon dont des millions de personnes écrivent JavaScript.

Pourquoi utiliser jQuery ?

ˆ Facilité d’utilisation : jQuery est très facile à utiliser et à apprendre.

ˆ Grande bibliothèque : jQuery fournit une grande bibliothèque de méthodes pour manipuler le DOM.

ˆ AJAX support : jQuery aide à développer des sites web AJAX.

ˆ Animation et effets : jQuery vient avec beaucoup de méthodes intégrées pour créer des effets d’animation.

ˆ Compatibilité cross-browser : jQuery est compatible avec tous les navigateurs modernes.

Comment intégrer jQuery ?

Pour utiliser jQuery, vous devez l’intégrer à votre projet web. Vous pouvez télécharger la bibliothèque jQuery depuis
le site officiel, ou vous pouvez l’inclure directement depuis un CDN.

<!-- Inclure jQuery depuis un CDN -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Les bases de jQuery

La syntaxe de jQuery
La syntaxe de jQuery est conçue pour faciliter la navigation dans le document, sélectionner les éléments du DOM,
créer des animations, gérer les événements, et développer des applications AJAX. La syntaxe de base de jQuery est
:

$(selector).action()

ˆ Le signe $ est une définition de jQuery.

ˆ Le sélecteur est utilisé pour ”trouver” (ou sélectionner) les éléments HTML.

ˆ L’action est une fonction jQuery à exécuter sur l’élément.

Réalisation : Omar OUGHZAL Page : 1 sur 4

 ISTA KHENIFRA Développement Digital

Document Ready Event

Pour éviter que les méthodes jQuery ne soient exécutées avant que le document ne soit entièrement chargé, vous
pouvez inclure les méthodes jQuery à l’intérieur d’un Document Ready Event.

$(document).ready(function(){
// insérer le code jQuery ici
});

Sélection d’éléments
jQuery offre une variété de méthodes pour obtenir et manipuler les éléments DOM et les attributs.

// Sélectionner tous les paragraphes

$("p")

// Sélectionner l'élément avec l'ID "myID"

$("#myID")

// Sélectionner tous les éléments avec la classe "myClass"

$(".myClass")

Événements et effets jQuery

Gestion des événements
jQuery offre une méthode simple pour attacher les gestionnaires d’événements aux éléments DOM. Voici quelques
exemples de méthodes pour gérer les événements :

// L'événement click
$("p").click(function(){
// actions à effectuer lors du clic sur un paragraphe
});

// L'événement double-click
$("p").dblclick(function(){
// actions à effectuer lors du double-clic sur un paragraphe
});

// L'événement mouseenter
$("p").mouseenter(function(){
// actions à effectuer lorsque la souris entre dans l'élément paragraphe
});

Effets jQuery
jQuery offre une variété de méthodes pour créer des animations et des effets. Voici quelques exemples d’effets que
vous pouvez créer avec jQuery :

// Effet hide
$("p").click(function(){
$(this).hide();
});

// Effet fadeOut

Réalisation : Omar OUGHZAL Page : 2 sur 4

 ISTA KHENIFRA Développement Digital

$("p").click(function(){
$(this).fadeOut();
});

// Effet slideUp
$("p").click(function(){
$(this).slideUp();
});

jQuery AJAX

AJAX signifie Asynchronous JavaScript And XML. En bref, il s’agit d’une technique pour accéder aux services web
et aux données du serveur sans rafraı̂chir la page entière.

AJAX avec jQuery

jQuery offre une série de méthodes pour travailler avec AJAX, simplifiant ainsi la tâche.

$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
}
});

Autres méthodes AJAX de jQuery

ˆ $.get() : récupère les données du serveur en utilisant une requête HTTP GET.

ˆ $.post() : envoie des données au serveur en utilisant une requête HTTP POST.

ˆ $.getJSON() : charge des données JSON depuis le serveur en utilisant une requête HTTP GET.

ˆ $.ajax() : exécute une requête AJAX asynchrone.

Liste des méthodes jQuery

ˆ $(’selector’) : Sélectionne des éléments en utilisant une syntaxe de sélecteur CSS.

ˆ $.each() : Une fonction générique d’itération, qui peut être utilisée pour parcourir à la fois les objets et les
tableaux.
ˆ $.extend() : Fusionne le contenu de deux ou plusieurs objets ensemble dans le premier objet.

Méthodes d’événements
ˆ .click() : Attache un gestionnaire d’événements au clic de l’élément sélectionné.

ˆ .dblclick() : Attache un gestionnaire d’événements au double clic de l’élément sélectionné.

ˆ .mouseenter() : Attache un gestionnaire d’événements lorsqu’un pointeur de souris entre dans l’élément
sélectionné.

Réalisation : Omar OUGHZAL Page : 3 sur 4

 ISTA KHENIFRA Développement Digital

ˆ .mouseleave() : Attache un gestionnaire d’événements lorsqu’un pointeur de souris quitte l’élément sélectionné.
ˆ .hover() : Attache deux gestionnaires d’événements qui seront exécutés lorsque le pointeur de la souris entre
et quitte l’élément sélectionné.

Méthodes d’effets
ˆ .hide() : Cache les éléments sélectionnés.
ˆ .show() : Affiche les éléments sélectionnés.
ˆ .toggle() : Alterne entre le masquage et l’affichage des éléments sélectionnés.
ˆ .fadeIn() : Affiche les éléments sélectionnés en les faisant passer progressivement de transparent à opaque.
ˆ .fadeOut() : Cache les éléments sélectionnés en les faisant passer progressivement d’opaque à transparent.
ˆ .fadeToggle() : Alterne entre l’effet .fadeIn() et .fadeOut() pour les éléments sélectionnés.
ˆ .slideUp() : Cache les éléments en les glissant vers le haut.
ˆ .slideDown() : Affiche les éléments en les glissant vers le bas.
ˆ .slideToggle() : Alterne entre .slideUp() et .slideDown() pour les éléments sélectionnés.

Méthodes AJAX
ˆ $.ajax() : Exécute une requête AJAX asynchrone.
ˆ $.get() : Charge des données depuis un serveur en utilisant une requête HTTP GET.
ˆ $.post() : Envoie des données à un serveur en utilisant une requête HTTP POST.
ˆ $.getJSON() : Charge des données JSON depuis un serveur en utilisant une requête HTTP GET.

Méthodes de manipulation du DOM

ˆ .text() : Récupère ou modifie le contenu textuel des éléments sélectionnés.
ˆ .html() : Récupère ou modifie le contenu HTML des éléments sélectionnés.
ˆ .val() : Récupère ou modifie la valeur de l’attribut value des éléments sélectionnés.
ˆ .attr() : Récupère ou modifie la valeur d’un attribut pour les éléments sélectionnés.
ˆ .removeAttr() : Supprime un attribut des éléments sélectionnés.
ˆ .addClass() : Ajoute une ou plusieurs classes aux éléments sélectionnés.
ˆ .removeClass() : Supprime une ou plusieurs classes des éléments sélectionnés.
ˆ .toggleClass() : Ajoute ou supprime une ou plusieurs classes des éléments sélectionnés.
ˆ .css() : Récupère ou modifie les valeurs de style CSS des éléments sélectionnés.
ˆ .append() : Insère du contenu à la fin des éléments sélectionnés.
ˆ .prepend() : Insère du contenu au début des éléments sélectionnés.
ˆ .after() : Insère du contenu après les éléments sélectionnés.
ˆ .before() : Insère du contenu avant les éléments sélectionnés.
ˆ .remove() : Supprime les éléments sélectionnés (et leur contenu enfant).
ˆ .empty() : Supprime le contenu enfant des éléments sélectionnés.

Réalisation : Omar OUGHZAL Page : 4 sur 4