Informieren Sie sich über Beispiele für jQuery-Plug-ins

Klassifizierung von JQuery-Plug-Ins

jQueryEs gibt viele Plug-Ins, einschließlich UI Klasse, Formularvalidierung, Eingabeklasse, Spezialeffektklasse, Ajax Klasse, Gleitklasse, Navigationsklassen, Werkzeugklassen, Animationsklassen usw.

jQueryPlug-Ins werden hauptsächlich in drei Kategorien unterteilt:

1、封装对象方法的插件：也就是基于某个DOM元素的jQuery对象，局部性
2、封装全局函数的插件：将独立的函数添加到jquery的命名空间之下。jquery.trim()就是jquery内部作为全局函数的插件添加到内核上去的。
3、选择器插件：扩充自己喜欢的一些选择器。类似于.toggle()

Grundlegende Punkte von Plug-Ins

 1. 插件的文件名推荐为 jquery.[插件名].js，例如jquery.validate.js
 2. 所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上
 3. 在插件内部，this指向的是当前通过选择器获取的jQuery对象，而不像一般的方法那样，例如click()方法，内部的this指向的是DOM元素
 4. 可以通过this.each来遍历所有元素
 5. 所有的方法或函数插件，都应当以分号结尾，否则压缩时可能出问题，有的为了更加稳妥些，在插件的开始处加上一个分号
 6. 插件应该返回一个jQuery对象，这样可以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量，例如字符串或者数组等
 7. 尽量利用闭包技巧历来避免变量名的冲突
 8. 引入的自定义插件必须在jQuery库后面

Plug-In-Entwicklungsmethoden

jQueryEs gibt drei Hauptmethoden für die Plug-In-Entwicklung:

通过$.extend()来扩展jQuery
通过$.fn 向jQuery添加新的方法
通过$.widget()应用jquery ui的部件工厂方式创建

Normalerweise verwenden wir die zweite Methode für die einfache Plug-In-Entwicklung, und die erste Methode besteht darin, eine statische Methode hinzuzufügen zum jQuery-Namespace und Wir können kein DOM-Element auswählen und dann diese Methode aufrufen. Der dritte Typ wird nicht häufig verwendet und ist komplizierter.

Die Struktur des Plug-Ins

Wenn wir mit dem Schreiben des jQuery Plug-Ins beginnen, müssen wir die Grundstruktur des Plug-Ins verstehen Im Plug-in werden alle jQuery Plug-ins als Methoden von jQuery.fn Objekten deklariert:

jQuery.fn.showPlugin = function () {
      //code here
};

Wir verwenden den folgenden Code, um Plug-ins zu verwenden:

$("#plugin").showPlugin();

Hier habe ich $ nicht verwendet, um Namenskonflikte zu vermeiden. Wenn Sie $ verwenden möchten, können Sie den Plug-in-Code wie folgt in eine selbstausführende anonyme Funktion kapseln , und übergeben Sie dann die Parameter jQuery

(function($){
    jQuery.fn.showPlugin = function () {
        //code here
    };
})(jQUery);

$.extend

.extend() ermöglicht die Erweiterung des Basisobjekts um ein oder mehrere Objekte. Die Erweiterungsmethode ist das Zusammenführen Fügen Sie die Objekte auf der rechten Seite der Reihe nach in das Basisobjekt (das erste Objekt auf der linken Seite) ein.

;(function($){
    $.extend({
        'nav' : function () {

        }
    })
})(jQuery);

Wir verwenden diese globale Methode wie folgt:

$.nav();

Zuvor (siehe: Eine kurze Analyse des gesamten jQuery-Frameworks und der Implementierung (Teil 1)) haben wir gesagt, dass $.extend ist global und $.fn.extend ist lokal. Der Grund, warum ein Semikolon vorangestellt wird, besteht darin, zu verhindern, dass die zuvor eingeführte js-Datei ohne das Hinzufügen eines Semikolons

$.fn.myPlugin = function() {
    //在这里面,this指的是用jQuery选中的元素
    //example :$('a'),则this=$('a')
    this.css('color', 'red');
}

this auf Represents verweist die vom jQuery-Selektor zurückgegebene Sammlung. Das this im Plug-in wurde einer Kapselungsverarbeitung unterzogen und this stellt das jQuery-Objekt dar. Es besteht keine Notwendigkeit, $() erneut zum Verpacken des

Kettenaufrufs

zu verwenden. Um den Plug-in-Implementierungskettenaufruf durchzuführen, müssen Sie nur returndieses Objekt

$.fn.myPlugin = function() {
    this.css('color', 'red');
    return this.each(function() {
        //对每个元素进行操作
        $(this).append(' ' + $(this).attr('href'));
    }))
}

Verwenden Sie

return, um unseren Kettenbetrieb zu erreichen. this.each(function () {}

Erhält mehrere Parameter

$.fn.myPlugin = function(options) {    //经常用options表示有多个参数。
    var defaults = {
        'color': 'red',
        'fontSize': '12px'
    };
    var settings = $.extend(defaults, options);
    return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize
    });
}

Beim Aufruf verwendet die Schriftgröße den Standardwert im Plug-in:

Das obige ist der detaillierte Inhalt vonInformieren Sie sich über Beispiele für jQuery-Plug-ins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!