Heim >Web-Frontend >js-Tutorial >Welche Methoden gibt es zum Erstellen eines JQuery-Plug-Ins? So erstellen Sie ein JQuery-Plug-In
In diesem Artikel erfahren Sie, welche Methoden zum Erstellen von JQuery-Plug-Ins gelten. Die Methode zum Erstellen eines JQuery-Plug-Ins hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.
1. Erweitern Sie jQuery durch $.extend()
2 .fn-Methode
3. Verwenden Sie die Widget-Factory-Methode der jQuery-Benutzeroberfläche, um
über $.widget() zu erstellen. Sie wird nach der Erstellung über $.myfunction() aufgerufen kann für das angegebene Element nicht aufgerufen werden.
Methode 3 ist im Vergleich zu Methode 2 zu kompliziert.
Methode 2 ist die häufig verwendete Methode zum Erstellen von JQ-Plug-Ins. Kann bestimmte Elemente bearbeiten. Zum Beispiel $('#title').myfunction();
$.fn.myfunction = function() { //在这里面,this指的是用jQuery选中的元素 //example :$('a'),则this=$('a') this.css('color', 'red'); }
Wenn Sie Kettenaufrufe unterstützen möchten, geben Sie es einfach zurück.
$.fn.myfunction = function() { //在这里面,this指的是用jQuery选中的元素 //example :$('a'),则this=$('a') return this.css('color', 'red'); }
$.fn.myPlugin = function(options) { var defaults = {//设置默认值 'color': 'red', 'fontSize': '12px' }; var settings = $.extend(defaults, options);//这种方法会使第一个参数会被修改,为了保持变量defaults的值不变应该使用以下代码 //var settings = $.extend({},defaults, options);//在extend方法的第一个参数添加一个空对象。 return this.css({ 'color': settings.color, 'fontSize': settings.fontSize }); }
Für zukünftigen Code Wartung und Lesbarkeit, wir Plug-ins können mit einem objektorientierten Ansatz entwickelt werden.
var Beautifier = function(ele, opt) { this.$element = ele, //获取当前选中的jq对象。 this.defaults = { 'color': 'red', 'fontSize': '12px' }, this.options = $.extend({}, this.defaults, opt) } //定义Beautifier的方法 Beautifier.prototype = { beautify: function() { return this.$element.css({ 'color': this.options.color, 'fontSize': this.options.fontSize }); } } //在插件中使用Beautifier对象 $.fn.myPlugin = function(options) { //创建Beautifier的实体 var beautifier = new Beautifier(this, options); //调用其方法 return beautifier.beautify(); }
Verwandte Empfehlungen:
jQuery einfaches Scroll-Plug-in
Code-Analyse des jQuery-Erstellungs-Plug-ins_jquery
Detaillierte Erläuterung der jQuery-Plug-in-Entwicklungsmethoden
10 Vorschläge, die Ihnen helfen, bessere jQuery-plug-ins_jquery zu erstellen
Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es zum Erstellen eines JQuery-Plug-Ins? So erstellen Sie ein JQuery-Plug-In. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!