Maison > interface Web > js tutoriel > le corps du texte

jQuery propose deux méthodes pour développer des plug-ins

零下一度
Libérer: 2017-07-23 14:59:56
original
1305 Les gens l'ont consulté

jQuery propose deux méthodes pour développer des plug-ins, à savoir :

jQuery.fn.extend();

jQuery.extend();
Copier après la connexion

jQuery.fn

jQuery.fn = jQuery.prototype = {init: function( selector, context ) {//….//……};
Copier après la connexion

Il s'avère que jQuery.fn = jQuery.prototype Oui à. prototype Ce ne sera pas inconnu.
Bien que JavaScript n'ait pas de concept clair de classes, il est plus pratique d'utiliser des classes pour le comprendre.
jQuery est une classe très bien encapsulée. Par exemple, si nous utilisons l'instruction $("#btn1″), une instance de la classe jQuery sera générée.

jQuery.extend(object)

  • Ajoutez une méthode de classe à la classe jQuery, ce qui peut être compris comme l'ajout d'une méthode statique. Par exemple :

jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); //  2 
jQuery.max(4,5); //  5
Objectj Query.extend( target, object1, [objectN])
Copier après la connexion
  • Étendre un objet avec un ou plusieurs autres objets et renvoyer l'objet étendu

var settings = { validate: false, limit: 5, name: "foo" }; 
var options = { validate: true, name: "bar" }; 
jQuery.extend(settings, options); //结果:settings == { validate: true, limit: 5, name: "bar" }
jQuery.fn.extend(object);
Copier après la connexion

L'extension de jQuery.prototype consiste à ajouter des "fonctions membres" à la classe jQuery. Les instances de la classe jQuery peuvent utiliser cette « fonction membre ».
Par exemple, nous souhaitons développer un plug-in pour créer une zone d'édition spéciale. Lorsqu'on clique dessus, le contenu de la zone d'édition actuelle sera alerté. Vous pouvez faire ceci :

$.fn.extend({          
    alertWhileClick:function() {            
          $(this).click(function(){                 
                 alert($(this).val());           
           });           
     }       
});       
$("#input1").alertWhileClick(); // 页面上为:    
$("#input1") //为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。
Copier après la connexion

L'appel à jQuery.extend() n'étendra pas la méthode à l'instance de l'objet. La méthode pour le référencer doit également être implémentée via la classe jQuery, par exemple. comme jQuery.init() , et l'appel de jQuery.fn.extend() étend la méthode au prototype de l'objet, donc lorsqu'un objet jQuery est instancié, il dispose de ces méthodes. Cela se reflète partout. dans jQuery.js Une chose

jQuery.fn.extend = jQuery.prototype.extend
Copier après la connexion

Vous pouvez étendre un objet dans le prototype jQuery, qui est un mécanisme de plug-in.

(function( $ ){
$.fn.tooltip = function( options ) {
};
//等价于
var tooltip = {
function(options){
}
};
$.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip
})( jQuery );
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal