Anwendung und Analyse benutzerdefinierter jQuery-Funktionen

Dieses Mal werde ich Ihnen die Anwendung und Analyse von jQuerybenutzerdefinierten Funktionen sowie die Vorsichtsmaßnahmen für die Verwendung der benutzerdefinierten jQuery-Funktion vorstellen. Das Folgende ist ein praktischer Fall, werfen wir einen Blick darauf .

benutzerdefinierte jQuery-Funktion
1. Wie erweitere ich die jQuery-Funktion?
jQuery verfügt über zwei Arten von benutzerdefinierten Funktionserweiterungen: Eine davon ist die Funktionsentwicklung auf Klassenebene. Dies entspricht der Behandlung von jQuery als Klasse und der Erweiterung von Funktionen auf die Klasse selbst, auch globale Funktion genannt. Die globalen Funktionen von jQuery sind Funktionen, die zum jQuery--Namespace gehören. Die andere ist die Funktionsentwicklung auf Objektebene, bei der den vom jQuery-Selektor generierten Objekten Methoden hinzugefügt werden. Im Folgenden wird die Entwicklung der beiden Funktionen ausführlich beschrieben.

1).Globale Funktionsentwicklung:
Das direkteste Verständnis der Plug-In-Entwicklung auf Klassenebene besteht darin, Klassenmethoden zur jQuery-Klasse hinzuzufügen, was als Hinzufügen statischer Methoden verstanden werden kann. Ein typisches Beispiel ist die Funktion jQuery.AJAX(), die im jQuery-Namespace definiert ist. Die Plug-in-Entwicklung auf Klassenebene kann in den folgenden Formen erweitert werden:
a. Eine neue globale Funktion hinzufügen
Um eine globale Funktion hinzuzufügen, müssen wir sie nur wie folgt definieren:

   jQuery.test = function() { 
        alert(‘This is a test!!!’); 
     };

Dann kann es durch Aufruf von $.test(); ausgeführt werden.
b. Mehrere globale Funktionen hinzufügen
Um mehrere globale Funktionen hinzuzufügen, können Sie die folgende Definition verwenden:

  jQuery.test = function() { 
        alert(‘This is a test!!!’); 
     };  
     jQuery.test1 = function() { 
            alert(‘This is a test1!!!’); 
         };

Die Aufrufmethode ist dieselbe wie oben.

c. Verwenden Sie jQuery.extend(object)　

jQuery.extend({ 
         test:function() { 
                alert(‘This is a test!!!’); 
         }, 
         test1: function() { 
                alert(‘This is a test1!!!’); 
             },  
         add:function(a,b){ 
             return a+b; 
         } 
});

2). 🎜>a

Hinweis: Diese Methode kann auch direkt mit jQuery.fn.extend definiert werden. Dies dient dazu, das Dollarzeichen auf einen Namensraum zu beschränken Definitionsprozess zur Vermeidung von Konflikten mit Das $-Symbol steht im Konflikt mit anderen Bibliotheken und hat keine weiteren Auswirkungen.

(function(){
.fn.extend({ 
              sayHello:function(){ 
                    alert(‘sayHello’); 
            } 
            }) ; 
          })(jQuery);

b. Akzeptieren Sie Optionsparameter, um das Verhalten des Plug-Ins zu steuern.

Wenn eine benutzerdefinierte Funktion viele Parameter übergeben muss, gibt es zu viele Parameter und eine schlechte Lesbarkeit. Wir können die Übergabe eines Objekts in Betracht ziehen Beispiel: Wir müssen eine Funktion definieren, die die Hintergrundfarbe und Textfarbe für p festlegt. Wir können es so schreiben:

Rufen Sie den Funktionstestcode auf:

 $.fn.extend({ 
             setColor:function(options,callback){ 
               var defaults = { 
                               fontcolor: ‘red’, 
                               background: ‘yellow’ 
                             };
            $.extend(defaults, options); //这句话是将default和options合并成一个对象
            //设置样式
            console.log(this);
            $(this).css('background-color',defaults.background);
            $(this).css('color',defaults.fontcolor);
        }     
        }) ;

Wir sehen den Tabellenhintergrund rot, die Schriftarten sind alle blau.

       var options={ 
                   fontcolor: ‘blue’, 
                   background: ‘red’  
                   }; 
       $(function(){
        $(".table").setColor(options);
    });

2. Zusammenfassung der AnalyseIm API-Handbuch von jQuery sehen wir, dass es sich bei „Extend“ tatsächlich um zwei verschiedene Methoden handelt, die auf jQuery und jQuery.fn gemountet sind, obwohl jQuery in jQuery .extend() und jQuery.fn enthalten ist .extend() werden mit demselben Code implementiert, ihre Funktionen sind jedoch unterschiedlich. Offizielle Erklärung:

jQuery-Instanzmethode)

jQuery.extend(): Merge the contents of two or more objects together into the first object.(把两个或者更多的对象合并到第一个当中) 
jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把对象挂载到jQuery的prototype属性，来扩展一个新的

Es ist ersichtlich, dass jQuery statische Methoden und Instanzmethoden hat, also jQuery.extend() und jQuery.fn.extend() dass eines zum Erweitern statischer Methoden und das andere zum Erweitern von Instanzmethoden verwendet wird.

Der Quellcode des jQuery-Anpassungsteils lautet wie folgt:

JavaScript-Methoden sind ebenfalls Objekte, daher gilt die sogenannte Erweiterungsfunktion für die beiden Objekte jQuery.extend und jQuery .fn.extend Um ein neues Attribut zu erweitern, ist der formale Parameter unsere benutzerdefinierte Funktion, die schließlich kopiert und als Zielobjekt zurückgegeben und in das jQuery.extend-Objekt oder das jQuery.fn.extend-Objekt zusammengeführt wird Dies entspricht im Wesentlichen dem Hinzufügen eines neuen Attributs zur jQuery-Klasse selbst oder dem Hinzufügen einer Methode zum Prototypobjekt des jQuery-Objekts.

jQuery.extend = jQuery.fn.extend = function(obj){ 
             //obj是传递过来扩展到this上的对象 
             var target=this; 
             for (var name in obj){ 
             //name为对象属性 
             //copy为属性值 
             copy=obj[name]; 
             //防止循环调用 
             if(target === copy) continue; 
             //防止附加未定义值 
             if(typeof copy === ‘undefined’) continue; 
             //赋值 
             target[name]=copy; 
             } 
             return target; 
            }

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

So verwenden Sie das Paging-Plug-in von jquery

So erstellen Sie einen Lupeneffekt für JD Produktdetails

So erzielen Sie den Ballsprungeffekt mit Javascript

Das obige ist der detaillierte Inhalt vonAnwendung und Analyse benutzerdefinierter jQuery-Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!