Exemple d'explication du développement du plug-in jQuery
Dans le travail de développement réel, vous rencontrerez toujours des besoins professionnels en matière d'effets d'affichage tels que le défilement, la pagination, le calendrier, etc. Pour ceux qui ont été exposés à jQuery
et sont familiers avec l'utilisation de jQuery
, le premier Ce qui me vient à l'esprit est de trouver les plug-ins actuels. Il existe jQuery
pour répondre aux besoins d'affichage correspondants. Il existe une variété de jQuery
plug-ins parmi lesquels choisir pour certains composants couramment utilisés dans les pages actuelles. Il existe également de nombreux sites Web sur Internet qui collectent spécifiquement des jQuery
plug-ins. L'utilisation des plug-ins jQuery
peut en effet apporter de la commodité à notre travail de développement, mais si vous ne l'utilisez que simplement et ne comprenez pas les principes, vous rencontrerez des problèmes lors de l'utilisation ou personnaliserez le développement du plug-in. Le but de cet article est de comprendre rapidement les principes de développement des jQuery
plug-ins et de maîtriser les compétences de base du jQuery
développement.
Avant de développer des jQuery
plug-ins, vous devez d'abord connaître deux questions : Qu'est-ce qu'un jQuery
plug-in ? jQuery
Comment utiliser le plug-in ?
La première question est que le plug-in jQuery
est une méthode utilisée pour étendre l'objet prototype jQuery
En termes simples, le plug-in jQuery
est une méthode de l'objet jQuery
. En fait, après avoir répondu à la première question, vous connaîtrez également la réponse à la deuxième question. La façon d'utiliser le plug-in jQuery
est d'appeler la méthode objet jQuery
.
Regardons d'abord un exemple : $("a").css("color","red")
. Nous savons que chaque objet jQuery
contiendra la méthode d'opération jQuery
définie dans DOM
. Ici, la méthode $
est utilisée pour sélectionner l'élément a
et renvoyer un objet a
du jQuery
. élément. Cet objet est Vous pouvez utiliser les méthodes d'action jQuery
définies dans DOM
. Alors, comment l'objet jQuery
obtient-il ces méthodes ? En fait, jQuery
définit un objet jQuery.fn
en interne. En regardant le code source de jQuery
, vous pouvez trouver jQuery.fn=jQuery.prototype
, ce qui signifie que l'objet jQuery.fn
est l'objet prototype de jQuery
, et le jQuery
. 🎜> les méthodes de fonctionnement de DOM
sont toutes définies sur l'objet jQuery.fn
, puis l'objet jQuery
peut hériter de ces méthodes via le prototype.
Plug-in jQuery de base
Avec les connaissances ci-dessus, nous pouvons écrire un simple jQuery
plug-in. Si j'ai maintenant besoin d'un plug-in jQuery
pour changer la couleur du contenu de l'étiquette, je peux implémenter le plug-in comme suit :
$.fn.changeStyle = function(colorStr){ this.css("color",colorStr); }
puis utiliser le plug-in comme suit : $("p").changeStyle("red");
Lorsque le plug-in
est appelé, le this
à l'intérieur du plug-in est l'objet jQuery
appelant actuellement le plug-in. Dans ce cas, chaque balise sélectionnée à l'aide de la méthode $()
. utilisera changeStyle()
lors de l'appel de la méthode du plug-in css()
pour réinitialiser le style color
.
Plug-in jQuery qui répond aux appels en chaîne
Les appels en chaîne sont une fonctionnalité majeure de jQuery
Un plug-in général doit suivre le style jQuery
et répondre aux exigences des appels en chaîne. La façon d'implémenter les appels en chaîne est également très simple :
$.fn.changeStyle = function(colorStr){ this.css("color",colorStr); return this; }
Ensuite, lorsque vous l'utilisez, vous pouvez appeler en chaîne d'autres méthodes : $("p").changeStyle("red").addClass("red-color");
Le point clé pour implémenter les appels en chaîne est simplement une ligne de Code return this
, si cette ligne de code est ajoutée au plug-in, une fois le plug-in exécuté, l'objet jQuery
actuel sera renvoyé, puis d'autres méthodes jQuery
pourront être appelées après le méthode de plug-in.
Plug-in jQuery pour éviter la pollution du symbole $
Il existe de nombreuses bibliothèques js
qui utilisent le symbole $
, bien que jQuery
puisse utiliser la méthode jQuery.noConflict()
pour céder les droits d'utilisation. du symbole $, s'il est défini Lorsque les plug-ins sont définis à l'aide d'objets $.fn
, l'utilisation de ces plug-ins sera affectée par d'autres bibliothèques $
qui utilisent des variables js
. Dans ce cas, nous pouvons utiliser la fonction d'exécution immédiate pour encapsuler le plug-in en passant des paramètres. La forme est la suivante :
(function($){ $.fn.changeStyle = function(colorStr){ this.css("color",colorStr); return this; } }(jQuery));
Parce qu'une fonction d'exécution immédiate est utilisée, le $
n'appartient à ce moment qu'au périmètre de fonction de cette fonction d'exécution immédiate, évitant ainsi la pollution du $
symbole.
Plug-in jQuery pouvant accepter des paramètres
En continuant avec l'exemple ci-dessus, si je souhaite également ajouter une fonction à ce plug-in pour définir la taille du texte du contenu de l'élément d'étiquette, alors je peux faites-le comme ceci :
(function($){ $.fn.changeStyle = function(colorStr,fontSize){ this.css("color",colorStr).css("fontSize",fontSize+"px"); return this; } }(jQuery));
La méthode de transmission des paramètres du plug-in ci-dessus convient aux situations où il y a relativement peu de paramètres. S'il y a de nombreux paramètres qui doivent être transmis au plug-in, nous le faisons. peut définir un objet paramètre, puis placer les paramètres qui doivent être transmis au plug-in dans l'objet paramètre. Le plug-in est défini comme suit :
(function($){ $.fn.changeStyle = function(option){ this.css("color",option.colorStr).css("fontSize",option.fontSize+"px"); return this; } }(jQuery));
使用方式:$("p").changeStyle({colorStr:"red",fontSize:14});
把参数放到一个对象中传给插件还有一个好处就是我们可以在插件内部为一些参数定义一些缺省值,例如:
(function($){ $.fn.changeStyle = function(option){ var defaultSetting = { colorStr:"green",fontSize:12}; var setting = $.extend(defaultSetting,option); this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px"); return this; } }(jQuery));
上面的代码用到了$.extend
方法,这个方法在这里的用法就是合并两个对象,即把后面一个对象的存在的属性值赋值给第一个对象,具体用法可以参考这里。$.extend
方法还有一种作用是用来扩展jQuery
对象本身。
这样定义的插件,我们在使用时如果不传fontSize
,那么使用这个插件的jQuery
对象标签的内容会被设置成默认的12px
。
使用方式:$("p").changeStyle({colorStr:"red"});
注意:在为插件定义默认参数时,一定要把默认参数写在插件方法内部,这样默认参数的作用域就在插件内部。
总结
定义插件的方式除了上面说的用$.fn
来定义,还有另外一种方式来定义插件,那就是使用$.fn.extend
方法。类似下面的写法:
(function($){ $.fn.extend({ changeStyle:function(option){ var defaultSetting = { colorStr:"green",fontSize:12}; var setting = $.extend(defaultSetting,option); this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px"); return this; } }); }(jQuery));
PS:
$.extend
方法和$.fn.extend
方法都可以用来扩展jQuery
功能,通过阅读jQuery
源码我们可以发现这两个方法的本质区别,那就是$.extend
方法是在jQuery
全局对象上扩展方法,$.fn.extend
方法是在$
选择符选择的jQuery
对象上扩展方法。所以扩展jQuery
的公共方法一般用$.extend
方法,定义插件一般用$.fn.extend
方法。
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!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Cet outil de programmation assistée par l'IA a mis au jour un grand nombre d'outils de programmation assistée par l'IA utiles à cette étape de développement rapide de l'IA. Les outils de programmation assistés par l'IA peuvent améliorer l'efficacité du développement, améliorer la qualité du code et réduire les taux de bogues. Ils constituent des assistants importants dans le processus de développement logiciel moderne. Aujourd'hui, Dayao partagera avec vous 4 outils de programmation assistés par l'IA (et tous prennent en charge le langage C#). J'espère que cela sera utile à tout le monde. https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot est un assistant de codage IA qui vous aide à écrire du code plus rapidement et avec moins d'effort, afin que vous puissiez vous concentrer davantage sur la résolution de problèmes et la collaboration. Git

Quel est le répertoire d’installation de l’extension du plug-in Chrome ? Dans des circonstances normales, le répertoire d'installation par défaut des extensions de plug-in Chrome est le suivant : 1. L'emplacement du répertoire d'installation par défaut des plug-ins Chrome dans Windows XP : C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\ Default\Extensions2. chrome dans Windows7 Emplacement du répertoire d'installation par défaut du plug-in : C:\Users\username\AppData\Local\Google\Chrome\User

Lorsque les utilisateurs utilisent le navigateur Edge, ils peuvent ajouter des plug-ins pour répondre davantage à leurs besoins. Mais lors de l'ajout d'un plug-in, cela indique que ce plug-in n'est pas pris en charge. Comment résoudre ce problème ? Aujourd'hui, l'éditeur partagera avec vous trois solutions. Venez l'essayer. Méthode 1 : essayez d’utiliser un autre navigateur. Méthode 2 : Le Flash Player du navigateur peut être obsolète ou manquant, ce qui rend le plug-in non pris en charge. Vous pouvez télécharger la dernière version sur le site officiel. Méthode 3 : Appuyez simultanément sur les touches « Ctrl+Shift+Delete ». Cliquez sur "Effacer les données" et rouvrez le navigateur.

Le 3 mars 2022, moins d'un mois après la naissance de Devin, le premier programmeur d'IA au monde, l'équipe NLP de l'Université de Princeton a développé un agent SWE pour programmeur d'IA open source. Il exploite le modèle GPT-4 pour résoudre automatiquement les problèmes dans les référentiels GitHub. Les performances de l'agent SWE sur l'ensemble de tests du banc SWE sont similaires à celles de Devin, prenant en moyenne 93 secondes et résolvant 12,29 % des problèmes. En interagissant avec un terminal dédié, SWE-agent peut ouvrir et rechercher le contenu des fichiers, utiliser la vérification automatique de la syntaxe, modifier des lignes spécifiques et écrire et exécuter des tests. (Remarque : le contenu ci-dessus est un léger ajustement du contenu original, mais les informations clés du texte original sont conservées et ne dépassent pas la limite de mots spécifiée.) SWE-A

Didacticiel d'application mobile de développement du langage Go Alors que le marché des applications mobiles continue de croître, de plus en plus de développeurs commencent à explorer comment utiliser le langage Go pour développer des applications mobiles. En tant que langage de programmation simple et efficace, le langage Go a également montré un fort potentiel dans le développement d'applications mobiles. Cet article présentera en détail comment utiliser le langage Go pour développer des applications mobiles et joindra des exemples de code spécifiques pour aider les lecteurs à démarrer rapidement et à commencer à développer leurs propres applications mobiles. 1. Préparation Avant de commencer, nous devons préparer l'environnement et les outils de développement. tête

Le développement d'Android est un travail chargé et passionnant, et le choix d'une distribution Linux adaptée au développement est particulièrement important. Parmi les nombreuses distributions Linux, laquelle est la plus adaptée au développement Android ? Cet article explorera ce problème sous plusieurs aspects et donnera des exemples de code spécifiques. Tout d’abord, jetons un coup d’œil à plusieurs distributions Linux actuellement populaires : Ubuntu, Fedora, Debian, CentOS, etc. Elles ont toutes leurs propres avantages et caractéristiques.

En tant que langage de programmation rapide et efficace, le langage Go est très populaire dans le domaine du développement back-end. Cependant, peu de gens associent le langage Go au développement front-end. En fait, l’utilisation du langage Go pour le développement front-end peut non seulement améliorer l’efficacité, mais également ouvrir de nouveaux horizons aux développeurs. Cet article explorera la possibilité d'utiliser le langage Go pour le développement front-end et fournira des exemples de code spécifiques pour aider les lecteurs à mieux comprendre ce domaine. Dans le développement front-end traditionnel, JavaScript, HTML et CSS sont souvent utilisés pour créer des interfaces utilisateur.

« Comprendre VSCode : à quoi sert cet outil ? » 》En tant que programmeur, que vous soyez débutant ou développeur expérimenté, vous ne pouvez pas vous passer de l'utilisation d'outils d'édition de code. Parmi les nombreux outils d'édition, Visual Studio Code (VSCode en abrégé) est très populaire parmi les développeurs en tant qu'éditeur de code open source, léger et puissant. Alors, à quoi sert exactement VSCode ? Cet article approfondira les fonctions et les utilisations de VSCode et fournira des exemples de code spécifiques pour aider les lecteurs.
