jQuery自定义函数应用以及解析

来源：动视网责编：小采时间：2020-11-27 15:06:18

jQuery自定义函数应用以及解析

jQuery自定义函数应用以及解析:这次给大家带来jQuery自定义函数应用以及解析，使用jQuery自定义函数的注意事项有哪些，下面就是实战案例，一起来看一下。jQuery自定义函数 1. 如何扩展jQuery函数？ jQuery有两种自定义函数扩展：一种是类级别的函数开发，相当于将jQuery看做一个类，

推荐度：

点击下载本文 文档为doc格式

导读jQuery自定义函数应用以及解析:这次给大家带来jQuery自定义函数应用以及解析，使用jQuery自定义函数的注意事项有哪些，下面就是实战案例，一起来看一下。jQuery自定义函数 1. 如何扩展jQuery函数？ 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背景红色，字体都为蓝色。

2. 分析总结
jQuery的API手册中，我们看到，extend实际上是挂载在jQuery和jQuery.fn上的两个不同方法，尽管在jQuery内部jQuery.extend()和jQuery.fn.extend()是用相同的代码实现的，但是它们的功能却不太一样。官方的解释:

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对象增加方法。

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

jQuery自定义函数应用以及解析

推荐度：

点击下载本文 文档为doc格式

标签：使用应用解析

热门焦点

jQuery自定义函数应用以及解析

jQuery自定义函数应用以及解析

jQuery自定义函数应用以及解析

最新推荐

猜你喜欢

热门推荐