La première chose à connaître est $(document).ready(function(){} dans jQuery. Cette structure est essentielle pour s'assurer que votre code JavaScript s'exécute uniquement une fois que la page HTML est complètement chargée, évitant ainsi des erreurs potentielles liées à la manipulation d'éléments HTML qui n'existent pas encore. Vous pouvez activer les options de développement de votre navigateur et constater que le texte : jQuery est prêt ! ne s'affiche qu'une fois la page entièrement chargée.
$(document).ready(function() {
console.log("jQuery est prêt !");
});
$("p").css("color", "red");
$(".ma-classe").hide();
$("#mon-id").fadeIn();
$(".ma-classe").css({"color": "white", "font-size": "20px"});
$("#mon-id").css({"color": "blue", "font-size": "16px"});
// Ajouter une classe CSS
$(".ma-classe").addClass("nouvelle-classe");
// Retirer une classe CSS
$("#mon-id").removeClass("ancienne-classe");
// Alternativement, basculer une classe CSS (ajouter si elle est absente, sinon la retirer)
$(".un-autre-element").toggleClass("classe-active");
$("body").append("<p>Nouveau paragraphe</p>");
$("#mon-id").text("Nouveau texte");
Ex 1 : La syntaxe de base pour attacher un gestionnaire de clic à un élément en utilisant jQuery est :
Cliquer sur le bouton
<button class="btn btn-success" id="monBouton">Cliquez-moi</button>
$('#monBouton').click(function() {
// Basculer entre les classes "btn-danger" et "btn-success" sur le bouton
$('#monBouton').toggleClass("btn-danger btn-success");
});
Ex 2 : Changement de texte sur clic :
Cliquez sur ce paragraphe.
<id="paragraphe">Cliquez sur ce paragraphe.</p>
$('#paragraphe').click(function() {
$(this).text("Le paragraphe a été cliqué !");
});
Ex 3 : Prévention du comportement par défaut :
Parfois, je voudrais empêcher le comportement par défaut d'un élément lors d'un clic, comme un lien qui redirige vers une autre page.
<a href="https://www.mahmoud-illourmane.fr" id="monLien">Visitez mon site</a>
$('#monLien').click(function(e) {
e.preventDefault(); // Empêche le lien de suivre l'URL
alert("Lien cliqué, mais nous restons ici !");
});
Ex 4 : Utilisation de on pour des éléments dynamiquement ajoutés :
<div id="conteneur">
<button class="btnClic">Bouton 1</button>
</div>
<button id="ajouterBouton">Ajouter un autre bouton</button>
// Gestion du clic pour les boutons existants et futurs
$('#conteneur').on('click', '.btnClic', function() {
alert("Un bouton à l'intérieur du conteneur a été cliqué !");
});
// Ajouter dynamiquement un nouveau bouton
$('#ajouterBouton').click(function() {
$('#conteneur').append('');
});
Ex 1 : Dans cette section, nous allons explorer comment utiliser jQuery pour détecter les clics sur des div identiques contenant des champs input différents. Nous verrons comment identifier spécifiquement le div sur lequel un utilisateur a cliqué et à récupérer ou manipuler les données de l'input correspondant.
Cliquer sur un des deux inputs.
<div class="conteneur-div">
<div class="div-enfant">
<input type="text" class="input-enfant" value="Input 1">
</div>
<div class="div-enfant">
<input type="text" class="input-enfant" value="Input 2">
</div>
<!-- Plus de divs identiques -->
<span class="input-result color_7"></span>
</div>
// Cette fonction sera exécutée lorsqu'un div.div-enfant est cliqué
$(".conteneur-div").on("click", ".div-enfant", function() {
// $(this) fait référence au div.div-enfant sur lequel le clic a été effectué
var clickedDiv = $(this);
// Trouver la valeur de l'input dans ce div spécifique
var inputValue = clickedDiv.find(".input-enfant").val();
$('.input-result').text(inputValue);
console.log("Div cliqué avec valeur d'input : " + inputValue);
});
.on("click", ".div-enfant", function() {...}) est utilisé pour la délégation d'événements. Cela signifie que même si vous ajoutez plus de div.div-enfant dynamiquement, le gestionnaire d'événements sera toujours appliqué.
$(this) à l'intérieur de la fonction de rappel fait référence au div.div-enfant spécifique qui a été cliqué.
.find(".input-enfant") est utilisé pour sélectionner l'élément input enfant du div cliqué, et .val() pour obtenir sa valeur.
Ex 2 : Gestion des Boutons d'Édition et de Confirmation avec jQuery.
Dans cet exemple, nous avons un ensemble de champs de saisie associés à des boutons d'édition et de confirmation.
L'objectif est de permettre à l'utilisateur de cliquer sur le bouton d'édition pour activer le champ de saisie correspondant,
puis de cliquer sur le bouton de confirmation pour désactiver à nouveau le champ. Ce scénario est typique dans les interfaces
de gestion de données où les modifications doivent être contrôlées et explicites.
<div class="movie">
<div class="movie-name movie-info mb-3">
<div class="label">
<label for="input-movie-name">Nom du film : <strong class="original-data" data-original="Tata">Tata</strong></label>
</div>
<div class="edit-data-movie">
<div class="input-width">
<input class="form-control input-edit-movie" type="text" name="movie_name" id="input-movie-name" value="Tata">
</div>
<div class="edit-data-button mt-2">
<a class="edit-icon-button deco-none material-icons">edit</a>
<a class="confirm-icon-button deco-none material-icons">check</a>
</div>
</div>
</div>
<div class="movie-director movie-info mb-3">
<div class="label">
<label for="label-movie-director">Réalisateur du film : <strong class="original-data" data-original="Toto">Toto</strong></label>
</div>
<div class="edit-data-movie">
<div class="input-width">
<input class="form-control input-edit-movie" type="text" name="director" id="input-movie-director" value="Toto">
</div>
<div class="edit-data-button mt-2">
<a class="edit-icon-button deco-none material-icons">edit</a>
<a class="confirm-icon-button deco-none material-icons">check</a>
</div>
</div>
</div>
<div class="movie-date-creation movie-info mb-3">
<div class="label">
<label for="label-movie-year">Année de sortie : <strong class="original-data" data-original="2024">2024</strong></label>
</div>
<div class="edit-data-movie">
<div class="input-width">
<input class="form-control input-edit-movie" type="number" name="year_of_creation" id="input-movie-year" value="2024">
</div>
<div class="edit-data-button mt-2">
<a class="edit-icon-button deco-none material-icons">edit</a>
<a class="confirm-icon-button deco-none material-icons">check</a>
</div>
</div>
</div>
</div>
// Au chargement de la page les champs sont désactivés
$('.input-edit-movie').prop('disabled', true);
// Gestion du clic sur le bouton d'édition
$('.edit-icon-button').click(function() {
// Trouver le parent .movie-info du bouton d'édition cliqué
var movieInfo = $(this).closest('.movie-info');
// Activer le champ de saisie dans ce .movie-info
movieInfo.find('.input-edit-movie').prop('disabled', false);
// Ici, vous pouvez également ajouter une logique pour modifier le label si nécessaire
});
// Désactivation du Champ de Saisie avec le Bouton de Confirmation
$('.confirm-icon-button').click(function() {
// Trouver le parent .movie-info du bouton de confirmation cliqué
var movieInfo = $(this).closest('.movie-info');
// Désactiver le champ de saisie dans ce .movie-info
var inputField = movieInfo.find('.input-edit-movie');
inputField.prop('disabled', true);
// Récupérer la valeur actuelle de l'input
var updatedValue = inputField.val();
// Mettre à jour le texte du label correspondant
// Supposons que le label à mettre à jour est le avec la classe .original-data
movieInfo.find('.original-data').text(updatedValue);
});