Cours JQuery

PDFJquery : bibliothèque JavaScript

Jquery : bibliothèque JavaScript
Support de formation Jquery : bibliothèque JavaScript ... Chapitre 2 Programmation Fonctionnelle et Objet en JavaScript On distingue en JavaScript deux catégories de patter...
3.2(4 votes)

PDFMenu déroulant animé avec jQuery

Menu déroulant animé avec jQuery
Menu déroulant animé avec jquery par clarklab (clarklab) menu déroulant animé avec jquery  article traduit par date de publication : 17 janvier 2009 dernière mise à jour : les...
3(1 votes)

PDFProgrammation orientée objet avec jQuery

Programmation orientée objet avec jQuery
Programmation orientée objet par prototype avec jquery programmation orientée objet avec jquery par daniel hagnou (mon cahier d'exercices sur jquery & co) date de publicat...
0(0 votes)

PDFJQuery cours complet avec exemples de A a Z

JQuery cours complet avec exemples de A a Z
Support de cours initiation et maitrise de jQuery, document à télécharger gratuitement sous format PDF pour tout les niveaux....
1.5(2 votes)

PDFApprendre jQuery débutant

Apprendre jQuery débutant
Apprendre jquery cours pour débutant codage apprendre jquery pdf débutant jquery et javascript: exemples et meilleures pratiques lorsqu'il est utilisé correcteme...
0(0 votes)

PDFCours Ajax et jquery approfondie pas a pas

Cours Ajax et jquery approfondie pas a pas
Cours ajax et jquery approfondie pas à pas cours ajax et jquery approfondie pas a pas … l'architecture informatique ajax (asynchronous javascript and xml) permet...
0(0 votes)

PDFIntroduction à la bibliothèque JavaScript jQuery

Introduction à la bibliothèque JavaScript jQuery
Jquery ¨ librairie javascript qui permet de : ¤ simplifier introduction à la bibliothèque javascript jquery les taches de base en javascript. ¤ accéder à des partie d'une page...
2(1 votes)

PDFSélecteurs et fonctions de sélection jQuery

Sélecteurs et fonctions de sélection jQuery
Université montpellier-ii iut de béziers département sélecteurs et fonctions de sélection jquery src programmation web avancée jquery et ajax responsable : chouki tibermacine ...
0(0 votes)

PDFCours maps jQuery : methodes et fonctions

Cours maps jQuery : methodes et fonctions
Cours maps jquery : méthodes et fonctions javascript cours maps jquery : methodes et fonctions / jquery javascript est exécuté par le client (navigateur w...
0(0 votes)

PDFCours Web avancée jQuery

Cours Web avancée jQuery
Université montpellier-ii iut de béziers département cours web avancée jquery pdf src programmation web avancée jquery et ajax responsable : chouki tibermacine bureau : direct...
0(0 votes)

PDFProgrammation Web avancée jQuery et Ajax

Programmation Web avancée jQuery et Ajax
Université montpellier-ii iut de béziers département programmation web avancée jquery et ajax src programmation web avancée : jquery et ajax responsable : chouki tibermacine b...
5(1 votes)

jQuery est une bibliothèque JavaScript open-source. Elle a été créée par le développeur américain John Resig en 2006 dans le but de faciliter l’écriture de Scripts et le développement de pages web interactives.

En raison de la complexification croissante des interfaces web, jQuery est devenu un incontournable des développeurs web pour ses performances et ses fonctionnalités étendues. Il est aujourd’hui la bibliothèque JavaScript la plus utilisée au monde.


jQuery intervient pour simplifier le processus de l'arborescence DOM et l’intégration de scripts côté client dans des documents HTML. Ainsi, il permet la gestion des événements, l'animation et les interactions Ajax pour un développement web rapide et efficace.

*Ajax étant un ensemble de technologies qui mettent à jour rapidement le contenu d’une page web sans téléchargement complet de la page et sans que cela soit visible par l’utilisateur.

Comme ils sont écrits en JavaScript, les éléments de la bibliothèque jQuery sont placés dans un fichier externe *.js ou entre les balises du code HTML.

Vous pouvez utiliser n'importe quel éditeur de texte pour écrire jQuery. Un bon éditeur fournit une coloration syntaxique qui permet de faciliter la lecture du code et la détection d’erreurs.

La dernière version de jQuery peut être téléchargée gratuitement sur Internet, notamment depuis le site officiel jQuery.

*La version compressée convient à un environnement de production tandis que la version non compressée est utilisée dans un environnement de développement.

Objectifs

jQuery est la bibliothèque JavaScript multi-navigateur la plus célèbre au développement front-end, qui facilite amplement les scripts HTML renvoyés sur le navigateur de l’utilisateur. Utiliser jQuery permet de profiter d'une plus grande compatibilité avec les différents navigateurs. 

Basé sur JavaScript, jQuery fournit toutes les fonctionnalités de ce langage impressionnant. Nous pouvons même dire que jQuery est une version améliorée de JS ou un Framework JS.

JQuery est souvent utilisé par les concepteurs de sites web pour rendre leurs créations beaucoup plus attrayantes et élégantes. Il minimise les tâches du développement, en fournissant des animations innovantes et des plugins instantanés.

L’utilisation de jQuery dans les applications web permet en effet de réduire considérablement le temps de développement (en réduisant le volume du code JS). Avec JQuery, vous écrivez moins de lignes de code, en comparaison avec JavaScript classique.

En utilisant jQuery, vous pouvez aisément employer toutes les fonctions et capacités disponibles en JavaScript afin de concevoir des pages web plus conviviales et plus modernes.

Un autre grand point fort de jQuery est la taille de sa communauté ; Il est toujours plus facile de trouver du support et des développeurs.

Avec jQuery, vous pouvez :

  • Ajouter, modifier ou supprimer des éléments HTML d’une page web
  • Changer les styles des éléments de la page en modifiant leur code CSS
  • Créer des animations graphiques sur une page web
  • Envoyer et recevoir des données depuis un serveur avec AJAX
  • Développer des applications basées sur Ajax
  • Sélectionner des éléments plus rapidement qu’en JS
  • Gérer des événements tels que les clics de souris
  • rendre votre code JS simple, concis et réutilisable
  • Créer des effets personnalisés
  • Réaliser des graphiques animés et dynamiques
  • Et plus encore !

Exemples d’application

Certaines des principales utilisations de jQuery sont les suivantes :

Plugins

Un plug-in est un morceau de code écrit dans un fichier JavaScript. Les créateurs de Bootstrap conçoivent des plugins esthétiques qui sont faciles à mettre en œuvre et ce grâce à jQuery.

Manipulation DOM

Le jQuery a facilité la sélection des éléments DOM et leur modification à l'aide d'un moteur de sélection open source multi-navigateur appelé Sizzle.

Animations avec AJAX

La bibliothèque jQuery est livrée avec de nombreux effets d'animation intégrés. Cela permet de développer un site réactif et riche en fonctionnalités à l'aide de la technologie AJAX.

Le mécanisme des effets jQuery est en fait très simple. Il s’agit de fonctions et méthodes qui rendent une propriété CSS dynamique pendant un intervalle de temps donné (en millisecondes).

Prérequis 

jQuery est facile à apprendre et à utiliser. De plus, sa bibliothèque complète fournit un ensemble de plug-ins intégrés.

Il convient de noter ici que pour pouvoir utiliser jQuery, il faut connaître les notions de base de JavaScript. D’autre part, jQuery permet d'économiser des lignes de code, du temps et de l’énergie que de travailler avec du JavaScript pur. Il est donc préférable d’étudier les deux concepts (JS et jQuery) en parallèle et opter pour des cours et exercices destinés aux débutants.

Et bien sûr, afin d’avoir une base solide pour vos prochains pas en développement front-end, il est nécessaire de connaitre HTML et CSS avant de vous plonger dans l’univers JavaScript et jQuery.

Qu'est-ce que jQuery

jQuery est une bibliothèque JavaScript. En d’autres termes, il s’agit d’un fichier d’extension .js. Pour développer du code jQuery, il sufft de faire référence à la bibliothèque jQuery . Le plus simple consiste à faire référence à un CDN. De la sorte, vous obtiendrez automatiquement la dernière version en date de jQuery. En outre, étant donné que de nombreux sites Web utilisent jQuery, il y a de grandes chances pour que cette bibliothèque ait déjà été utilisée par votre navigateur et se trouve dans sa mémoire tampon. Dans ce cas, il ne sera pas nécessaire de la charger à nouveau : son accès sera immédiat. Deux versions de jQuery sont disponibles : une première traditionnelle, visualisable dans votre editeur, et une seconde minifiée, de façon à réduire sa taille au maximum. Je vous conseille donc d’utiliser la version minifiée afin de réduire le temps nécessaire à son chargement, si elle ne se trouve pas déjà dans le cache du navigateur.

La bibliothèque jQuery fournit une couche d'abstraction à usage général pour les scripts web courants, et est donc utile dans presque toutes les situations de script. Sa nature extensible, car les plugins sont constamment développés pour ajouter de nouvelles capacités. Les fonctionnalités de base, cependant, répondent aux besoins suivants:

  • Accéder aux éléments d'un document. Sans une bibliothèque JavaScript, de nombreuses lignes de code doivent être écrites pour parcourir l'arborescence DOM (Document Object Model) et localiser des parties spécifiques de la structure d'un document HTML. Un mécanisme de sélection robuste et efficace est proposé dans jQuery pour récupérer la pièce exacte du document à inspecter ou à manipuler.
  • Modifier l'apparence d'une page Web. CSS offre une méthode puissante pour influencer la façon dont un document est rendu, mais elle est insuffisante lorsque les navigateurs Web ne prennent pas tous en charge les mêmes normes. Avec jQuery, les développeurs peuvent combler cette lacune en s'appuyant sur le même support standard pour tous les navigateurs. En outre, jQuery peut modifier les classes ou les propriétés de style individuelles appliquées à une partie du document même après le rendu de la page.
  • Modifier le contenu d'un document. JQuery ne se limite pas à de simples modifications esthétiques, il peut modifier le contenu d'un document en quelques clics. Le texte peut être modifié, les images peuvent être insérées ou permutées, les listes peuvent être réorganisées ou la structure entière du code HTML peut être réécrite et étendue, le tout avec une seule interface de programmation d'application (API) facile à utiliser.
  • Répondre à l'interaction d'un utilisateur. Même les comportements les plus élaborés et les plus puissants ne sont pas utiles si nous ne pouvons pas contrôler quand ils ont lieu. La bibliothèque jQuery offre un moyen élégant d'intercepter une grande variété d'événements, comme un utilisateur cliquant sur un lien, sans avoir besoin d'encombrer le code HTML lui-même avec les gestionnaires d'événements. Dans le même temps, son API de gestion des événements supprime les incohérences du navigateur qui affectent souvent les développeurs Web.
  • Animer les modifications apportées à un document. Pour mettre en œuvre efficacement de tels comportements interactifs, un concepteur doit également fournir un retour visuel à l'utilisateur. La bibliothèque jQuery facilite cela en fournissant un éventail d'effets tels que des fondus et des lingettes, ainsi qu'une boîte à outils pour en créer de nouveaux.
  • Récupérer des informations d'un serveur sans actualiser une page. Ce modèle de code est connu sous le nom de JavaScript et XML asynchrone (AJAX), et aide les développeurs Web à concevoir un site réactif et riche en fonctionnalités. La bibliothèque jQuery supprime la complexité spécifique au navigateur de ce processus, ce qui permet aux développeurs de se concentrer sur la fonctionnalité du serveur.
  • Simplifiez les tâches JavaScript courantes. En plus de toutes les fonctionnalités spécifiques à jQuery, la bibliothèque fournit des améliorations aux constructions JavaScript de base telles que l'itération et la manipulation de tableaux.

Que peut apporter jQuery à un document HTML ?

jQuery est utilisé pour interroger et pour modifier le DOM, c’est-à-dire les éléments affchés dans une page Web. Imaginez que vous commenciez à interroger/modifier des éléments qui ne sont pas encore affchés.

Vous vous demandez certainement pourquoi ajouter du code jQuery à un document HTML mis en forme/en page par des règles de style CSS. Eh bien, jQuery apporte plusieurs avantages :

  • Les éléments affchés sur l’écran peuvent réagir aux actions de l’utilisateur. Par exemple, il est possible d’effectuer des calculs et d’affcher un résultat lorsque l’utilisateur clique sur un bouton. Ou encore de modifier les caractéristiques d’un élément suite à certains événements (frappe au clavier, clic souris, heure système, etc.).
  • Les éléments affchés dans une page peuvent être facilement animés (apparition, disparition, translation) de façon automatique ou suite à une action de l’utilisateur.
  • En utilisant la technologie AJAX, jQuery peut mettre à jour une partie de la page Web courante. Par exemple, pour affcher le nom des personnes connectées à un site Web, ou encore pour mettre à jour le cours d’une action cotée en Bourse.

Avec le récent regain d'intérêt pour le HTML dynamique vient une prolifération de frameworks JavaScript. Certains sont spécialisés, en se concentrant sur une ou deux des tâches ci-dessus. D'autres tentent de cataloguer tous les comportements et animations possibles, et de les servir tous préemballés. Pour maintenir la large gamme de fonctionnalités décrites ci-dessus tout en restant compact, jQuery utilise plusieurs stratégies:

  • Tirer parti des connaissances de CSS. En basant le mécanisme de localisation des éléments de page sur les sélecteurs CSS, jQuery hérite d'une manière concise mais lisible d'exprimer la structure d'un document. La bibliothèque jQuery devient un point d'entrée pour les concepteurs qui souhaitent ajouter des comportements à leurs pages car la connaissance de la syntaxe CSS est une condition préalable au développement Web professionnel.
  • Les extensions de support. Afin d'éviter le "fluage des fonctionnalités", jQuery relègue les utilisations spéciales aux plugins. La méthode de création de nouveaux plugins est simple et bien documentée, ce qui a stimulé le développement d'une grande variété de modules inventifs et utiles. Même la plupart des fonctionnalités du téléchargement de base de jQuery sont réalisées en interne grâce à l'architecture du plugin, et peuvent être enlevées si vous le souhaitez, ce qui donne un plus petit
  • Extraits de navigateur abstraits. Une réalité malheureuse du développement web est que chaque navigateur a son propre ensemble d'écarts par rapport aux normes publiées. Une partie importante de n'importe quelle application Web peut être reléguée à la gestion des fonctionnalités différemment sur chaque plate-forme. Alors que le paysage de navigateur en constante évolution rend une base de code parfaitement neutre pour certaines fonctionnalités avancées, jQuery ajoute une couche d'abstraction qui normalise les tâches courantes, réduit la taille du code et simplifie énormément.
  • Travaillez toujours avec des ensembles. Lorsque nous demandons à jQuery de rechercher tous les éléments dont les clans sont repliables et de les masquer, il n'est pas nécessaire de faire défiler chaque élément retourné. Au lieu de cela, des méthodes telles que. hide () sont conçus pour fonctionner automatiquement sur des ensembles d'objets plutôt que sur des objets individuels. Cette technique, appelée itération implicite, signifie que de nombreuses constructions en boucle deviennent inutiles, raccourcissant considérablement le code.
  • Autoriser plusieurs actions sur une ligne. Pour éviter la surutilisation de variables temporaires ou la répétition inutile, jQuery utilise un modèle de programmation appelé chaînage pour la plupart de ses méthodes. Cela signifie que le résultat de la plupart des opérations sur un objet est l'objet lui-même, prêt pour que l'action suivante lui soit appliquée.

Ces stratégies ont permis de compresser le paquet jQuery de moins de 20 Ko, tout en fournissant des techniques pour conserver notre code personnalisé qui utilise la bibliothèque compacte..

L'élégance de la bibliothèque est en partie due au design, et en partie au processus d'évolution stimulé par la communauté dynamique qui a surgi autour du projet. Les utilisateurs de jQuery se réunissent pour discuter non seulement du développement des plugins, mais aussi des améliorations apportées à la bibliothèque principale. L'annexe A détaille de nombreuses ressources communautaires disponibles pour les développeurs jQuery.
 
Malgré tous les efforts nécessaires pour concevoir un système aussi flexible et robuste, le produit final est gratuit pour tous. Ce projet open-source est sous licence sous la licence publique GNU (appropriée pour l'inclusion dans de nombreux autres projets open-source) et la licence MIT (pour faciliter l'utilisation de jQuery dans les logiciels propriétaires).

Historique du projet jQuery

Phase de développement public: John Resig a mentionné pour la première fois une amélioration de la bibliothèque «Behavior» de Prototype en août 2005. Ce nouveau framework a été officiellement publié sous le nom de jQuery le 14 janvier 2006.

  • jQuery 1.0 (août 2006): Ceci, la première version stable de la bibliothèque, avait déjà un support robuste pour les sélecteurs CSS, la gestion des événements et l'interaction AJAX.
  • jQuery 1.1 (janvier 2007): Cette version simplifie considérablement l'API. Beaucoup de méthodes rarement utilisées ont été combinées, réduisant le nombre de méthodes à apprendre et à documenter.
  • jQuery 1.1.3 (juillet 2007): cette version mineure contenait des améliorations de vitesse massives pour le moteur de sélection de jQuery. À partir de cette version, les performances de jQuery se comparent favorablement à celles de ses autres bibliothèques JavaScript, telles que Prototype, Mootools et Dojo.
  • jQuery 1.2 (septembre 2007): la syntaxe XPath pour la sélection des éléments a été supprimée dans cette version, car elle était devenue redondante avec la syntaxe CSS. La personnalisation des effets est devenue beaucoup plus flexible dans cette version, et le développement des plugins est devenu plus facile avec l'ajout d'événements avec espace de noms.
  • JQuery UI (Septembre 2007): Cette nouvelle suite de plugin a été annoncée pour remplacer le plugin Interface, populaire mais vieillissant. Une riche collection de widgets préfabriqués a été incluse, ainsi qu'un ensemble d'outils pour construire des éléments sophistiqués tels que des interfaces glisser-déposer.
  • jQuery 1.2.6 (mai 2008): La fonctionnalité du populaire plugin Dimensions de Brandon Aaron a été intégrée à la bibliothèque principale.
  • jQuery 1.3 (janvier 2009): Une refonte majeure du moteur de sélection (Sizzle) a considérablement stimulé les performances de la bibliothèque. La délégation d'événement a été officiellement prise en charge.

Bibliothèque JQuery