que sont les plugins jquery

plugins jquery signifie "plug-ins jquery", qui sont des outils écrits par des développeurs utilisant jquery. Ils peuvent être compris comme une fonction ou un effet spécial encapsulé par jQuery, il vous suffit d'utiliser très peu de code pour obtenir un résultat. beaucoup. De bons résultats. Le but de l'écriture de plug-ins jquery est principalement d'encapsuler une série de méthodes ou de fonctions existantes afin qu'elles puissent être réutilisées ailleurs pour faciliter la maintenance ultérieure et améliorer l'efficacité du développement.

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.6.1, ordinateur Dell G3.

plugins signifie "plug-in". plugins jquery signifie "plug-ins jquery".

Qu'est-ce que le plugin jquery ?

Le plug-in jQuery est une collection de scripts que les développeurs utilisent Jquery pour créer des effets spéciaux, puis les encapsuler ou les empaqueter dans des fichiers js et les publier en ligne pour que tout le monde puisse les utiliser.

Le but de l'écriture de plug-ins jquery est principalement d'encapsuler une série de méthodes ou de fonctions existantes afin qu'elles puissent être réutilisées à d'autres endroits pour faciliter la maintenance ultérieure et améliorer l'efficacité du développement.

Habituellement, ce type de plug-in doit appeler le fichier du plug-in en plus du fichier de la bibliothèque jQuery. Il existe des instructions d'utilisation et vous pouvez les comprendre en un coup d'œil. Par exemple, lorsque vous utilisez le plug-in jQuery produit par le site officiel de jQuery, vous devez non seulement lier le fichier bibliothèque, mais également lier le fichier UI et le fichier CSS UI, comme par exemple :

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Après ces opérations, le jQuery l'effet peut véritablement être référencé au rôle dans lequel le fichier de la page Web joue un rôle.

Écriture de plug-ins

Concernant l'écriture de plug-ins, jquery fournit officiellement un ensemble de modèles pour développer des plug-ins au niveau objet :

;(function ($) {
    $.fn.plugin=function (options) {
        var defaults={
            //各种参数、各种属性
        };
        //options合并到defaults上,defaults继承了options上的各种属性和方法,将所有的赋值给endOptions
        var endOptions=$.extend(defaults,options);
        
        this.each(function () {
            //实现功能的代码
        });
    };
})(jQuery);

Points clés du modèle :

1. sont placés dans des fermetures et les fonctions externes ne peuvent pas être appelées. Il est plus sûr d'accéder aux paramètres à l'intérieur

2 Ajoutez un point-virgule devant pour éviter des problèmes inutiles

La méthode d'appel du plug-in jquery :

1. . Étendre jquery via $.extend()

2. Via Ajouter des méthodes à jquery vers $.fn

3 Utilisez la méthode de fabrique de widgets jQuery UI pour créer via $.widget()

La méthode 1 ne peut pas appeler le sélecteur et est. uniquement compris par jQuery comme l'ajout d'une méthode statique, nous utilisons donc Il n'est pas nécessaire de sélectionner l'objet DOM

Plug-ins tiers couramment utilisés pour jquery

JQuery possède une multitude de plug-ins tiers- ins, tels que : menu arborescent, contrôle de date, plug-in de changement d'image, fenêtre contextuelle, etc. Page frontale de base Tous les composants qu'elle contient ont des plug-ins correspondants, et les effets créés avec les plug-ins JQuery sont très éblouissant, et vous pouvez réécrire et encapsuler les plug-ins selon vos propres besoins, ce qui est simple et pratique.

Ce qui suit présente les plug-ins tiers couramment utilisés.

1. Plug-in de validation de formulaire jQuery : Validation

(1) Introduction à la validation

L'occasion la plus courante où JavScript est utilisé est la validation de formulaire, et jQuery, en tant qu'excellente bibliothèque JavaScript, fournit également un excellent plug-in de validation de formulaire. -in—— Validation.Validation est l'un des plug-ins jQuery les plus anciens, a été vérifié par différents projets à travers le monde et a été salué par de nombreux développeurs Web. En tant que bibliothèque de méthodes de vérification standard, Validation présente les avantages suivants :

• Règles de validation intégrées : elle dispose de 19 types de règles de validation intégrées telles que les nombres requis, les e-mails, les URL et les numéros de carte de crédit.
• Validation personnalisée. règles : cela peut être très pratique Personnaliser les règles de validation
• Invite d'informations de vérification simple et puissante : l'invite d'informations de vérification est par défaut et fournit la fonction de personnalisation des informations d'invite par défaut
• Vérification en temps réel : la vérification peut être déclenchée via une touche ou brouiller les événements, pas seulement lorsque le formulaire est soumis, il est temps de le vérifier.

(2) Adresse de téléchargement du plug-in : http://bassistance.de/jquery-plugins/jquery-plugin-validation/

L'adresse API officielle du plug-in de validation est : http://docs.jquery.com/Plugins/Validation

2. Plug-in de formulaire jQuery : Form

(1) Introduction au plug-in Form

Le plug-in jQuery Form est un excellent plug-in de formulaire Ajax. qui peut être utilisé très facilement et sans intrusion. Mettre à jour les formulaires HTML pour prendre en charge Ajax. jQuery a deux méthodes principales - ajaxForm() et ajaxSubmit(), qui combinent des fonctionnalités allant du contrôle des éléments du formulaire à la décision sur la manière de gérer le processus de soumission. De plus, le plug-in inclut également d'autres méthodes : formToArray(), formSerialize(), fieldSerialize(), fieldValue(), clearForm(), resetForm(), etc.

(2) Téléchargement du plug-in de formulaire jQuery Form adresse : http://jquery.malsup.com/form/. Les lecteurs peuvent télécharger le plug-in et consulter des instructions de démarrage simples, l'API, un exemple de code, etc. sur le site Web.

3. Plug-in d'événement de liaison dynamique : livequery

(1) Introduction au plug-in livequery

La fonction de liaison d'événements de jQuery permet la séparation complète du code jQuery et du code HTML, rendant la relation hiérarchique du code plus claire et plus facile à maintenir. Cependant, pour les éléments HTML chargés dynamiquement dans la page, les événements doivent à chaque fois être liés à ces éléments, ce qui est très gênant. De là est né un nouveau plug-in, à savoir livequery, qui peut être utilisé pour enregistrer l'heure de l'élément DOM correspondant ou déclencher la fonction de rappel. Non seulement l'événement sera lié à l'élément correspondant au sélecteur actuel, mais également aux éléments ajoutés ultérieurement via JavaScript. Lorsque l'élément ne correspond plus au sélecteur, livequery annulera automatiquement l'enregistrement de l'événement, de sorte que les développeurs n'auront plus besoin de prêter attention à la source de l'élément HTML, mais uniquement à la manière d'écrire ses événements liés.

Sélectionnez un élément DOM via le sélecteur jQuery et le plug-in livequery le conservera dans toute la plage DOM en temps réel. Cela signifie que, que l'élément ait déjà existé ou qu'il ait été chargé dynamiquement ultérieurement, l'événement sera lié, tout comme le style CSS de l'élément. En même temps, ce plug-in remplit ces fonctions sans utiliser presque aucune ressource.
(2) Adresse de téléchargement du plug-in jQuery livequery : http://plugins.jquery.com/livequery/

4 Plug-in jQuery UI

(1) Introduction de l'interface utilisateur jQuery :

L'interface utilisateur jQuery est dérivée d'un. Plug-in jQuery——Interface. La première version du plug-in Interface était la 1.2, qui ne prenait en charge que la version jQuery 1.1.2. Plus tard, certaines personnes ont reconstruit la plupart des représentants de l'interface basés sur l'API jQuery 1.2 et unifié l'API. En raison d'améliorations majeures, le numéro de version n'est pas 1.3 mais passe directement à 1.5 et est renommé jQuery UI.

L'interface utilisateur de jQuery est principalement divisée en 3 parties : interaction, widgets et bibliothèque d'effets

• interaction. Voici quelques contenus liés à l'interaction avec la souris. Y compris le glisser, le placement, le zoom, la sélection et le tri, etc. Certains widgets sont créés sur la base de ces composants interactifs. Cette bibliothèque nécessite une bibliothèque principale jQuery UI - ui.core.js pour prendre en charge les widgets
• . Voici principalement quelques extensions d'interface. Il comprend la navigation en accordéon, la saisie semi-automatique, le sélecteur de couleurs, la boîte de dialogue, le curseur, l'étiquette, le calendrier, la loupe, la barre de progression et le contrôleur de rotation. Cette bibliothèque nécessite une bibliothèque principale jQuery UI - ui.core.js prend en charge la bibliothèque

• effects. Cette bibliothèque est utilisée pour fournir des effets d'animation riches, afin que l'animation ne soit plus limitée à la méthode animate(). La bibliothèque d'effets possède son propre ensemble de base, effect.core.js, et ne nécessite pas la prise en charge de la bibliothèque principale de jQuery ui.core.js

(2) L'adresse de téléchargement du plug-in jQuery UI est : http https://jqueryui.com/download /all/. Sélectionnez le lien "jQuery UI 1.6rc2" pour télécharger directement le package complet, y compris le code source, la version de distribution et le pilote de test.

5. Plugin de gestion des cookies : Cookie

(1) Présentation du plug-in Cookie

Le cookie est un petit fichier texte déposé sur le client par le concepteur du site. Les cookies peuvent offrir de nombreuses commodités aux utilisateurs. Par exemple, les sites Web commerciaux stockent les listes de produits que les utilisateurs ont consultées, ou les sites Web portails mémorisent les types d'actualités que les utilisateurs aiment parcourir. Lorsque l'utilisateur est en cours d'exécution, son statut de connexion peut également être stocké, afin que l'utilisateur n'ait pas à saisir ces informations à chaque fois qu'il visite le site Web.

jQuery fournit un plug-in très simple pour gérer les cookies sur le site, et le nom du plug-in est également Cookie

(2) Adresse de téléchargement du plug-in jQuery Cookie : http://plugins.jquery. .com/cookie/

6 , Plug-in de fenêtre modale : SimpleModal

(1) Introduction au plug-in SimpleModal

SimpleModal est un plug-in jQuery léger, qui fournit une interface puissante pour le développement de fenêtres modales, qui peut être utilisé comme cadre de fenêtre modale. SimpleModal est très flexible et peut créer tout ce que vous pouvez imaginer, et vous n'avez pas besoin de prendre en compte les problèmes entre navigateurs lors du développement de l'interface utilisateur.

(2) Adresse de téléchargement du plug-in SimpleModal : http://www.ericmmartin.com/projects/simplemodal/

7. Plug-in d'image à chargement paresseux : lazyload

Lay chargement des images ou commencer le chargement. uniquement lorsque certaines conditions sont remplies Image

URL de téléchargement : https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js

8, plug-in fly

Ajouter un panier effet et réaliser un mouvement parabolique

Adresse de téléchargement : https://github.com/amibug/fly

9, qrcode

plug-in jquery qui peut générer un code QR matriciel QRCode sur le client

Adresse de téléchargement : https ://github.com/lrsjng/ jquery-qrcode

10 et spinner

peuvent facilement ajouter ou soustraire le nombre de paniers, et prennent également en charge l'utilisation des touches haut et bas du clavier pour modifier le nombre d'achats. chariots.

Adresse de téléchargement : https://github.com/vsn4ik/jquery.spinner

etc. . .

【Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo web front-end】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!