jQuery custom function application and parsing

This time I will bring you jQueryCustom functionApplication and analysis, what are the Notes when using jQuery custom function, the following is a practical case, let’s take a look.

jQuery custom function
1. How to extend jQuery functions?
jQuery has two kinds of custom function extensions: one is class-level function development, which is equivalent to treating jQuery as a class and extending functions to the class itself, also called global function. jQuery's global functions are functions that belong to the jQuery namespace. The other is object-level function development, which is to add methods to the objects generated by the jQuery selector. The following is a detailed description of the development of the two functions.

1). Global function development:
The most direct understanding of class-level plug-in development is to add class methods to the jQuery class, which can be understood as adding static methods. A typical example is the jQuery.AJAX() function, which is defined in the jQuery namespace. Plug-in development at the class level can be extended in the following forms:
a. Add a new global function
To add a global function, we only need to define it as follows:

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

Then by calling $.test(); can be run.
b. Add multiple global functions
To add multiple global functions, you can use the following definition:

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

The calling method is the same as above.

c. Use 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). Object-level function development:
Object-level function development can be done in the following two ways
a.

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

Note: This method can also be defined directly using jQuery.fn.extend. This is written to limit the dollar sign to a namespace. You can continue to use this symbol during the definition process to prevent $ from other libraries. Symbol conflict, no other effect.

b. Accept options parameters to control the behavior of the plug-in
When a custom function needs to pass many parameters, there are too many parameters and poor readability. We can consider passing an object, for example, We need to define a function that sets the background color and text color for p. We can write it like this:

 $.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);
        }     
        }) ;

Call the function test code:

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

We will see that the table background is red and the fonts are blue color.

2. Analysis Summary
In jQuery’s API manual, we see that extend is actually two different methods mounted on jQuery and jQuery.fn, although jQuery inside jQuery .extend() and jQuery.fn.extend() are implemented with the same code, but their functions are different. Official explanation:

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属性，来扩展一个新的

jQuery instance method)
It can be seen that jQuery has static methods and instance methods, so jQuery.extend() and jQuery.fn.extend() The difference is that one is used to extend static methods and the other is used to extend instance methods.
jQuery custom part source code is as follows:

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; 
            }

JavaScript methods are also objects, so the so-called extension function is to extend new objects to jQuery.extend and jQuery.fn.extend. Attributes, formal parameters are our custom functions, which will eventually be copied and returned as the target object, and merged into the jQuery.extend object, or jQuery.fn.extend object, which is essentially equivalent to adding methods or methods to the jQuery class itself. Add methods to the prototype object of the jQuery object.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use jquery’s paging plug-in

How to create a magnifying glass effect for JD product details

How to achieve the ball beating effect with javascript

The above is the detailed content of jQuery custom function application and parsing. For more information, please follow other related articles on the PHP Chinese website!