Cette fois, je vais vous présenter l'application et l'analyse de la fonction personnaliséejQuery, et quelles sont les précautions pour utiliser la fonction personnalisée jQuery. Ce qui suit est un cas pratique, jetons un coup d'œil. .
Fonction personnalisée jQuery1. Comment étendre la fonction jQuery ?
jQuery propose deux types d'extensions de fonctions personnalisées : l'une est le développement de fonctions au niveau de la classe, ce qui équivaut à traiter jQuery comme une classe et à étendre les fonctions à la classe elle-même, également appelée
fonction globale . Les fonctions globales de jQuery sont des fonctions qui appartiennent à l'espace de noms jQuery. L'autre est le développement de fonctions au niveau de l'objet, qui consiste à ajouter des méthodes aux objets générés par le sélecteur jQuery. Ce qui suit est une description détaillée du développement des deux fonctions.
La compréhension la plus directe du développement de plug-ins au niveau de la classe consiste à ajouter des méthodes de classe à la classe jQuery, ce qui peut être compris comme l'ajout de méthodes statiques. Un exemple typique est la fonction jQuery.AJAX(), qui est définie dans l'espace de noms jQuery. Le développement de plug-ins au niveau de la classe peut être étendu sous les formes suivantes :
a. Ajouter une nouvelle fonction globale
Pour ajouter une fonction globale, il suffit de la définir comme suit :
jQuery.test = function() { alert(‘This is a test!!!’); };
b. Ajouter plusieurs fonctions globales
Pour ajouter plusieurs fonctions globales, vous pouvez utiliser la définition suivante :
jQuery.test = function() { alert(‘This is a test!!!’); }; jQuery.test1 = function() { alert(‘This is a test1!!!’); };
jQuery.extend({ test:function() { alert(‘This is a test!!!’); }, test1: function() { alert(‘This is a test1!!!’); }, add:function(a,b){ return a+b; } });
Le développement de fonctions au niveau de l'objet peut être effectué des deux manières suivantes
a .
(function(){ .fn.extend({ sayHello:function(){ alert(‘sayHello’); } }) ; })(jQuery);
Quand une fonction personnalisée doit passer de nombreux paramètres, il y a trop de paramètres et une mauvaise lisibilité. On peut envisager de passer un objet, par exemple. Par exemple, nous devons définir une fonction qui définit la couleur d'arrière-plan et la couleur du texte pour p. Nous pouvons l'écrire comme ceci :
$.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); } }) ;
var options={ fontcolor: ‘blue’, background: ‘red’ }; $(function(){ $(".table").setColor(options); });
2. Résumé de l'analyse
Dans le manuel de l'API de jQuery, nous voyons que extend est en fait deux méthodes différentes montées sur jQuery et jQuery.fn, bien que jQuery soit à l'intérieur de jQuery .extend() et jQuery.fn. .extend() sont implémentés avec le même code, mais leurs fonctions sont différentes. Explication officielle :
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属性,来扩展一个新的
On peut voir que jQuery a des méthodes statiques et des méthodes d'instance, donc jQuery.extend() et jQuery.fn.extend() sont l'un est utilisé pour étendre les méthodes statiques et l'autre est utilisé pour étendre les méthodes d'instance.
Le code source de la partie personnalisation de jQuery est le suivant :
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; }
Comment utiliser le plug-in de pagination de jquery
Comment créer un effet de loupe pour JD détails du produit
Comment obtenir l'effet de battement de balle avec javascript
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!