Maison > interface Web > Tutoriel H5 > le corps du texte

Application de fonction personnalisée jQuery et analyse

php中世界最好的语言
Libérer: 2018-03-14 15:35:50
original
2590 Les gens l'ont consulté

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 jQuery

1. 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.

1) Développement de fonctions globales :

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!!!’); 
     };
Copier après la connexion
Ensuite, il peut être exécuté en appelant $.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!!!’); 
         };
Copier après la connexion
La méthode d'appel est la même que ci-dessus.

c. Utilisez 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; 
         } 
});
Copier après la connexion
2). Développement de fonctions au niveau de l'objet :

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);
Copier après la connexion
Remarque : Cette méthode peut également être définie directement avec jQuery.fn.extend. Ceci est écrit pour limiter le signe dollar à un espace de noms. processus de définition pour éviter les conflits avec Le symbole $ entre en conflit avec d'autres bibliothèques et n'a aucun autre effet.

b. Accepter les paramètres d'options pour contrôler le comportement du plug-in

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);
        }     
        }) ;
Copier après la connexion
Appelez le code de test de la fonction :

       var options={ 
                   fontcolor: ‘blue’, 
                   background: ‘red’  
                   }; 
       $(function(){
        $(".table").setColor(options);
    });
Copier après la connexion
. Nous verrons le fond du tableau rouge, les polices sont toutes bleues.


Application de fonction personnalisée jQuery et analyse2. 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属性,来扩展一个新的
Copier après la connexion
Méthode d'instance jQuery)

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; 
            }
Copier après la connexion
Les méthodes JavaScript sont également des objets, donc la fonction dite d'extension est pour les deux objets jQuery.extend et jQuery .fn.extend Pour étendre un nouvel attribut, le paramètre formel est notre fonction personnalisée, qui sera éventuellement copiée et renvoyée en tant qu'objet cible, et fusionnée dans l'objet jQuery.extend ou l'objet jQuery.fn.extend, qui est essentiellement équivalent à ajouter un nouvel attribut à la classe jQuery elle-même ou à ajouter une méthode à l'objet prototype de l'objet jQuery.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

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!

É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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!