这次给大家带来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对象增加方法。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上就是jQuery自定义函数应用以及解析的详细内容,更多请关注php中文网其它相关文章!
已抢23819个
抢已抢118334个
抢已抢139565个
抢已抢6355个
抢已抢36753个
抢已抢67002个
抢