jQuery自定义函数利用以及解析--百分百源码网

jQuery自定义函数利用以及解析-

发布时间：08/01 来源：未知浏览：关键词：

这次给大家带来jQuery自定义函数利用以及解析，运用jQuery自定义函数的注意事项是什么，下面就是实战案例，一起来看一下。这次给大家带来jQuery自定义函数利用以及解析，运用jQuery自定义函数的注意事项是什么，下面就是实战案例，一起来看一下。

jQuery自定义函数
1. 怎样扩展jQuery函数？
jQuery有两种自定义函数扩展：一种是类级另外函数开发，相当于将jQuery看做一个类，给类自身扩展函数，也叫作全局函数，。jQuery的全局函数是属于jQuery命名空间的函数，另一种是对象级另外函数开发，即给jQuery选中器发生的对象增加办法。下面就两种函数的开发做细致的注明。

1).全局函数开发：
类级另外插件开发最直接的了解就是给jQuery类增加类办法，可以了解为增加静态办法。典型的例子就是jQuery.AJAX()这个函数，将函数定义于jQuery的命名空间中。对于类级另外插件开发可以采纳如下几种情势进行扩展：
a. 增加一个新的全局函数
增加一个全局函数，我们只需如下定义：

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

然后通过调取$.test();即可运转。
b. 添加多个全局函数
增加多个全局函数，可采纳如下定义：

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

调取方式跟上面同样。

c. 运用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.

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

注明：该方式也可以直接用jQuery.fn.extend定义，这样写是为了将美圆符号限定在一个命名空间内，定义历程中可以继续运用该符号，防止与其他库的$符号冲突，没有其他作用。

b. 承受options参数以控制插件的行为
当自定义函数需要通报许多参数的时候，参数过多，可读性较差，我们可以考虑通报一个对象，比如说，我们要定义一个给p设定配景色和文字色彩的函数，可以这样写：

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

我们会看到table配景红色，字体都为蓝色。

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实例办法)
可以看出，jQuery有静态办法和实例办法之分, 那么jQuery.extend()和jQuery.fn.extend()的区别就是一个用来扩展静态办法，一个用来扩展实例办法。
jQuery自定义局部源码如下：

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办法也是对象，所以所谓的扩展函数，也便是给jQuery.extend, jQuery.fn.extend这两个对象扩展新的属性，形参就是我们自定义的函数，最后会被拷贝成为target对象返回，并合并到jQuery.extend对象，或者jQuery.fn.extend对象中，本质上就是相当于给jQuery类自身添加办法或者给jQuery对象的prototype对象添加办法。

信赖看了本案牍例你已经把握了办法，更多出色请关注百分百源码网其它相干文章！

举荐浏览：

怎样运用jquery的分页插件

如何做出京东商品详情的放大镜结果

javascript怎样实现小球跳动结果

以上就是jQuery自定义函数利用以及解析的细致内容，更多请关注百分百源码网其它相干文章！

打赏