Introduction à jquery

JQuery est une autre excellente bibliothèque Javascript après prototype. Il s'agit d'une bibliothèque js légère compatible avec CSS3 et divers navigateurs (IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+ et les versions ultérieures ne prendront plus en charge le navigateur IE6/7/8). jQuery permet aux utilisateurs de traiter plus facilement le HTML (une application sous Standard Universal Markup Language), les événements, d'implémenter des effets d'animation et de fournir facilement une interaction AJAX pour les sites Web. Un autre gros avantage de jQuery est que sa documentation est très complète et que ses différentes applications sont expliquées en détail. Il existe également de nombreux plug-ins matures parmi lesquels choisir. jQuery peut séparer le code et le contenu HTML de la page HTML de l'utilisateur, c'est-à-dire qu'il n'est pas nécessaire d'insérer un tas de js dans le HTML pour appeler la commande.

jQuery est une bibliothèque javascript compatible avec plusieurs navigateurs. Le concept de base est écrire moins, faire plus (écrire moins, faire plus). jQuery a été lancé par l'Américain John Resig au barcamp de New York en janvier 2006. Il a attiré de nombreux experts JavaScript du monde entier et a été développé par une équipe dirigée par Dave Methvin. Aujourd'hui, jQuery est devenue la bibliothèque JavaScript la plus populaire, utilisée par plus de 55 % des 10 000 sites Web les plus visités au monde.

jQuery est gratuit, open source et sous licence MIT. La conception syntaxique de jQuery peut rendre le développement plus pratique, comme l'exploitation d'objets de document, la sélection d'éléments DOM, la création d'effets d'animation, la gestion d'événements, l'utilisation d'Ajax et d'autres fonctions. De plus, jQuery fournit des API permettant aux développeurs d'écrire des plug-ins. Son utilisation modulaire permet aux développeurs de développer facilement de puissantes pages Web statiques ou dynamiques.

jQuery, comme son nom l'indique, est JavaScript and Query, qui est une bibliothèque qui aide au développement JavaScript.

Histoire

Vers 1992, une société appelée Nombas a développé quelque chose appelé C-soustraction (C-moins-moins , Cmm pour faire court) langage de script intégré. L'idée derrière Cmm est simple : un langage de script suffisamment puissant pour remplacer les macros, tout en restant suffisamment similaire au C (et au C++) pour que les développeurs puissent l'apprendre rapidement. Le langage de script était regroupé dans un shareware appelé CEnvi, qui montrait pour la première fois aux développeurs la puissance du langage.

Nombas a finalement changé le nom de Cmm en ScriptEase car la dernière partie (mm) sonnait trop négative et la lettre C était "effrayante".

Lorsque Netscape Navigator a pris de l'importance, Nombas a développé une version de CEnvi qui pouvait être intégrée dans des pages Web. Ces premières expériences s'appelaient Espresso Pages et représentaient les premiers langages côté client utilisés sur le World Wide Web. Nombas ne se doutait pas que son concept deviendrait une pierre angulaire importante du World Wide Web.

À mesure que la navigation sur Internet devient de plus en plus populaire, le besoin de développer des scripts côté client augmente progressivement. À cette époque, la plupart des utilisateurs d’Internet n’étaient connectés au réseau que via des modems à 28,8 kbit/s, alors même que les pages Web devenaient de plus en plus volumineuses et complexes. Ce qui rend l'utilisateur encore plus malheureux, c'est que la simple vérification de la validité du formulaire nécessite plusieurs interactions aller-retour avec le serveur. Imaginez que l'utilisateur remplisse un formulaire, clique sur le bouton d'envoi, attend 30 secondes pour le traitement, puis voit un message vous indiquant que vous avez oublié de remplir un champ obligatoire.

Netscape, qui était à l'époque à la pointe de l'innovation technologique, a commencé à envisager sérieusement de développer un langage de script côté client pour résoudre des problèmes de traitement simples.

Brendan Eich, qui travaillait chez Netscape à l'époque, a commencé à développer un langage de script appelé LiveScript pour Netscape Navigator 2.0, qui était sur le point de sortir en 1995. Le but à l'époque était de l'utiliser dans Les navigateurs et les serveurs (il devait à l'origine s'appeler LiveWire) l'utilisent. Netscape et Sun ont achevé l'implémentation de LiveScript à temps.

Juste avant la sortie officielle de Netscape Navigator 2.0, Netscape l'a renommé JavaScript afin de tirer parti du mot à la mode sur Internet, Java. Le pari de Netscape s'est avéré payant, et JavaScript est depuis devenu un composant essentiel d'Internet.

En raison du succès de JavaScript 1.0, Netscape a publié la version 1.1 dans Netscape Navigator 3.0. Il se trouve que Microsoft a décidé de se lancer dans les navigateurs à cette époque, en publiant IE 3.0 avec un clone de JavaScript appelé JScript (ainsi nommé pour éviter d'éventuels conflits de licence avec Netscape). L'entrée de Microsoft dans le monde des navigateurs Web, bien que tristement célèbre, a également constitué une étape importante dans l'évolution du langage JavaScript.

Après l'arrivée de Microsoft, 3 versions différentes de JavaScript existaient en même temps : JavaScript dans Netscape Navigator 3.0, JScript dans IE et ScriptEase dans CEnvi. Contrairement au C et à d’autres langages de programmation, JavaScript ne dispose pas de standard qui unifie sa syntaxe ou ses fonctionnalités, et ces 3 versions différentes mettent en évidence ce problème. Alors que les inquiétudes augmentent au sein de l’industrie, il est clair que la normalisation de ce langage est impérative.

En janvier 2006, la première version de jQuery a été publiée, il y a plus de 10 ans (remarque : ce moment correspond à celui de la publication). Même après si longtemps, les gens en tombent toujours amoureux au premier regard grâce à son style de programmation simple et flexible. Dans cet article, nous raconterons l'historique du développement de jQuery afin que les lecteurs puissent en savoir plus sur jQuery.

Alors que jQuery se développe rapidement, certains grands constructeurs se sont également intéressés aux opportunités commerciales. En septembre 2009, Microsoft et Nokia ont officiellement annoncé la prise en charge de la bibliothèque open source jQuery. En outre, Microsoft a également annoncé qu'ils utiliseraient jQuery dans le cadre de l'ensemble d'outils Visual Studio. Il fournira des fonctionnalités telles que des astuces intelligentes jQuery, des extraits de code, des exemples de documentation, etc. Microsoft et Nokia seront membres utilisateurs de jQuery pendant longtemps, et les autres membres incluent Google, Intel, IBM, Intuit et d'autres sociétés.
En janvier 2009, la version 1.3 de jQuery est sortie. Elle utilise le nouveau moteur de sélection Sizzle, qui dépasse largement la vitesse de requête des autres frameworks JavaScript du même type dans divers navigateurs, et les performances de la bibliothèque du programme ont également été grandement améliorées. amélioré. Le deuxième changement dans cette version est de fournir la méthode live(). Vous pouvez utiliser la méthode live() pour lier des événements aux éléments actuels et futurs. Avant la version 1.3, si vous souhaitez lier des événements aux éléments ajoutés ultérieurement, vous devez le faire. Vous devez utiliser le plug-in livequery, et dans la version 1.3, vous pouvez utiliser directement la méthode live(). En août 2005, John Resig a proposé d'améliorer la bibliothèque « Comportement » de Prototype, il a donc publié ses idées sur son blog et a utilisé trois exemples pour l'illustrer.

L’idée de John à l’époque était simple : il trouvait que cette syntaxe était plus simple que la bibliothèque JavaScript existante. Mais ce à quoi il ne s'attendait pas, c'est que cet article attirerait une large attention dans l'industrie dès sa publication. John a donc commencé à réfléchir sérieusement à cette question (écrire une bibliothèque JavaScript avec une syntaxe plus simple), jusqu'au 14 janvier 2006, John a officiellement annoncé qu'il publierait sa propre bibliothèque sous le nom de jQuery. Ce qui a suivi a été le développement rapide de jQuery.
Août 2006, la première version stable de jQuery, et prend déjà en charge les sélecteurs CSS, la gestion des événements et l'interaction AJAX.
En juillet 2007, la version 1.1.3 de jQuery a été publiée. Ce changement de version mineur comprenait une amélioration significative de la vitesse d'exécution du moteur de sélection jQuery. À partir de cette version, les performances de jQuery atteignent le niveau de bibliothèques JavaScript similaires telles que Prototype, Mootools et Dojo. En septembre de la même année, la version 1.2 de jQuery a été publiée, supprimant la prise en charge des sélecteurs XPath car ils étaient devenus redondants par rapport à la syntaxe CSS. Cette version permet une personnalisation plus flexible des effets et facilite également le développement de plug-ins à l'aide de nouveaux événements d'espace de noms. Dans le même temps, le projet jQuery UI a été lancé, une nouvelle suite publiée en remplacement du plug-in Interface autrefois populaire mais obsolète. jQuery UI comprend un grand nombre de widgets prédéfinis, ainsi qu'un ensemble d'outils pour créer des éléments avancés (tels que le glisser-déposer, le tri).

En février 2010, la version 1.4.2 de jQuery a été publiée, qui a ajouté deux nouvelles méthodes de délégation d'événements : délégué() et undelegate(). délégué() est utilisé pour remplacer la méthode live() dans 1.3.2. Cette méthode est plus pratique que live() et peut également réaliser la fonction d'ajout dynamique d'événements. Par exemple, liez les événements de survol à chaque td de la table

Fonctionnalités

1. Effets spéciaux dynamiques

2. AJAX

3. Outils pratiques - Par exemple, jugement de la version du navigateur

5. Amélioration progressive

6. Appel en chaîne

7. Prise en charge de plusieurs navigateurs, prend en charge Internet Explorer6.0+, Opera9. .0+, Firefox2+, Safari2.0+, Chrome1.0+ (la prise en charge d'Internet Explorer6,7,8 a été annulée dans la version 2.0.0)

jQuery 1.0

(août 2006) : La première version stable de la bibliothèque, qui prend déjà en charge les sélecteurs CSS, la gestion des événements et AJAX Prise en charge robuste des interactions .

jQuery 1.1

(janvier 2007) : Cette version simplifie considérablement l'API. De nombreuses méthodes moins couramment utilisées sont combinées, réduisant ainsi le nombre de méthodes qui doivent être maîtrisées et expliquées.

jQuery 1.1.3

(juillet 2007) : Cette version mineure inclut des améliorations significatives de la vitesse d'exécution du moteur de sélection jQuery. À partir de cette version, les performances de jQuery atteignent le niveau de bibliothèques JavaScript similaires telles que Prototype, Mootools et Dojo.

jQuery 1.2

(septembre 2007) : cette version supprime la prise en charge des sélecteurs XPath car elle est devenue redondante. Cette version prend en charge une personnalisation plus flexible des effets et facilite le développement de plug-ins grâce à de nouveaux événements d'espace de noms.

jQuery UI (septembre 2007) : cette nouvelle suite de plugins a été publiée en tant que projet de remplacement du plugin Interface autrefois populaire mais obsolète. jQuery UI comprend un grand nombre de widgets prédéfinis, ainsi qu'un ensemble d'outils permettant de créer des éléments avancés tels que des éléments d'interface glisser-déposer.

jQuery 1.2.6

(mai 2008) : Cette version transplante principalement les fonctions du populaire plug-in Dimensions développé par Brandon Aaron dans le bibliothèque principale.

jQuery 1.3

(janvier 2009) : Cette version utilise le nouveau moteur de sélection Sizzle, et les performances de la bibliothèque ont été grandement améliorées. . Cette version prend officiellement en charge la fonctionnalité de délégation d'événements.

jQuery 1.3.2

(février 2009) : Cette mise à niveau de version mineure améliore encore les performances de la bibliothèque, comme l'amélioration : visible/le sous-jacent mécanisme de traitement du sélecteur :hidden et de la méthode .height()/.width(). De plus, il prend également en charge l'interrogation des éléments à renvoyer dans l'ordre des documents.

jQuery 1.4

(14 janvier 2010) : La base de code a été réécrite et organisée en interne, et certaines spécifications de style ont commencé à être établies. L'ancien fichier core.js est divisé en attributs.js, css.js, data.js, manipulation.js, traversing.js et queue.js, la séparation logique du CSS et des attributs.

Changements importants :

1. Réécriture Ajax

Le module Ajax a été entièrement réécrit. Un nouvel objet jXHR est ajouté pour fournir un sur-ensemble cohérent du XMLHttpRequest intégré dans différents navigateurs. Pour les mécanismes de transport autres que XMLHttpRequest, tels que les requêtes JSONP, les objets jXHR peuvent également être traités. (Pour plus de détails, veuillez vous référer au document jQuery.ajax)

De plus, l'évolutivité du système est grandement améliorée et divers processeurs de données, filtres et mécanismes de transmission peuvent être connectés, ce qui facilite le développement de nouveaux Plug-ins Ajax.

2. Objet différé

L'objet différé (Deferred Object, jQuery.Deferred object) est un objet utilitaire chaînable qui implémente l'interface Promise et peut être enregistré dans la file d'attente de rappel Plusieurs rappels, appelant le file d'attente de rappel et transfert de l'état de réussite ou d'échec de toute fonction synchrone/asynchrone. Comme expliqué dans Utilisation des différés dans jQuery 1.5, le résultat est que jQuery peut découpler la logique qui dépend du résultat d'une tâche (événement) de la tâche elle-même. Ce n'est pas nouveau en JavaScript, Mochikit et Dojo l'implémentent depuis un certain temps. Étant donné que le module Ajax de jQuery 1.5 utilise des objets différés intégrés, les programmes Ajax écrits via jQuery obtiendront automatiquement cette fonctionnalité.

Les développeurs peuvent désormais utiliser des valeurs de retour qui ne sont pas immédiatement disponibles (comme les résultats de retour des requêtes Ajax asynchrones) et, pour la première fois, peuvent attacher plusieurs gestionnaires d'événements.

Par exemple, en utilisant la nouvelle API Ajax interne de jQuery, vous pouvez implémenter le code suivant :

// Attribuez des gestionnaires immédiatement après avoir effectué la requête,// et mémorisez l'objet jxhr pour cette requête var jxhr = $.ajax({ url : "exemple.php" }) .success(function() { alert("success"); }) .error(function() { alert("error"); }) complet. (function() { alert("complete"); });// effectuer d'autres travaux ici ... // Définir une autre fonction d'achèvement pour la requête ci-dessus jxhr.complete(function(){ alert("second complete") ; });

De plus, vous pouvez développer vos propres objets différés en utilisant jQuery.Deferred. Voir : Documentation sur les objets différés pour plus de détails.

3. jQuery.sub()

jQuery 1.5 fournit un moyen de créer et de modifier des copies jQuery. Il peut être utilisé pour ajouter des méthodes qui ne sont pas exposées au monde extérieur, ou pour redéfinir certaines méthodes de jQuery pour fournir de nouvelles fonctions, ou pour fournir une meilleure encapsulation et éviter les conflits d'espace de noms. Bien sûr, il peut également être utilisé pour développer des plug-ins, mais Resig recommande fortement de considérer la fabrique de widgets jQuery UI avant de développer des plug-ins.

Il convient de noter que la sous-fonction ne fournit pas de véritable isolation et que toutes les méthodes, données et appels reposent toujours sur jQuery lui-même pour la prendre en charge.

4. Performances de traversée améliorées

Dans la nouvelle version, les performances de plusieurs fonctions de traversée couramment utilisées telles que .children(), .prev() et .next() ont été considérablement améliorées. amélioré.

5. Système de développement interne

John Resig a également mentionné spécifiquement deux changements dans le système de développement interne de l'équipe jQuery : Premièrement, l'ancien système Java/Rhino a été remplacé par Node.js côté serveur, permettant à l'équipe de se concentrer sur de nouveaux changements dans le JavaScript. environnement ; deuxièmement, l'optimiseur My code est passé de Google Closure à UglifyJS, et l'effet de compression du nouvel outil est très satisfaisant.

Comment utiliser

jQuery peut être téléchargé et utilisé, et il existe deux versions de jQuery disponibles en téléchargement

Version de production - pour une utilisation sur des sites Web réels, a été rationalisée et compressée.

Version de développement - utilisée pour les tests et le développement (code non compressé et lisible)

Comparaison avant et après compression de jQuery version 1.8.0

Mécanisme de plug-in

Le plugin officiel pour jQuery est jQuery UI. Les développeurs peuvent arbitrairement étendre la bibliothèque de fonctions de jQuery ou développer des composants d'interface utilisateur en fonction de leurs propres besoins. Il existe déjà des dizaines de milliers de plug-ins jQuery sur Internet, couvrant des besoins très variés. Par exemple, assistance Ajax, tables de données, listes dynamiques, outils XML, glisser-déposer, traitement des cookies, couches pop-up, etc. La documentation de jQuery est très complète et diverses applications sont également expliquées en détail. Il existe également de nombreux plug-ins matures parmi lesquels choisir, tels que ComponentOne Studio pour ASP NET Wijmo.

Avec le plug-in jQuery dans le fichier. processus de construction de sites Web Le taux d'utilisation est en constante augmentation, il est donc nécessaire de suivre le rythme du temps et de développer de nouveaux plug-ins/extraits de code pour consolider et améliorer l'expérience utilisateur front-end et élever l'expérience utilisateur à un nouveau niveau . Ceux-ci incluent Flat jQuery Price Slider, Gmaps jQuery Map Plugin, FormChimp - MailChimp Ajax plugin pour jQuery, etc.

Contrôle

Le contrôle Gantt jQuery est un contrôle riche en fonctionnalités basé sur HTML5/jQuery natif, qui est véritablement multiplateforme et fonctionne sur de nombreux appareils et navigateurs. Fonctionnement transparent .

Utilisez les fonctions intégrées de planification, de dépendance et autres dans le diagramme de Gantt du projet pour visualiser la liste hiérarchique des tâches.

Utilisez le diagramme de Gantt des ressources pour implémenter une vue d'utilisation des ressources.

L'utilisation de jQuery basé sur API ou de MVC basé sur API peut vous aider à installer facilement des diagrammes de Gantt et à accélérer votre application.

Peut être utilisé avec des modèles jQuery populaires tels que KnockOut(KO), jQuery.tmpl, etc.