Articles

JQuery, qu'est-ce que c'est et ce que nous pouvons faire avec la bibliothèque JavaScript

jQuery est une bibliothèque JavaScript rapide, légère et riche en fonctionnalités basée sur le principe "écris moins, fais plus" . Les API JQuery simplifient la gestion et la maintenance des documents HTML, la gestion des événements, l'ajout d'effets d'animation à une page Web. Elle est compatible avec tous les principaux navigateurs tels que Chrome, Firefox, Safari, Edge.

Créer une application basée sur Ajax devient très simple et rapide avec jQuery.

jQuery a été créé à l'origine par John Resig au début de 2006. Le projet jQuery est actuellement maintenu et maintenu par un groupe distribué de développeurs en tant que projet open source.

Vous pouvez économiser beaucoup de temps et d'efforts avec jQuery. Alors ajoutez ce site à vos favoris et continuez à lire

Ce que vous pouvez faire avec jQuery

Il y a beaucoup plus de choses que vous pouvez faire avec jQuery.

  • Vous pouvez facilement sélectionner des éléments de page HTML, pour lire ou modifier des attributs ;
  • Vous pouvez facilement créer des effets comme afficher ou masquer des éléments, des transitions, des défilements, etc.
  • Vous pouvez facilement créer des animations CSS complexes avec moins de lignes de code ;
  • Vous pouvez facilement manipuler les éléments DOM et leurs attributs ;
  • Vous pouvez facilement implémenter Ajax pour permettre l'échange de données asynchrone entre le client et le serveur ;
  • Vous pouvez facilement parcourir toute l'arborescence DOM pour localiser n'importe quel élément ;
  • Vous pouvez facilement effectuer plusieurs actions sur un élément avec une seule ligne de code ;
  • Vous pouvez facilement obtenir ou définir la taille des éléments HTML.

La liste ne s'arrête pas là, il y a beaucoup d'autres choses intéressantes que vous pouvez faire avec jQuery.

Avantages de l'utilisation de jQuery

Il y a plusieurs avantages pour lesquels on devrait opter pour l'utilisation de jQuery :

  • Gagnez beaucoup de temps : vous pouvez économiser beaucoup de temps et d'efforts en utilisant les effets et sélecteurs intégrés de jQuery et vous concentrer sur d'autres aspects du développement ;
  • Simplifiez les tâches JavaScript courantes - jQuery simplifie considérablement les tâches JavaScript courantes. Vous pouvez désormais créer facilement des pages Web riches en fonctionnalités et interactives, avec moins de lignes de code. L'exemple type est l'implémentation d'Ajax pour rafraîchir le contenu d'une page, sans le rafraichir ;
  • Simplicité : jQuery est très facile à utiliser. Toute personne ayant une connaissance pratique de base de HTML, CSS et JavaScript peut commencer à développer avec jQuery ;
  • Compatible avec tous les navigateurs : jQuery a été créé avec les navigateurs modernes à l'esprit et est compatible avec tous les principaux navigateurs modernes tels que Chrome, Firefox, Safari, Edge ;
  • Absolument gratuit - Et la meilleure partie est qu'il est entièrement gratuit à télécharger et à utiliser.

téléchargement de jquery

Pour commencer, téléchargeons d'abord une copie de jQuery, puis incluons-la dans notre projet. Deux versions de jQuery sont disponibles en téléchargement : compressa e non compressé .

Le fichier non compressé est mieux adapté au développement ou au débogage ; tandis que le fichier minifié et compressé est recommandé pour la production car il économise de la bande passante et améliore les performances en raison de la taille plus petite du fichier.

Nous pouvons télécharger jQuery à partir d'ici : https://jquery.com/download/

Une fois que vous avez téléchargé le fichier jQuery, vous pouvez voir qu'il a une extension js, c'est-à-dire qu'il s'agit d'un fichier JavaScript. En fait, JQuery n'est rien d'autre qu'une bibliothèque JavaScript, vous pouvez donc inclure le fichier jQuery dans le document HTML avec l'élément tout comme vous incluez des fichiers JavaScript normaux.

<head>
    <title>Simple HTML Document</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

N'oubliez pas de toujours inclure le fichier jQuery avant les scripts personnalisés ; sinon, les API jQuery ne seront pas disponibles lorsque votre code jQuery tentera d'y accéder.

Comme vous l'avez peut-être remarqué, nous avons ignoré l'attribut dans l'exemple précédent type="text/javascript" à l'intérieur de l'étiquette . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiterminé en HTML5 et dans tous les navigateurs modernes.

jQuery de CDN

Comme alternative, vous pouvez intégrer jQuery dans votre document via des liens CDN (Content Delivery Network) disponibles gratuitement, si vous préférez éviter de télécharger le fichier.

Les CDN peuvent offrir un avantage en termes de performances en réduisant le temps de chargement, car ils hébergent jQuery sur plusieurs serveurs à travers le monde, et lorsqu'un utilisateur demande le fichier, il sera servi à partir du serveur le plus proche.

Cela présente également l'avantage que si le visiteur de votre page Web a déjà téléchargé une copie de jQuery à partir du même CDN lors de la visite d'autres sites, il n'aura pas à le télécharger à nouveau car il se trouve déjà dans le cache de son navigateur.

Dans ce cas, vous devrez écrire :

<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>

En plus du CDN fourni par le projet jquery, vous pouvez inclure jQuery via Google e Microsoft CDN.

Première page Web basée sur jQuery

Après avoir vu les objectifs de la bibliothèque jQuery et comment l'inclure dans votre document, il est maintenant temps de mettre jQuery en pratique.

Faisons maintenant une simple opération jQuery en changeant la couleur du texte d'en-tête par rapport à la pré-couleur.defifini noir à vert.

<head>
    <title>My First jQuery Web Page</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("h1").css("color", "#00ff00");
        });
    </script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

Dans le code, nous avons effectué une simple opération jQuery en changeant la couleur de l'en-tête, c'est-à-dire l'élément en utilisant le sélecteur de l'élément jQuery et la méthode css() lorsque le document est prêt, connu sous le nom d'événement document prêt. 

Syntaxe jQuery

Une instruction jQuery commence généralement par un signe dollar ( $) et se termine par un point-virgule ( ;).

Dans jQuery, le signe dollar ( $) est juste un alias pour jQuery. Considérez l'exemple de code suivant illustrant l'instruction jQuery la plus simple.

<script>
    $(document).ready(function(){

        alert("Hello I'm a JQuery sign");
    });
</script>

L'exemple affiche simplement un message d'avertissement "Hello I'm a JQuery sign” à l'utilisateur. Voyons quelques fonctionnalités :

  • L'élément <script>: jQuery est juste une bibliothèque JavaScript, le code jQuery peut être placé à l'intérieur de l'élément <script>, ou vous pouvez le mettre dans un fichier JavaScript externe ;
  • La ligne $(document).ready(handler); est connu comme un événement prêt. Où est-il handler c'est une fonction qui est passée à la méthode pour être exécutée, dès que le document est prêt, c'est-à-dire lorsque la hiérarchie DOM est complètement construite.

La méthode jQuery ready() il est généralement utilisé avec une fonction anonyme. Ainsi, l'exemple ci-dessus peut également être écrit en notation abrégée comme ceci :

<script>
    $(function(){
        alert("Hello I'm a JQuery sign");
    });
</script>

Sélecteurs

À l'intérieur d'une fonction, vous pouvez écrire des instructions jQuery pour effectuer n'importe quelle action en suivant la syntaxe de base, comme :

$(selector).action();

Où est-ce, $(selector) il sélectionne essentiellement les éléments HTML de l'arborescence DOM afin qu'il puisse être manipulé et action() appliquer certaines actions sur les éléments sélectionnés, comme modifier la valeur de la propriété CSS, ou définir le contenu de l'élément, etc.

Examinons maintenant un autre exemple qui définit le texte d'un paragraphe :

<head>
    <title>jQuery Demo</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p").text("Hello World!");
        });
    </script>
</head>
<body>
    <p>Not loaded yet.</p>
</body>
</html>

L'exemple jQuery fait référence au sélecteur p, et cela sélectionne tous les paragraphes, puis la méthode text() définir le contenu du texte du paragraphe avec "Hello World!" .

Le texte du paragraphe de l'exemple précédent est automatiquement remplacé lorsque le document est prêt. Mais voyons comment faire au cas où vous voudriez effectuer une action avant d'exécuter le code jQuery, pour remplacer le texte du paragraphe. 

Prenons un dernier exemple :


<head>

    <title>jQuery Demo</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").text("Hello World!");
            });            
        });
    </script>
</head>
<body>
    <p>Not loaded yet.</p>
    <button type="button">Replace Text</button>
</body>
</html>

Dans cet exemple, le texte du paragraphe est remplacé uniquement lorsqu'un événement de clic se produit sur le bouton "Replace Text“, ce qui signifie simplement lorsqu'un utilisateur clique sur ce bouton.

Sélection d'éléments par ID

Vous pouvez utiliser le sélecteur d'ID pour sélectionner un seul élément avec l'ID unique sur la page.

Par exemple, le code jQuery suivant sélectionnera et mettra en surbrillance un élément avec l'attribut ID id="markid", lorsque le document est prêt.

<script>
$(document).ready(function(){
    // Highlight element with id markid
    $("#markid").css("background", "grey");
});
</script>
Sélection d'éléments avec le nom de la classe

Le sélecteur de classe peut être utilisé pour sélectionner des éléments avec une classe spécifique.

Par exemple, le code jQuery suivant sélectionnera et mettra en surbrillance les éléments avec l'attribut class class="markclass", lorsque le document est prêt.

<script>
$(document).ready(function(){
    // Highlight elements with class markclass
    $(".markclass").css("background", "grey");
});
</script>
Sélection d'éléments par nom

Le sélecteur d'élément peut être utilisé pour sélectionner des éléments par nom d'élément.

Par exemple, le code jQuery suivant sélectionnera et mettra en surbrillance tout le paragraphe, c'est-à-dire les éléments "<p>" du document lorsqu'il est prêt.

Bulletin d'innovation
Ne manquez pas les nouvelles les plus importantes sur l'innovation. Inscrivez-vous pour les recevoir par email.
<script>
$(document).ready(function(){
    // Highlight paragraph elements
    $("p").css("background", "grey");
});
</script>
Sélection des éléments par attribut

Vous pouvez utiliser le sélecteur d'attribut pour sélectionner un élément en fonction de l'un de ses attributs HTML, tel qu'un attribut de lien targetou l'attribut d'une entrée type, Etc.

Par exemple, le code jQuery suivant sélectionnera et mettra en surbrillance toutes les entrées de texte, telles que les éléments "<input>" avec type="text", lorsque le document est prêt.

<script>
$(document).ready(function(){
    // Highlight paragraph elements
    $('input[type="text"]').css("background", "grey");
});
</script>
Sélection d'éléments via le sélecteur CSS composé

Vous pouvez également combiner des sélecteurs CSS pour rendre votre sélection encore plus précise.

Par exemple, vous pouvez combiner le sélecteur de classe avec un sélecteur d'élément pour rechercher des éléments dans un document qui ont un certain type et une certaine classe.

<script>
$(document).ready(function(){
    // Highlight only paragraph elements with class mark
    $("p.mark").css("background", "yellow");
  
    // Highlight only span elements inside the element with ID mark
    $("#mark span").css("background", "yellow");
  
    // Highlight li elements inside the ul elements
    $("ul li").css("background", "red");
  
    // Highlight li elements only inside the ul element with id mark
    $("ul#mark li").css("background", "yellow");
  
    // Highlight li elements inside all the ul element with class mark
    $("ul.mark li").css("background", "green");
  
    // Highlight all anchor elements with target blank
    $('a[target="_blank"]').css("background", "yellow");
});
</script>
Sélecteur personnalisé jQuery

En plus des sélecteurs defiInitialement, jQuery fournit son propre sélecteur personnalisé pour améliorer encore les capacités de sélection d'éléments sur une page.

<script>
$(document).ready(function(){
    // Highlight table rows appearing at odd places
    $("tr:odd").css("background", "yellow");
  
    // Highlight table rows appearing at even places
    $("tr:even").css("background", "orange");
  
    // Highlight first paragraph element
    $("p:first").css("background", "red");
  
    // Highlight last paragraph element
    $("p:last").css("background", "green");
  
    // Highlight all input elements with type text inside a form
    $("form :text").css("background", "purple");
  
    // Highlight all input elements with type password inside a form
    $("form :password").css("background", "blue");
  
    // Highlight all input elements with type submit inside a form
    $("form :submit").css("background", "violet");
});
</script>

Evénements

Les événements sont souvent déclenchés par l'interaction de l'utilisateur avec la page Web, par exemple lorsqu'il clique sur un lien ou un bouton, saisit du texte dans une zone de saisie ou une zone de texte, effectue une sélection dans une zone de sélection, appuie sur une touche du clavier, déplace le pointeur de la souris , etc. Dans certains cas, le navigateur lui-même peut déclencher des événements, tels que des événements de chargement et de téléchargement de page.

jQuery améliore les mécanismes de gestion des événements de base en offrant des méthodes d'événement pour la plupart des événements de navigateur natifs, certaines de ces méthodes sont ready(), click(), keypress(), focus(), blur(), change(), Etc.

<script>
$(document).ready(function(){
    // Code to be executed
    alert("Hello World!");
});
</script>

En général, les événements peuvent être classés en quatre groupes principaux : 

  • événements souris,
  • événements clavier,
  • module événements
  • événements de document/fenêtre . 

Événements de souris

Un événement de souris est déclenché lorsque l'utilisateur clique sur un élément, déplace le pointeur de la souris, etc.

Voici quelques méthodes jQuery couramment utilisées pour gérer les événements de souris.

La méthode click()

La méthode click() attacher une fonction de gestionnaire d'événements aux éléments sélectionnés pour l'événement "click“. La fonction liée s'exécute lorsque l'utilisateur clique sur cet élément. L'exemple suivant masquera les éléments <p> sur une page lorsque vous cliquez dessus.

<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).slideUp();
    });
});
</script>
La méthode dblclick()

La méthode dblclick() attacher une fonction de gestionnaire d'événements aux éléments sélectionnés pour l'événement "dblclick“. La fonction liée s'exécute lorsque l'utilisateur double-clique sur cet élément. L'exemple suivant masquera les éléments <p> en double-cliquant dessus.

<script>
$(document).ready(function(){
    $("p").dblclick(function(){
        $(this).slideUp();
    });
});
</script>
La méthode hover()

La méthode hover() attachez une ou deux fonctions de gestionnaire d'événements aux éléments sélectionnés qui s'exécutent lorsque le pointeur de la souris entre et sort des éléments. La première fonction s'exécute lorsque l'utilisateur place le pointeur de la souris sur un élément, tandis que la seconde fonction s'exécute lorsque l'utilisateur retire le pointeur de la souris de cet élément.

L'exemple suivant mettra en évidence les éléments <p> lorsque vous placez le curseur dessus, la surbrillance sera supprimée lorsque vous retirerez le curseur.

<script>
$(document).ready(function(){
    $("p").hover(function(){
        $(this).addClass("highlight");
    }, function(){
        $(this).removeClass("highlight");
    });
});
</script>
La méthode mouseenter()

La méthode mouseenter() attache une fonction de gestionnaire d'événements aux éléments sélectionnés qui est exécutée lorsque la souris entre dans un élément. L'exemple suivant ajoutera une mise en surbrillance de classe à l'élément <p> lorsque vous placez le curseur dessus.

<script>
$(document).ready(function(){
    $("p").mouseenter(function(){
        $(this).addClass("highlight");
    });
});
</script>
La méthode mouseleave()

La méthode mouseleave() attache une fonction de gestionnaire d'événements aux éléments sélectionnés qui s'exécute lorsque la souris quitte un élément. L'exemple suivant supprimera la surbrillance de classe de l'élément <p> lorsque vous en retirez le curseur.

<script>
$(document).ready(function(){
    $("p").mouseleave(function(){
        $(this).removeClass("highlight");
    });
});
</script>

Événements clavier

Un événement clavier est déclenché lorsque l'utilisateur appuie ou relâche une touche du clavier. Examinons quelques méthodes jQuery couramment utilisées pour gérer les événements du clavier.

La méthode keypress()

La méthode keypress() attache une fonction de gestion des événements aux éléments sélectionnés (généralement des contrôles de formulaire) qui s'exécute lorsque le navigateur reçoit une entrée au clavier de l'utilisateur. L'exemple suivant affichera un message lorsque l'événement est déclenché keypress et combien de fois il se déclenche lorsque vous appuyez sur la touche de votre clavier.

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keypress(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

L'événement keypress est similaire à l'événement keydown, sauf que les touches de modification et non imprimables telles que Shift, Esc, Backspace ou Delete, les touches fléchées, etc. ils déclenchent des événements keydown mais pas des événements keypress.

La méthode keydown()

La méthode keydown() attache une fonction de gestion d'événements aux éléments sélectionnés (généralement des contrôles de formulaire) qui est exécutée lorsque l'utilisateur appuie pour la première fois sur une touche du clavier. L'exemple suivant affichera un message lorsque l'événement est déclenché keydown et combien de fois il se déclenche lorsque vous appuyez sur la touche de votre clavier.

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keydown(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>
La méthode keyup()

La méthode keyup() attachez une fonction de gestion d'événement aux éléments sélectionnés (généralement des contrôles de formulaire) qui est exécutée lorsque l'utilisateur relâche une touche du clavier. L'exemple suivant affichera un message lorsque l'événement est déclenché keyup et combien de fois il se déclenche lorsque vous appuyez et relâchez une touche de votre clavier.

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keyup(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

Événements de formulaire

Un événement de formulaire est déclenché lorsqu'un contrôle de formulaire reçoit ou perd le focus, ou lorsque l'utilisateur modifie une valeur de contrôle de formulaire, comme la saisie de texte dans une entrée de texte, la sélection d'une option dans une zone de sélection, etc. Voici quelques méthodes jQuery couramment utilisées pour gérer les événements de formulaire.

La méthode change()

La méthode change() attacher une fonction de gestionnaire d'événements aux éléments <input> et est exécuté lorsque sa valeur change. L'exemple suivant affichera un message d'avertissement lors de la sélection d'une option dans la zone de sélection déroulante.

<script>
$(document).ready(function(){
    $("select").change(function(){
        var selectedOption = $(this).find(":selected").val();
        alert("You have selected - " + selectedOption);
    });
});
</script>

Pour les zones de clic, les cases à cocher et les boutons radio, l'événement se déclenche immédiatement lorsque l'utilisateur effectue une sélection avec la souris, mais pour la saisie de texte et la zone de texte, l'événement se déclenche après que l'élément perd le focus.

La méthode focus()

La méthode focus() attache une fonction de gestionnaire d'événements aux éléments sélectionnés (généralement des contrôles et des liaisons de formulaire) qui s'exécute lorsqu'elle obtient le focus. L'exemple suivant affiche un message lorsque la saisie de texte reçoit le focus.

<script>
$(document).ready(function(){
    $("input").focus(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>
La méthode blur()

La méthode blur() attacher une fonction de gestionnaire d'événements pour former des éléments tels que <input><textarea><select> qui est exécuté lorsqu'il perd le focus. L'exemple suivant affiche un message lorsque la saisie de texte perd le focus.

<script>
$(document).ready(function(){
    $("input").blur(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>
La méthode submit()

La méthode submit() attacher une fonction de gestionnaire d'événements aux éléments <form> qui s'exécute lorsque l'utilisateur essaie de soumettre un formulaire. L'exemple suivant affichera un message basé sur la valeur saisie lors de la tentative de soumission du formulaire.

<script>
$(document).ready(function(){
    $("form").submit(function(event){
        var regex = /^[a-zA-Z]+$/;
        var currentValue = $("#firstName").val();
        if(regex.test(currentValue) == false){
            $("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
            // Preventing form submission
            event.preventDefault();
        }
    });
});
</script>

Événements de document/fenêtre

Les événements sont également déclenchés dans une situation où la page DOM (Document Object Model) est prête ou lorsque l'utilisateur redimensionne ou fait défiler la fenêtre du navigateur, etc. Voici quelques méthodes jQuery couramment utilisées pour gérer ce type d'événement.

La méthode ready()

La méthode ready() spécifie une fonction à exécuter lorsque le DOM est entièrement chargé.

L'exemple suivant remplacera le texte du paragraphe dès que la hiérarchie DOM sera entièrement construite et prête à être manipulée.

<script>
$(document).ready(function(){
    $("p").text("The DOM is now loaded and can be manipulated.");
});
</script>
La méthode resize()

La méthode resize() attachez une fonction de gestionnaire d'événements à l'élément window qui s'exécute lorsque la taille de la fenêtre du navigateur change.

L'exemple suivant montre la largeur et la hauteur actuelles de la fenêtre du navigateur lorsque vous essayez de la redimensionner en faisant glisser ses coins.

<script>
$(document).ready(function(){
    $(window).resize(function() {
        $(window).bind("resize", function(){ 
            $("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
        });
    });
});
</script>
La méthode scroll()

La méthode scroll() attacher une fonction de gestionnaire d'événements à la fenêtre ou au iframe et les éléments déroulants qui s'exécutent chaque fois que la position de défilement de l'élément change.

L'exemple suivant affichera un message lors du défilement de la fenêtre du navigateur.

<script>
$(document).ready(function(){
    $(window).scroll(function() {
        $("p").show().fadeOut("slow");
    });
});
</script>

Ercole Palmeri

.

Bulletin d'innovation
Ne manquez pas les nouvelles les plus importantes sur l'innovation. Inscrivez-vous pour les recevoir par email.

Articles récents

Marché des serrures intelligentes : publication d’un rapport d’étude de marché

Le terme Smart Lock Market fait référence à l’industrie et à l’écosystème entourant la production, la distribution et l’utilisation…

27 mars 2024

Que sont les modèles de conception : pourquoi les utiliser, classification, avantages et inconvénients

En génie logiciel, les modèles de conception sont des solutions optimales aux problèmes courants lors de la conception de logiciels. Je suis comme…

26 mars 2024

L'évolution technologique du marquage industriel

Le marquage industriel est un terme général qui englobe plusieurs techniques utilisées pour créer des marques permanentes sur la surface d'un…

25 mars 2024

Exemples de macros Excel écrites avec VBA

Les exemples de macros Excel simples suivants ont été écrits en utilisant VBA Temps de lecture estimé : 3 minutes Exemple…

25 mars 2024