Scribd
Importer
40 vues17 pages

Jquery

Le document introduit jQuery et ses principales fonctionnalités comme la sélection et la manipulation du DOM, la gestion des événements et l'animation. jQuery est une bibliothèque JavaScript qui simplifie ces tâches pour faciliter le développement web interactif.

Transféré par

younes benelhoms
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
40 vues17 pages

Jquery

Le document introduit jQuery et ses principales fonctionnalités comme la sélection et la manipulation du DOM, la gestion des événements et l'animation. jQuery est une bibliothèque JavaScript qui simplifie ces tâches pour faciliter le développement web interactif.

Transféré par

younes benelhoms
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 17

Introduction à

jQuery
Réalisé par : Encadré Par :
• Younes Benelhoms ELMahmoudi Abdelhak

• Mohamed-Nour Benazzeddine
PLAN :

01
Qu'est-ce que 02 03
jQuery? Sélecteurs jQuery Manipulation du DOM

04 05 06
Gestion des Animation avec
événements jQuery Exercice
01
Qu'est-ce que
jQuery?
Introduction

jQuery est une bibliothèque Le DOM est la représentation en


JavaScript extrêmement populaire qui arborescence de la structure d'un
a révolutionné le développement web. document HTML. Il permet d'accéder
Elle simplifie la manipulation du DOM et de manipuler les éléments HTML
(Document Object Model) et les d'une page web. Cependant, cela
interactions avec le HTML, offrant aux peut parfois être fastidieux et
développeurs des outils puissants complexe en JavaScript natif.
pour créer des sites web dynamiques
et interactifs.
Exemple :

Avec jQuery, vous pouvez facilement cibler et modifier des


éléments HTML.
Par exemple, vous pouvez utiliser $('p') pour sélectionner
tous les paragraphes du document et appliquer des
modifications à ces éléments de manière dynamique. Cela
simplifie considérablement le processus de création
d'interactions riches et de manipulation du contenu HTML
dans vos projets web.
02
Sélecteurs jQuery
Les sélecteurs jQuery
Les sélecteurs jQuery sont des expressions qui permettent de cibler et de sélectionner des
éléments HTML spécifiques dans le DOM (Document Object Model). Voici quelques exemples de
sélecteurs jQuery couramment utilisés :
• Sélecteur d'Élément : Permet de cibler des éléments HTML en fonction de leur balise. Par exemple, $('p')
sélectionne tous les éléments <p> de la page.

• Sélecteur de Classe : Cible les éléments ayant une classe CSS spécifique. Par exemple, $('.maClasse')
sélectionne tous les éléments avec la classe CSS "maClasse".

• Sélecteur d'ID : Cible un élément avec un ID spécifique. Par exemple, $('#monID') sélectionne l'élément
ayant l'ID "monID"
Sélecteur d'Attribut : Cible des éléments en fonction de leurs attributs. Par exemple, $('[href]') sélectionne
tous les éléments ayant un attribut "href".

Sélecteur de Relation : Permet de sélectionner des éléments en fonction de leur relation avec d'autres
éléments. Par exemple, $('p + p') sélectionne tous les paragraphes qui suivent immédiatement un autre
paragraphe.

Sélecteur Filtre : Filtre les éléments en fonction de certaines conditions. Par exemple, $('p:first') sélectionne
le premier paragraphe de la page.

Sélecteur de Contenu : Cible des éléments en fonction de leur contenu textuel. Par exemple,
$('p:contains("texte")') sélectionne tous les paragraphes contenant le mot "texte".

Sélecteur d'Enfant : Cible les éléments enfants d'un élément parent. Par exemple, $('ul > li') sélectionne
tous les éléments <li> qui sont des enfants directs d'une liste non ordonnée <ul>.
03
Manipulation du DOM
Manipulation du DOM
La manipulation du Document Object Model (DOM) est l'un des aspects les plus
puissants de jQuery. Cette bibliothèque simplifie la modification des éléments HTML, leur
ajout ou leur suppression, ce qui permet de créer des pages web dynamiques et
interactives.

Avec jQuery, la modification du contenu et de la structure de la page est simple, ce qui


permet de créer des sites web interactifs et réactifs. La manipulation du DOM est au
cœur de l'expérience utilisateur et ouvre la porte à d'innombrables possibilités de
personnalisation et d'interactivité.
EXEMPLES
Ajouter un paragraphe à la fin d'un élément div :

$('div').append('<p>Nouveau paragraphe</p>');

Modifier le texte d'un bouton :

$('button').text('Cliquez-moi !');

Supprimer tous les liens d'une liste non ordonnée ayant la classe "liens-inutiles" :

$('ul.liens-inutiles a').remove();
04
Gestion des événements avec
jQuery
Gestion des événements avec jQuery

L'une des caractéristiques les plus puissantes de jQuery réside dans sa capacité à
simplifier la gestion des événements sur une page web. Les événements sont des
actions déclenchées par l'utilisateur, comme les clics de souris, les survols de la souris,
les pressions de touche ou les soumissions de formulaires. jQuery rend la gestion de ces
événements plus accessible et efficace.

Exemples de gestion d'événements : Grâce à jQuery, vous pouvez créer des sites web
interactifs et réactifs. Par exemple, vous pouvez valider les formulaires en temps réel,
créer des menus déroulants animés au survol de la souris, ou encore afficher des pop-
ups informatifs en réponse aux clics de l'utilisateur. La gestion des événements améliore
considérablement l'interactivité et l'expérience utilisateur sur votre site web.
05
Animation avec jQuery
Animation avec jQuery

L'un des atouts majeurs de jQuery est sa capacité à simplifier la création d'animations sur
une page web. L'animation est un moyen efficace d'apporter de la vie à votre site et de
capter l'attention des visiteurs.
• Mouvements Fluides : jQuery permet de créer des animations fluides, telles que
le déplacement, la modification de la taille, la rotation, etc. Vous pouvez animer
n'importe quel élément HTML.
• Contrôle Temporel : Vous pouvez spécifier la durée de l'animation, ce qui vous
permet de contrôler la vitesse et la fluidité des transitions.
• Effets Prédéfinis : jQuery propose une gamme d'effets prédéfinis, comme fadeIn(),
fadeOut(), slideDown(), slideUp(), etc., pour simplifier la création d'animations
courantes
Exemple :
• Pour masquer un élément progressivement en 1 seconde :
( $('div').fadeOut(1000); )
06
Exercice
Exercice

Mettons en pratique ce que nous avons appris jusqu'à présent. Voici un exercice pour
renforcer vos compétences en jQuery.

Enoncé de l'exercice :

Créez une page web avec un bouton et un paragraphe. Lorsque vous cliquez sur le
bouton, le paragraphe doit disparaître, et lorsque vous recliquez sur le bouton, le
paragraphe doit réapparaître. Utilisez jQuery pour réaliser cette fonctionnalité.

Vous aimerez peut-être aussi