Exemples sympas de scripts jquery. Une collection de scripts jQuery de Dimox. Le document est-il prêt ?
jQuery est une bibliothèque JavaScript qui permet aux développeurs Web d'ajouter des fonctionnalités avancées à leurs sites Web. Il est disponible et disponible gratuitement sous la licence MIT. Ces dernières années, jQuery est devenue la bibliothèque JavaScript la plus populaire utilisée dans le développement Web.
exemple jQueryPour implémenter jQuery, un développeur Web doit référencer un fichier JavaScript dans le code HTML d'une page Web. Certains sites Web hébergent leur propre copie locale, tandis que d'autres sont simplement liés à une bibliothèque hébergée par Google ou un serveur. Par exemple, une page Web pourrait charger la bibliothèque jQuery en utilisant la ligne suivante dans la section HTML (exemple jQuery et cookie) :
Exemples jQuery et AjaxUne fois la bibliothèque chargée, la page Web peut appeler n'importe quelle fonction prise en charge par la bibliothèque. Les exemples courants incluent la modification du texte, le traitement des données de formulaire, le déplacement d'éléments sur une page et la réalisation d'animations. jQuery peut également fonctionner avec le code Ajax et des logiciels comme PHP et ASP pour accéder aux données d'une base de données. Étant donné que jQuery s'exécute côté client (et non sur le serveur Web), il peut mettre à jour les informations d'une page Web en temps réel sans recharger la page. Un exemple courant est la saisie semi-automatique, dans laquelle un formulaire de recherche affiche automatiquement des données générales lorsque vous saisissez une requête.
Avantages de la bibliothèqueOutre sa licence gratuite, l’autre raison principale pour laquelle jQuery a gagné en popularité est sa compatibilité entre navigateurs. Étant donné que chaque navigateur affiche JavaScript différemment, il peut être difficile pour un développeur Web de donner à un site Web la même apparence sur tous les navigateurs. Au lieu d'écrire des fonctions personnalisées pour chaque navigateur, un développeur Web peut utiliser une seule fonction jQuery qui fonctionnera dans Chrome, Safari, Firefox et Internet Explorer. La prise en charge de plusieurs navigateurs a amené de nombreux développeurs à passer du JavaScript standard à jQuery, car cela simplifie considérablement le processus de codage.
La syntaxe jQuery est utilisée pour simplifier la navigation dans les documents, la sélection des éléments DOM, la création d'animations, la gestion des événements et le développement d'applications Ajax. jQuery donne également aux développeurs la possibilité de créer des plugins au-dessus de la bibliothèque JavaScript. Il permet aux programmeurs de créer des conceptions abstraites pour une interaction et une animation de bas niveau, des effets avancés et des widgets thématiques de haut niveau. L'approche modulaire de la bibliothèque jQuery vous permet de créer des pages Web et des applications Web puissantes et dynamiques.
Ensemble de fonctions de base :
- sélectionner des éléments DOM ;
- contournement et manipulation à l'aide du mécanisme de sélection ;
- nouveau style de programmation ;
- fusion d'algorithmes et de structures de données DOM.
Le style a influencé l'architecture d'autres frameworks JavaScript tels que YUI v3 et Dojo, et a également inspiré la création de l'API Selectors standard.
Microsoft et Nokia proposent jQuery sur leurs plateformes. Microsoft l'inclut avec Visual Studio pour une utilisation dans ASP.NET AJAX et ASP.NET MVC, et Nokia l'a intégré à la plate-forme de développement Web Time Widget.
jQuery est une bibliothèque d'éléments avec un modèle d'objet de document (DOM). Le DOM est une représentation de la structure arborescente de tous les éléments d'une page Web. jQuery simplifie la syntaxe pour rechercher, sélectionner et manipuler ces éléments DOM. La bibliothèque peut être utilisée pour rechercher un élément dans un document avec une certaine propriété (par exemple, tous les éléments avec une balise h1), modifier un ou plusieurs de ses attributs (couleur, visibilité) ou répondre à un événement (par exemple, un clic de souris).
DéveloppementLa bibliothèque utilise des fonctionnalités JavaScript populaires telles que les fondus d'entrée et de sortie pour masquer des éléments, des animations et travailler avec des éléments CSS jQuery. jQuery fournit également un paradigme pour la gestion des événements qui va au-delà de la sélection et de la manipulation des éléments DOM. L'attribution d'un événement et la définition d'une fonction de rappel se font en une seule étape et au même endroit dans le code.
Principes de développement avec jQuery (exemples) :
- Séparer JavaScript et HTML - La bibliothèque fournit une syntaxe simple pour ajouter des gestionnaires d'événements au DOM à l'aide de JavaScript, au lieu d'ajouter des attributs d'événement HTML pour appeler des fonctions JS. Ainsi, il encourage les développeurs à séparer complètement le code JavaScript du balisage HTML.
- Concision et clarté – Favorise la concision et la clarté avec des outils tels que le chaînage et les noms de fonctions raccourcis.
- Éliminez les incompatibilités entre navigateurs : les moteurs JavaScript varient légèrement d'un navigateur à l'autre, de sorte que le code JS qui fonctionne pour un navigateur peut ne pas fonctionner pour un autre. Comme d'autres boîtes à outils JavaScript, jQuery gère toutes ces incohérences entre navigateurs et offre une expérience cohérente qui fonctionne sur tous les navigateurs.
- Extensibilité - De nouveaux événements, éléments et méthodes peuvent être facilement ajoutés puis réutilisés en tant que plugin.
jQuery a été initialement publié en janvier 2006 au BarCamp NYC par John Resig et a été influencé par la première bibliothèque cssQuery de Dean Edwards. Il est actuellement maintenu par une équipe de développeurs dirigée par Timmy Willison (avec le moteur de sélection jQuery - Sizzle, dirigé par Richard Gibson).
La bibliothèque comprend les fonctions suivantes :
- sélectionner des éléments DOM à l'aide du moteur de sélection multi-serveur open source Sizzle ;
- mettant en évidence le projet de manipulation du DOM basé sur un sélecteur CSS, qui utilise des noms d'éléments et des attributs, tels que l'identifiant et la classe, comme critères de sélection des nœuds dans le DOM ;
- Événements;
- effets et animations;
- ajax;
- objets différés et promis pour contrôler le traitement asynchrone ;
- Analyse JSON ;
- extensibilité via des plugins ;
- des utilitaires tels que la découverte de fonctionnalités ;
- méthodes de compatibilité disponibles nativement dans les navigateurs modernes mais nécessitant des versions antérieures, telles que inArray() et each(), multi-navigateur (à ne pas confondre avec multi-navigateur).
La bibliothèque jQuery est un fichier JavaScript unique contenant toutes ses fonctions, événements, effets et Ajax DOM courants. Il peut être inclus dans une page Web en créant un lien vers une copie locale ou vers l'une des nombreuses copies disponibles sur les serveurs publics. La bibliothèque dispose d'un réseau de diffusion de contenu (CDN) hébergé par MaxCDN.
Exemple jQuery en PHP :
jQuery a deux styles d'utilisation :
L'accès et la manipulation de plusieurs nœuds DOM dans JQuery commencent généralement par l'appel de la fonction $ avec la chaîne. Cela renvoie un objet jQuery référençant tous les éléments correspondants dans la page HTML.
Mode sans conflitjQuery inclut un mode .noConflict() qui libère le contrôle du $. Ceci est utile si jQuery est utilisé avec d'autres bibliothèques qui utilisent également $ comme identifiant. En mode sans conflit, les développeurs peuvent utiliser des bibliothèques en remplacement de $ sans perdre de fonctionnalité.
Les fonctions de rappel pour gérer les événements sur les éléments qui n'ont pas encore été chargés peuvent être enregistrées dans .ready() en tant que fonctions anonymes. Ces gestionnaires ne seront appelés que lorsque l'événement se déclenchera. Par exemple, le code suivant ajoute un gestionnaire pour un clic de souris sur un élément d'image img :
$("img").on("clic",function())(
//gère l'événement click sur n'importe quel élément img de la page
Certaines fonctions renvoient des valeurs spécifiques (par exemple, $("#input-user-email").Val()). Dans ces cas, le chaînage ne fonctionne pas car la valeur ne fait pas référence à un objet jQuery.
Création de nouveaux élémentsEn plus d'accéder aux nœuds DOM via la hiérarchie des objets, il est également possible de créer de nouveaux éléments si la chaîne passée en argument à $() ressemble à du HTML. Par exemple, la ligne recherche un élément HTML select avec des cartes d'identité et ajoute un élément option avec la valeur VAG et le texte Volkswagen :
$("# marques de voitures sélectionnées")
Ajouter($("")
Attr((valeur:VAG))
Ajouter (Volkswagen)).
UtilitairesLes fonctions jQuery préfixées par $ sont des fonctions utilitaires qui affectent les propriétés et le comportement globaux. L'exemple suivant utilise la fonction each(), qui parcourt les tableaux :
$.each(,fonction())(
console.log(this+1);
Cet exemple de publication jQuery écrit 2, 3, 4 sur la console.
AjaxIl est possible de faire de l'Ajax en utilisant $.ajax() de jQuery, dont un exemple est les méthodes associées pour charger et traiter des données distantes :
URL : "/process/submit.php",
nom : Jean
lieu : Boston
)).done(fonction(msg)(
alert("Données enregistrées :"+msg);
)).fail(function(xmlHttpRequest, statusText, errorThrown)(
alerte(
"Nous n'avons pas pu envoyer votre message.\N\n"
+"Demande HTTP XML :"+JSON.stringify(xmlHttpRequest)
+ ",\nTexte d'état :"+Texte d'état
+ ",\nErreur levée :"+errorThrown);
Dans cet exemple, le serveur a dataname=John et location=Boston pour /process/submit.php. Une fois cette requête terminée, une fonction est appelée pour alerter l'utilisateur. Si la demande échoue, elle alertera l'utilisateur de l'erreur, de l'état de la demande et de l'erreur spécifique.
PluginsL'architecture jQuery permet aux développeurs de créer du code enfichable pour étendre diverses fonctions. Il existe des milliers de plugins disponibles en ligne qui couvrent une gamme de fonctionnalités telles que les aides Ajax, les services Web, les listes dynamiques, les outils XML et XSLT, le glisser-déposer, les événements, la gestion des cookies et les modaux.
Il existe des plugins de moteur de recherche alternatifs, tels que jquer.in, qui adoptent des approches plus spécialisées, telles que la liste uniquement des plugins répondant à certains critères (par exemple, ceux disposant d'un référentiel de code public). Le développeur fournit le Learning Center, une ressource jQuery pour les débutants qui peut aider les utilisateurs à comprendre JavaScript et à commencer à développer des plugins.
interface utilisateur jQueryjQuery UI est une collection de widgets GUI, de visuels animés et de thèmes implémentés à l'aide de jQuery CSS (une bibliothèque JavaScript), de feuilles de style en cascade et de HTML. Selon le service d'analyse JavaScript Libscore, jQuery UI est utilisé par plus de 197 000 sites Web de premier plan, ce qui en fait la deuxième bibliothèque JS la plus populaire. Les plus célèbres d'entre eux : Pinterest, PayPal, IMDb, The Huffington Post et Netflix.
jQuery UI est gratuit et open source, distribué par la Fondation sous la licence MIT. A été publié pour la première fois en septembre 2007.
jQueryMobilejQuery Mobile est un framework Web optimisé pour le toucher (également appelé framework mobile). L'objectif principal du développement est de créer une infrastructure compatible avec une large gamme de smartphones et de tablettes, nécessaire au marché croissant de la technologie numérique. Compatible avec d'autres plateformes d'applications mobiles telles que PhoneGap, Worklight et bien d'autres.
Cela installera jQuery dans le répertoire node_modules. Dans node_modules/jquery/dist/, vous trouverez une version non compressée, une version compressée et un fichier de carte.
lien Téléchargement de jQuery à l'aide de BowerLa deuxième version vous aide à mettre à jour le code pour qu'il s'exécute sur jQuery 3.0 ou supérieur, une fois que vous avez utilisé Migrate 1.x et mis à niveau vers jQuery 1.9 ou supérieur:
lier les tests multi-navigateurs avec jQueryAssurez-vous de tester les pages Web qui utilisent jQuery dans tous les navigateurs que vous souhaitez prendre en charge. Le site met à disposition des machines virtuelles pour tester de nombreuses versions différentes d'Internet Explorer. Des versions plus anciennes d'autres navigateurs peuvent être trouvées sur oldversion.com.
lien vers les versions préliminaires de jQueryL'équipe jQuery travaille constamment à améliorer le code. Chaque commit dans le dépôt Github génère une version en cours du code que nous mettons à jour sur le CDN jQuery. Ces versions sont parfois instables et jamais adaptées aux sites de production. Nous recommandons de les utiliser pour déterminer si un bug a déjà été corrigé lors du signalement de bugs par rapport aux versions publiées, ou pour voir si de nouveaux bugs ont été introduits.
link Utiliser jQuery avec un CDN link Autres CDNLes CDN suivants hébergent également des versions compressées et non compressées des versions de jQuery. À partir de jQuery 1.9, ils peuvent également héberger ; consultez la documentation du site.
Notez qu'il peut y avoir des délais entre une version de jQuery et sa disponibilité. Soyez patient, ils reçoivent les fichiers en même temps que le billet de blog est rendu public. Les versions bêta et versions candidates ne sont pas hébergées par ces CDN.
C'est l'une des bibliothèques JavaScript les plus populaires. Et ce n’est pas surprenant pour ceux qui l’utilisent. Il permet de simplifier, d'accélérer et, plus surprenant, d'améliorer le développement de scripts JavaScript.
Avantages :
- Travail très pratique avec des éléments basés sur des sélecteurs CSS.
- Excellente compatibilité entre navigateurs. De nombreux programmeurs ne pensent pas à la compatibilité entre navigateurs, mais cela est nécessaire, car différents navigateurs peuvent traiter le même code différemment. prend en compte toutes ces nuances, et vous n'avez plus besoin d'y penser.
- Excellentes capacités d'animation. L'animation décore la page et la rend plus agréable à utiliser. Il est tout simplement impossible de rendre l'animation plus simple que ce qui est implémenté dans .
- Un grand nombre de plugins prêts à l'emploi. La création du même curseur d'image en JavaScript peut prendre plusieurs jours. Et vous pouvez installer et configurer un plugin prêt à l'emploi en quelques minutes.
Sur cette base, tous ceux qui développent des scripts en JavaScript devraient le savoir. Et le but de cette catégorie est de vous apprendre à utiliser, et aussi de montrer des exemples d'utilisation, par exemple issus de ma propre pratique.
Après avoir lu des articles sur jQuery, vous apprendrez :1) Comment installer .
2) Quelle est la fonction $() dans .
3) Comment sélectionner des éléments dans .
4) Comment travailler avec l'échantillonnage sur .
5) Comment ajouter et supprimer des éléments dans .
6) Comment traiter les événements sur .
7) Comment l'animation est réalisée sur .
8) Comment zoomer sur les images.
9) Comment créer un bouton « retour en haut » fluide sur .
10) Comment télécharger dynamiquement des fichiers sur le serveur.
11) Comment la mise en page adaptative est effectuée sur .
12) Comment envoyer des requêtes asynchrones à
13) Comment envoyer des requêtes Ajax en utilisant les méthodes $.post() et $.get()
14) Comment créer un bouton radio sous la forme d'un curseur sur .
15) Comment installer le curseur lisse.
16) Comment créer une archive à l'aide d'un plugin pour .
17) Comment faire le tour du site sur .
18) Comment créer de beaux onglets en utilisant JQuery.
19) Comment créer des légendes sur un site Web à l'aide d'un plugin pour .
20) Comment créer une belle barre de progression à l'aide d'un plugin pour .
21) Comment créer un verrou à l'aide d'un modèle sur .
22) Comment ajouter des intervenants à un site Web avec la bibliothèque dynamo.js.
23) Comment créer une vidéo en arrière-plan en utilisant .
24) Comment confirmer l'envoi du courrier à .
25) Comment créer un slider beau et efficace en utilisant JQuery.
26) Comment créer une belle liste déroulante sur .
27) Comment créer une belle fenêtre pop-up dans JQuery en utilisant WebUI-Popover.
28) Comment faire de belles notifications dans JQuery en utilisant le plugin Noty.
29) Comment créer un beau menu déroulant avec un effet intéressant en utilisant CSS et .
30) Comment créer un arrière-plan de particules sur .
31) Comment faire une comparaison interactive de deux photos à l'aide de JQuery.
32) Comment créer un curseur circulaire dans JQuery.
33) Comment créer des nuages en utilisant JQuery.
34) Comment afficher le temps écoulé depuis la publication d'un post sur .
35) Comment afficher les caractères spéciaux dans JQuery.
36) Comment créer un compte à rebours dans JQuery.
37) Comment créer un menu personnalisé en utilisant JQuery.
38) Comment faire une animation lors du chargement d'une page sur .
40) Comment créer un menu coulissant en utilisant JQuery.
41) JQuery LightGallery - plugin pour créer des galeries.
42) Comment envelopper un élément dans la présentation d'un navigateur ou d'un appareil sur .
43) Comment créer une belle galerie avec tri à l'aide de JQuery.
44) Comment créer un objet 3D interactif en utilisant JQuery.
45) Comment créer une fenêtre pop-up en utilisant JQuery.
46) Comment créer un effet de parallaxe de défilement.
47) Comment créer un menu hamburger en utilisant CSS et JS. Partie 1.
48) Comment créer un menu hamburger en utilisant CSS et JS. Partie 2.
49) Comment effectuer une recherche par clic contextuel.
50) Comment valider un formulaire en utilisant jQuery.
51) Comment créer un masque de saisie téléphonique à l'aide de jQuery.
52) Comment travailler avec la bibliothèque jQuery.
53) Comment travailler avec la bibliothèque jQuery UI.
54) Comment utiliser le curseur jQuery UI.
55) Comment utiliser le widget jQuery UI Datapicker.
56) À propos du plugin pour les onglets EasyTabs.
57) Comment personnaliser le curseur BxSlider.
58) Comment mettre un compte à rebours sur un site Web.
59) Comment créer un formulaire AJAX sans recharger la page.
60) Comment créer l'effet d'un texte imprimé sur un site Web.
61) Utilisation d'un exemple réel sur l'animation d'un vecteur SVG.
62) Filtres dans jQuery.
63) Comment obtenir un sélecteur dans jQuery.
64) Comment manipuler les attributs dans jQuery.
65) Comment fonctionnent les événements de souris jQuery.
66) Comment fonctionnent les effets jQuery.
67) Comment faire (partie 1).
68) Comment créer une fenêtre contextuelle en utilisant jQuery (partie 2).
69) Comment filtrer par premières lettres à l'aide de jQuery.
70) Comment animer le bouton du menu hamburger.
71) Comment créer un menu hamburger réactif.
72) Comment créer une première mise en page mobile.
73) Comment créer une ancre fluide en utilisant jQuery.
74) Comment faire défiler la page vers le haut.
75) Comment créer un widget accordéon de bibliothèque.
Il y a 10 ans, lorsque jQuery n'en était qu'à ses balbutiements, l'écosystème des navigateurs était très diversifié et chacun des produits qui existaient alors se débattait avec la complexité de manipuler les éléments du DOM à sa manière. L'objectif ambitieux que les développeurs de jQuery se sont fixés était de développer une approche universelle pour résoudre ces problèmes et créer une API qui fonctionnerait aussi bien dans n'importe quelle situation.
Pour autant qu'ils aient pu en juger, mais après 10 ans d'existence, jQuery reste l'une des bibliothèques JavaScript les plus populaires.
JavaScript lui-même est désormais un produit complètement mature, bien documenté et pris en charge par tous les navigateurs modernes. La communauté des navigateurs modernes est également plus consolidée et, dans la plupart des cas, vous pouvez être sûr que si, par exemple, une page s'affiche correctement dans Crome, elle aura la même apparence dans Firefox. Les querySelectors sont également pris en charge par presque tous les navigateurs modernes.
Il semblerait que l'histoire du développement de jQuery touche à sa fin - pourquoi surcharger les pages et gaspiller des cycles de processeur supplémentaires si la plupart des problèmes peuvent être résolus à l'aide d'outils de langage standard ? D'un autre côté, au cours d'une si longue période, l'industrie informatique a développé un grand nombre de solutions qui peuvent être simplement prises et utilisées, ici et maintenant.
Je pense que ce choix doit être fait par le développeur lui-même dans chaque situation spécifique, en se concentrant non pas sur la mode et les tendances, mais sur le bon sens et les perspectives de développement de sa création.
Dans cette revue, j'ai rassemblé tous les plugins jQuery gratuits que je connais et qui sont actuellement activement développés ou qui ont été mis à jour au moins une fois au cours de l'année écoulée. J'utilise activement certains d'entre eux dans ma pratique, d'autres que je ne connais que superficiellement, mais ils m'ont impressionné par leurs capacités. Parmi eux, il y en a des exceptionnellement extraordinaires, réalisés avec une grande imagination. Et même si vous ne trouvez pas le moyen de les utiliser dans vos projets, ils vous inspireront peut-être pour créer vos propres solutions, encore plus incroyables.
multiscroll.js Une solution intéressante pour attirer l'attention du visiteur - le défilement des pages s'effectue sous la forme de deux panneaux, dont l'un glisse vers le haut et l'autre vers le bas, ouvrant le bloc suivant. Il fonctionne également très bien sur tous les navigateurs, même les plus obsolètes.
Un plugin très original qui, je pense, plaira aux visiteurs si vous avez beaucoup de textes longs.
