编写jQuery插件

来源:互联网 发布:淘宝美工在线布局 编辑:程序博客网 时间:2024/06/08 17:59

jQuery插件的类型

1、封装对象方法的插件,将对象方法封装起来,用于通过选择器获取的jQuery对象进行操作,是最常见的一种插件。

2、封装全局函数的插件,将独立的函数加到jQuery命名空间之下。

jQuery的基本要点

1、jQuery插件的文件名推荐命名为jquery.[插件我].js,以免和其它插件混淆。

2、所有的对象方法应当附加到jQuery.fn对象上,所有全局函数都应当附加到jQuery对象本身上。

3、在插件内部,this指向是当前通过选择器获取的jQuery对象,而不是一般方法指向的DOM元素。

4、可通过this.each来遍历所有元素。

5、所有的方法或函数插件应当以分号结尾,否则压缩时可能会出现问题。

6、插件应该返回一个jQuery对象,以保证插件的可链式操作。

插件闭包的常见代码结构

;(function($){

//此处编写插件代码

})(jQuery);

jQuery插件的机制

jQuery提供两个用于扩展jQuery功能的方法,jQuery.fn.extend()方法和jQuery.extend()方法。前者用于封装对象方法的插件,后者用于封装全局函数的插件。

jQuery.extend()方法除可以用于扩展jQuery对象外,还可以用于扩展已有的Object对象。

例:

var settings = {name:foo,age:18,sex:man}

var options = {name:bar,age:18}

var newOptions = jQuery.extend(settings,options)

返回结果为:newOptions = {name:bar,age:18,sex:man}

jQuery.extend()方法常用于设置插件的默认参数,例:

function foo(options){

options = jQuery.extend({name:"bar",age:18,sex:"man"},/*默认参数*/

options);/*options为传递的参数*/

};

在调用foo()方法的时候,在传递的参数options对象中设置了相应的值,就使用设置的值,否则使用默认值。