Retour
JQuery: Manipulation DOM
Dans ce cours, nous allons approfondir l'utilisation de JQuery pour manipuler le DOM de notre page web.
Nous allons découvrir comment utiliser les fonctions prêtes à l'emploi de JQuery pour modifier le contenu HTML, ajouter des éléments, modifier les attributs, supprimer des éléments...
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 le fonctionnement du DOM et son importance dans la création de pages web dynamiques.
- Sélectionner des éléments spécifiques du DOM à l'aide de sélecteurs CSS.
- modifier le contenu HTML d'un élément en utilisant JQuery.
- Ajouter et de supprimer des éléments HTML à l'aide de JQuery.
- Modifier les styles CSS d'un élément à l'aide de JQuery.
- Créer des éléments dynamiques à l'aide de JQuery.
- Afficher et de masquer des éléments HTML à l'aide de JQuery.
Structure du projet
Vous pouvez récuperer le projet le départ sur GitHub:
git clone https://github.com/Djemai-Samy/1.jquery-initiation/tree/1-introduction
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
Pour illustrer nos exemples, nous allons ajouter des éléments à notre page HTML:
<!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>
<!-- Votre style -->
<link rel="stylesheet" href="./index.css">
<title>JQuery: Introduction</title>
</head>
<body>
<h1>JQuery: Initiation</h1>
<strong class="lead">
Cette série de cours vise à montrer comment utiliser la librairie JQuery avec le langage JavaScript pour développer des applications web interactives et dynamiques.
</strong>
<p>
Les cours couvriront les concepts clés de JQuery, notamment la manipulation du DOM, la gestion des événements, les animations et les effets.
</p>
<a id="lienSite" href="#">Texte de départ</a>
<section>
<h2>Jquery: Introduction</h2>
<p class="lead">
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>
</section>
<section id="active">
</section>
<section id="aSupprimer">
<h2>Une section a supprimer en JQuery</h2>
<p class="lead">
Pour supprimer un élément, vous pouvez utiliser la méthode `remove()` sur les éléments séléctionner
</p>
</section>
</body>
</html>
1. Sélection d'éléments avec JQuery
Les sélecteurs CSS sont des motifs utilisés pour sélectionner des éléments spécifiques dans un document HTML.
Les sélecteurs CSS sont utilisés avec la fonction JQuery $("selecteur") pour sélectionner des éléments du DOM.
1. Sélection d'éléments par balise
Pour sélectionner tous les éléments par balise:
const tousLesElements = $('element')
par exemple, pour sélectionner tous les éléments p du document HTML:
const tousLesP = $('p')
2. Sélection d'éléments par classe
Pour sélectionner tous les éléments possédant la classe maClasse du document HTML, il faut précéder le nom de la classe par un .:
const tousLesElementAvecClasse = $('.maClasse')
Par exemple, pour sélectionner tous les éléments possédant la class lead dans notre document HTML, nous pouvons utiliser cette instruction:
const tousLesElementAvecLead = $('.lead')
3. Sélection d'éléments par identifiant
Pour sélectionner tous les éléments possédant l'identifiant monIdentifiant du document HTML, il faut précéder le nom de l'identifiant par un #:
const tousLesElementAvecID = $('#monIdentifiant')
Par exemple, pour sélectionner tous les éléments possédant l'identifiant active dans notre document HTML, nous pouvons utiliser cette instruction:
const tousLesActive = $('#active')
4. Sélection Combinée
Les sélecteurs CSS sont très flexible, et nous permettent par exemple de combiner plusieurs selecteurs.
Par exemple pour séléctionner seulement les p possédant la classe lead, nous pouvons utiliser cette insctruction:
const tousLesPAvecLead = $('p.lead')
2. Modifier des éléments avec JQuery
Avec JQuery vous pouvez modifier toutes les données des éléments HTML. Voici les plus utilisés:
1. Mofication du contenu texte
Afin de modifier le contenu texte d'un élément HTML, vous pouvez le selectionner, puis utliser la méthode chainée .text():
$('element').text('Nouveau texte!')
Il important de noter que le nouveau texte! sera attribué a tous les éléments selectionnés.
par exemple, pour modifier le contenu texte du p possédant l'identifiant lienSite:
$('#lienSite').text('Liens de la serie de cours')
2. Mofication du contenu HTML
Vous pouvez modifier ou ajouter du contenu HTML à un élément en utilisant la méthode chainée .html():
$('element').html('<p>Element HTML ajouté</p>')
par exemple, pour modifier le contenu HTML de la section possédant l'identifiant active:
$('#active').html(`
<h2>JQuery: Maniplulation DOM</h2>
<p class="lead">
Dans ce cours, nous allons approfondir l'utilisation de JQuery pour manipuler le DOM de notre page web.
</p>
<p>
Nous allons découvrir comment utiliser les fonctions prêtes à l'emploi de JQuery pour modifier le contenu HTML, ajouter des éléments, modifier les attributs, supprimer des éléments...
</p>
`)
3. Mofication des attributs
Vous pouvez modifier ou ajouter des attributs aux éléments HTML en utilisant la méthode chainée .attr(attribut, value). Cette méthode prend deux paramètre:
attribut: Le nom de l'attribut à ajouter ou modifier sous forme de chaine de caractères.value: La valeur à donner à l'attributs sous forme de chaine de caractères.
$('element').attr(attribut, value);
par exemple, pour modifier le href du lien a possédant l'identifiant lienSite:
$('#lienSite').attr("href", "https://djemai-samy.com/posts/0.jquery-initiation")
Il est important de noter que les méthodes chainées sont très flexibles, et nous permettent d'enchainer les modificateurs à la suite.
Par exemple, pour modifier le contenu texte, l'attribut href et ajouter l'attribut target au lien en une seule instruction:
$("#lienSite")
.text("Liens de la serie de cours")
.attr("href", "https://djemai-samy.com/posts/0.jquery-initiation")
.attr("target", "_blank");
3. Création et suppression d'éléments JQuery
Avec JQuery vous pouvez créer, configurer et ajouter des éléments à votre document HTML.
1. Créer un élément
Pour créer un élément, il suffit d'utiliser la méthode de JQuery en ajoutant les chevrons <> autour du nom de la balise souhaitée: $('<balise>').
Par exemple, pour créer un paragraphe avec JQuery, vous pouvez utiliser cette instruction:
$('<p>')
2. Ajouter un élément dans le document
Une fois l'élément créer, vous pouvez l'ajouter à la fin d'un élément selectionné en utilsant la méthode append(), en fournissant l'élément créé en paramètre.
Dans cet exemple, nous avons ajouté un lien <a> à la fin de la section possedant l'identifiant aRemplir:
$("#active").append(
$("<a>")
.text("Cours sur la manipulation du DOM avec JQuery.")
.attr("href", "https://djemai-samy.com/2.jquery-dom")
.attr("target", "_blank")
);
Il est possible d'utiliser la méthode append() en fournissant les éléments à ajouter sous forme de chaine de caractères:
$('#aRemplir').append(`
<a href="https://djemai-samy.com/3.jquery-events" target="_blank">
Cours sur la gestion événenemts avec JQuery.
</a>
`);
3. Supprimer un élément
La fonction remove() de JQuery permet de supprimer un élément et son contenu HTML de la page.
Voici un exemple :
$('#aSupprimer').remove()
4. Styliser les éléments avec JQuery
Avec JQuery vous pouvez styliser les éléments en ajoutant du style en ligne, ou en ajoutant des classes:
1. Inline style
JQuery permet de modifier les styles en lignes des éléments HTML grâce a la méthode css(), qui prend en paramètre le nom de la propriété CSS à modifier et la valeur de cette propriété.
Cet exemple sélectionne tous les titres <h2> de la page et modifie leur couleur de texte en bleu, et ajoute un souslignement:
$('h2').css('color', 'royalblue').css('text-decoration', 'underline');
2. Modification des classes
Il est également possible de modifier les classes d'un élément HTML en utilisant JQuery.
La fonction addClass() permet d'ajouter une classe à des éléments.
$('elements').addClass('maClasse1 maClasse2');
Voici un exemple ou nous ajoutant la classe lien à tous les lien <a>:
$('a').addClass('lien');
La fonction removeClass() permet de supprimer une classe des éléments.
$('elements').removeClass('maClasse1 maClasse2');
Voici un exemple pour supprimer la classe lien de tous les lien <a> enfants d'une <section>:
$('section a').removeClass('lien');
Il existe une fonction qui permet d'alterner l'ajout et la suppression de classes.
Cette fonction ajoute les classes si elle ne sont pas présentes et les supprime si elle sont déjà présentes :
$('elements').toggleClass('maClasse1 maclasse2');
Conclusion
En conclusion, la manipulation du DOM avec JQuery est un concept essentiel pour les développeurs web qui souhaitent créer des pages web interactives et dynamiques.
Grâce à JQuery, la sélection, la modification et l'ajout d'éléments HTML et CSS peuvent être réalisés facilement et efficacement.
Si vous souhaitez approfondir vos connaissances sur la manipulation du DOM avec JQuery, je vous encourage à consulter les nombreuses ressources en ligne disponibles, ainsi que la documentation officielle de JQuery:
- Documentation officielle sur la selection d'éléments avec JQuery.
- Documentation officielle sur la navigation entre éléments avec JQuery.
- Documentation officielle sur la manipulation du DOM avec JQuery.
- Documentation officielle sur la stylisation des éléments avec JQuery.
Dans notre prochain chapitre, nous explorerons en détail la gestion des événements avec JQuery, en apprenant comment attacher des gestionnaires d'événements à des éléments HTML et comment répondre à des événements spécifiques avec des fonctions de rappel.
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
