Présentation de jQuery

Présentation de jQuery

  1. Objectif

    • Connaitre le jquery.
  2. Introduction

    • jQuery est un framework JavaScript libre et Open Source, implanté côté client, qui porte sur l’interaction entre le DOM, JavaScript, AJAX et le Html.
    • Présentation de jQuery
      source de l’image https://openclassrooms.com

    • Cette librairie JavaScript a pour but de simplifier les commandes communes du JavaScript. La devise de jQuery est en effet, “Écrire moins pour faire plus”(write less do more).
    • Le jQuery est une bibliothèque JavaScript libre et multi-plateforme créée pour faciliter l’écriture de scripts côté client dans le code HTML. La première version est lancée en janvier 2006 par John Resig (un petit génie du JavaScript).
    • jQuery est une bibliothèque Javascript dont le but est de simplifier plusieurs opérations fastidieuses en Javascript “pur”. En particulier, elle rend la manipulation du DOM et l’ajout de transitions en HTML beaucoup plus simples.



  3. Fonctionnalités

    • La bibliothèque contient notamment les fonctionnalités suivantes :
      • Parcours et modifications du DOM ;
      • Gestion des événements ;
      • Effets visuels et animations ;
      • Traiter les données entrées dans des formulaires
      • Manipulation des CSS ;
      • Etablir des échanges avec un serveur Web via AJAX ;
      • Utiliser des plugins ;
      • Utilitaires
  4. Pourquoi utiliser jQuery ?

    • La bibliothèque jQuery fournit une couche d’abstraction générique pour les scripts web classiques. Elle est donc utile pour la plupart des développements de scripts.
    • Les intérêts de jQuery sont multiples. Voici les principaux :
      1. Accéder aux éléments d’un document.
        • Sans l’aide d’une bibliothèque JavaScript, les développeurs web doivent écrire de nombreuses lignes de code pour parcourir l’arborescence du DOM (Document Object Model) et localiser des parties spécifiques de la structure d’un document HTML.
        • jQuery fournit un mécanisme de sélection robuste et efficace qui permet de retrouver facilement les éléments d’un document afin de les examiner ou de les manipuler.$(‘div.content’).find(‘p’);
      2. Modifier l’aspect d’une page web.
        • CSS propose une solution puissante pour modifier le rendu des documents, mais elle montre ses limites lorsque les navigateurs web ne respectent pas les mêmes standards. Avec jQuery, les développeurs peuvent contourner ce problème en se fondant sur une prise en charge identique des standards quels que soient les navigateurs.
        • Par ailleurs, la bibliothèque permet de modifier les classes ou les propriétés de style appliquées à une partie du document, même après que la page a été affichée. $(‘ul > li:first’).addClass(‘active’);
      3. Altérer le contenu d’un document.
        • jQuery ne se borne pas à des changements cosmétiques mais permet de modifier le contenu du document. Du texte peut être changé, des images peuvent être insérées ou interverties, des listes être réordonnées, l’intégralité de la structure du contenu HTML peut être revue et étendue.
        • Toutes ces possibilités sont permises par une API (Application Programming Interface) simple d’emploi. $(‘#container’).append(‘plus...’);
      4. Réagir aux actions de l’utilisateur.
        • Même les comportements les plus élaborés et les plus puissants ne sont d’aucune utilité si leur exécution n’est pas contrôlée.
        • La bibliothèque jQuery propose une solution élégante pour intercepter une grande variété d’événements, comme un clic sur un lien, sans avoir à encombrer le balisage HTML par des gestionnaires d’événements.
        • De plus, cette API de gestion des événements permet de passer outre les différences de syntaxe des navigateurs, qui constituent une véritable nuisance pour les développeurs.

        • $(‘button.show-details’).click(function() {
          $(‘div.details’).show();
          });

      5. Animer les modifications d’un document.
        • Pour la bonne mise en œuvre des comportements interactifs, le concepteur doit également fournir un retour visuel à l’utilisateur. La bibliothèque jQuery apporte son aide en proposant des animations, comme les effets de fondu et de volet, ainsi qu’une boîte à outils pour en construire de nouvelles.
        • $(‘div.details’).slideDown();

      6. Récupérer des informations à partir d’un serveur sans actualiser la page.
        • Ce type de code, connu sous le nom Ajax, qui signifiait initialement Asynchronous JavaScript And XML, représente désormais un ensemble plus complet de technologies de communication entre le client et le serveur.
        • La bibliothèque jQuery permet de retirer de cette tâche les complexités propres aux navigateurs et de laisser les développeurs se concentrer sur l’aspect serveur.
        • $(‘div.details’).load(‘more.html #content’);

      7. Simplifier les tâches JavaScript courantes.
        • Outre les fonctionnalités de jQuery orientées document, la bibliothèque améliore les constructions JavaScript de base, comme les itérations et la manipulation des tableaux.
        • $.each(obj, function(key, value) {
          total += value;
          });

            Source: – jQuery, 3e édition – Jonathan Chaffer, Karl Swedberg




Abonnez vous à notre chaîne YouTube gratuitement