如何创建一个自定义jquery插件

jQuery 库是专为加快 JavaScript 开发速度而设计的。通过简化编写 JavaScript 的方式，减少代码量。使用

创新互联专注于双台子网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供双台子营销型网站建设，双台子网站制作、双台子网页设计、双台子网站官网定制、微信小程序定制开发服务，打造双台子网络公司原创品牌,更为您提供双台子网站排名全网营销落地服务。

jQuery 库时，您可能会发现您经常为一些常用函数重写相同的代码。如果这样的话，这可能就是您需要编写自定义 jQuery 插件的一个原因。

jQuery 插件允许您使用自定义代码扩展 jQuery 库；您可以对一些重复性函数使用插件。例如，很多插件可供幻灯片、下拉菜单和折叠菜单所用。如果您搜索 jQuery 插件，就会发现有大量可用于自己项目的示例（看看它们是如何构建的）。

准备工作

对JavaScript、jQuery 和CSS有一个基本了解。（用到的源代码及示例在本文最下方）

开始

jQuery 是一个可扩展 JavaScript 语言的库。当您创建一个 jQuery 插件时，本质上是在扩展这个 jQuery

库。要真正了解插件如何扩展 jQuery 库需要对 JavaScript prototype 属性有一个基本了解。尽管不直接使用，但是

JavaScript prototype 属性可通过 jQuery 属性 fn 在后台使用，这是原生 JavaScript prototype

属性的一个 jQuery 别名。

要使用 fn 属性创建一个新 jQuery 插件，只需要为 fn 属性分配一个插件名，并将其指向一个充当构造函数的新函数，类似于纯

JavaScript。Code 1显示了如何定义一个名为 accordion 的新 jQuery 插件，其方法是通过使用 jQuery 对象和

fn 属性，并将其分配给一个新的构造函数。

Code 1：定义一个名为 accordion 的新 jQuery 插件

jQuery.fn.accordion = function() {

// 在这里添加插件代码

};

Code 1 展示了创建 jQuery 插件的一种方法；该示例没有什么功能性错误。但是，创建一个 jQuery

插件所推荐的方法是，先创建一个允许使用美元符号 ($) 的包装器函数。在默认情况下，美元符号可能与其他 JavaScript

框架发生冲突，如果将插件包装在一个函数中，就不会出现冲突。Code 2 中的示例代码显示如何将一个包装器函数应用到一个 jQuery

插件定义中。

(function($) {

$.fn.accordion = function() {

// 在这里添加插件代码

};

})(jQuery);

在Code 2 中，jQuery 关键字被应用到包装器函数中，这允许您在插件中使用美元符号，就像使用 fn

属性时那样。包装器函数就绪后，就可以在整个插件的任何地方使用美元符号代替 jQuery

关键字，不会干扰其他第三方插件。该选项提供了一种方法使我们可以在开发整个插件中编写较少的代码，并且有助于您的插件代码保持整洁，易于维护。

维护链接性

jQuery 的一个优势是允许您使用任何类型的选择器。但是，必须记住，您的插件可以处理几种不同的元素类型。使用 this

关键字允许您的插件应用于相关函数，通过循环实现每个元素的访问，而不考虑元素类型。如果在 each 循环前使用 return

关键字，就可以使用您的插件维护链接性。清单 3 显示了分配给一个函数处理程序且与 return 关键字相结合的 each 循环。

code 3. 在 each 循环之前使用 return 关键字

(function($) {

$.fn.accordion = function() {

return this.each(function() {

// 使用 return

});

};

})(jQuery);

有了Code 3 的代码后，示例 accordion 插件可用在一个方法调用链中。有了链接性（另一个强大的 jQuery

特性），您的插件就可用在一个方法调用链中。例如，下面的代码显示了如何淡出 HTML 元素，并在单一的方法调用链中将其从文档对象模型 (DOM)

中删除。

$("#my-div").fadeOut().remove();

构造一个 accordion

一个典型的层叠设计包括标题栏和相关内容区域。定义列表是一个可供 accordions 使用的很好的 HTML 结构；dt 元素供标题所用，而dd 元素供内容区域所用。清单 4 中的 HTML 结构是一个定义列表，含有四个标题以及相应的内容区域。

Code 4. 单一方法调用链

dl class="accordion" id="my-accordion"

dt第1部分/dt

dd内容一/dd

dt第2部分/dt

dd内容二/dd

dt第3部分/dt

dd内容三/dd

dt第4部分/dt

dd内容四/dd

/dl

Code 4 中定义的列表也有一个分配给它的名为 accordion 的 CSS 类。没有应用任何 CSS，这个 accordion 结构看起来类似于图 1 中的基础设计

为了美观，我们再给Code 4中的Html美化一下，并命名为“jquery.accordion.css”

Code 5. CSS部分

.accordion {

width: 500px;

border: 1px solid #ccc;

border-bottom: none;

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

}

.accordion dt,

.accordion dd {

border-bottom: 1px solid #ccc;

margin: 0px;

}

.accordion dt {

background: #eaeaea;

cursor: pointer;

padding: 8px 4px;

font-size: 13px;

font-weight: bold;

}

.accordion dd {

padding: 12px 8px;

}

效果如下图：

自定义插件

要制作一个功能性 accordion，必须将自定义代码应用到您上一小节创建 jQuery 插件的函数。accordion

插件从遍历所有已定义的 accordion 开始。要定义一个 accordion，在 HTML 文档或外部嵌入式 JavaScript

文件中使用下列 jQuery。

$('dl#my-accordion').accordion();

对于每个 Accordion，您可以使用 jQuery 的 children 方法访问相关定义的标题，返回一个数组或 dt 元素。应用一个

click 事件到 dt 元素，然后一个名为 reset 方法应用到每个 dt。accordion 首次加载时，该 reset 方法会折叠所有

dd 元素。单击 dt 元素或者标题栏时，click 事件会触发一个名为 onClick 的自定义方法。自定义 onClick 方法用于查找

accordion 中的所有 dt 元素。它调用一个自定义 hide 方法，该方法通过使用 next 方法找到紧挨着 dt 元素的 dd

元素，隐藏每个相关的 dd 元素，通过使用 next 方法找到紧挨着 dt 元素的 dd 元素，然后向上滑动激活它。

所有 dd 元素被隐藏后，使用 slideDown 方法，就可以看见与单击过的 dt 元素相关的 dd 元素，并创建一个放大和收缩动画，如清单 8

所示。onClick 方法的最后一行代码是 return false，确保任何被点击的主题栏没有显现出其一般行为。例如，如果您使用一个

anchor 元素作为标题栏，您可能想要执行 return false，这样就不会将用户定向到另一个页面或现有页面的一部分。

Code 6. 自定义用于创建一个 jQuery 插件的 accordion 函数

(function($) {

$.fn.accordion = function(options) {

return this.each(function() {

var dts = $(this).children('dt');

dts.click(onClick);

dts.each(reset);

});

function onClick() {

$(this).siblings('dt').each(hide);

$(this).next().slideDown('fast');

return false;

}

function hide() {

$(this).next().slideUp('fast');

}

function reset() {

$(this).next().hide();

}

}

})(jQuery);

如果该 accordion 插件与一个 HTML 定义列表结构相关联时，比如您之前创建的那个 accordion 函数将被应用。有了

accordion 函数，单击一个标题栏或 dt 元素时，会打开其内容区域，而其他内容区域则关闭。换句话说，一次只能打开一个内容区域。

设定插件的默认值（Defaults）和设置项（options）

jQuery 插件可以包括 defaults 和 options。Options 本质上就是传递给插件的参数。可以使用 options

发送一个参数作为 object literal，这是一个标准 jQuery 实践，而不需要传递多个参数。如果您的插件支持 options，使用

defaults 对象设置默认的 options 将是一个最佳方式。和 options 一样，defaults 是一个 object

literal，应该包括您想要传递到插件中的属性。

例如，如果您支持一个可用于在首次加载时打开 accordion 第一个内容区域的属性，那么在您的插件中应该包括一个 open

属性的默认值。在您的插件中使用 defaults 确定默认函数，使用 options 覆盖默认值。如果插件接收 options，可以使用

$.extend 方法执行覆盖。jQuery 的 $.extend 方法合并两个或多个对象。Code 7 中的示例显示在一个自定义 jQuery

插件中使用 $.extend 方法合并用户定义选项和默认选项的一般实现。

Code 7. 向一个自定义的 accordion jQuery 插件添加 options 和 defaults

(function($) {

$.fn.accordion = function(options) {

var settings = $.extend({}, {open: false}, options);

return this.each(function() {

var dts = $(this).children('dt');

dts.click(onClick);

dts.each(reset);

if(settings.open) $(this).children('dt:first-child').next().show();

});

function onClick() {

$(this).siblings('dt').each(hide);

$(this).next().slideDown('fast');

return false;

}

function hide() {

$(this).next().slideUp('fast');

}

function reset() {

$(this).next().hide();

}

}

})(jQuery);

$.extend 方法参数是一个目标对象和 2 个或多个合并对象。在本示例中，目标对象是一个空 object

literal，充当合并对象容器。目标将成为一个包含合并对象值的单一对象（在该案例中是 settings 变量）。第 2

个参数是一个包含默认插件属性的 object literal。第 3 个参数是用户定义的 options 参数。要在一个 HTML 元素上使用

accordion 插件传递 options，需要知道除了之前您作为 object literal 传递的属性外还有哪些属性，如下所示。

$('dl#my-accordion').accordion({open:true});

在Code 7 示例中，传递到插件的 options 通过 $.extend 方法覆盖 defaults。如果没有传递 options，则使用默认值。对于示例插件，可使用 open 属性确定加载时是否打开第一个内容区域。

可重用性

您可以在任何 HTML 文档中重用示例 accordion 插件，可以在单个 HTML 文档中多次使用。您也可以包括多个

accordion 结构，就像已创建的那个 accordion，使用刚创建的新 accordion 插件通过 jQuery 将每个单独定义为

accordion。要向一个 HTML 文档添加多个 accordion，只需要添加尽可能多的 accordion 结构。Code 8

中的代码包括两个 accordion 结构，由一个段落隔开。

Code 8. 在同一个 HTML 文档中使用多个 accordion

dl class="accordion" id="my-accordion"

dt第1部分/dt

dd内容一/dd

dt第2部分/dt

dd内容二/dd

dt第3部分/dt

dd内容三/dd

dt第4部分/dt

dd内容四/dd

/dl

dl class="accordion" id="my-accordion"

dt第5部分/dt

dd内容五d

dt第6部分/dt

dd内容六dd

dt第7部分/dt

dd内容七/dd

/dl

Code 8 中的两个 accordion 结构几乎一样，除了内容不一样外，更重要的是 ID 值也不一样。第一个结构包含一个

my-accordion ID 值。第 2 个结构包含一个 my-accordion2 ID 值。现在可以单独定向这些结构。例如，下列

jQuery 脚本使用已创建的新插件将每个 accordion 结构定义为一个 accordion。

$('dl#my-accordion').accordion({open:true});

$('dl#my-accordion2').accordion({open:true});

两个 accordion 结构定义完成后，第一个面板默认设置为打开下图 显示一个用在同一个 HTML 文档的多个 accordion 插件的示例。

jquery插件怎样使用和修改?

jQuery插件 要使用它的话 通常插件中都有demo或者api可以查阅\x0d\x0a通常jQuery插件为了减小体积 会发布两个版本 XXX.js和XXX.min.js\x0d\x0a\x0d\x0a如果你要修改插件需要使用XXX.js文件\x0d\x0a\x0d\x0a首先 你要知道它怎么用,先有一个可用的demo(没有demo就自己写一个),然后用webkit内核或firefox进行断点查看,这主要是为了找插件入口点,当然 你也可以直接查看js代码 这需要一定的底子\x0d\x0a最后 就是慢慢查看他的代码的实现功能了,先得看懂他是怎么实现的,然后你才会知道怎么改.\x0d\x0a\x0d\x0ajQuery插件我也写的不少 像 模拟alert/confirm/prompt 错误信息提示框 模拟弹出窗体 无缝marquee滚动 分页控件 拖拽控件等等\x0d\x0a\x0d\x0ajQuery插件的框架写法通常是\x0d\x0a\x0d\x0a(function($){\x0d\x0a $.fn.extend({\x0d\x0a fnKey:function(){}\x0d\x0a })\x0d\x0a //或者\x0d\x0a $.fn.fnKey=function(){}\x0d\x0a})(jQuery)\x0d\x0a\x0d\x0a上面的两种写法的调用 方式 是\x0d\x0a\x0d\x0a$("XXX").fnKey()进行调用的\x0d\x0a\x0d\x0a还有一种写法:\x0d\x0avar fnClass = function(){\x0d\x0a this.fnKey=function(){\x0d\x0a }\x0d\x0a this.props="";\x0d\x0a}\x0d\x0a\x0d\x0a这种写法是的调用 方式是\x0d\x0afnClass obj = new fnClass();\x0d\x0aobj.fnKey();\x0d\x0a\x0d\x0a第二种写法是js的面向对象编程 得自己慢慢的理解哈

如何编写jquery插件

编写插件的目的是给已经有的一系列方法或函数做一个封装，以便在其他地方重复使用，提高开发效率和方便后期维护。本文将详细介绍如何编写jQuery插件

类型

jQuery的插件主要分为3种类型

1、封装对象方法

这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件。此类插件可以发挥出jQuery选择器的强大优势，有相当一部分的jQuery的方法，都是在jQuery脚本库内部通过这种形式“插”在内核上的，例如：parent()方法、appendTo()方法等。这些方法在现在来看都是jQuery本身自带的方法了。平时，我们是可以直接拿来就用的，只需引入jQuery库就行

2、封装全局函数

可以将独立的函数加到jQuery命名空间下，如常用的jQuery.ajax()、去首尾空格的jQuery.trim()方法等，都是jQuery内部作为全局函数的插件附加到内核上去的

3、选择器插件

虽然jQuery的选择器十分强大，但是在少数情况下，还是会需要用到选择器插件来扩充一些自己喜欢的选择器

要点

1、jQuery插件的文件名推荐命名为jQuery.[插件名].js，以免和其他JS库插件混淆

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

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

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

5、所有的方法或函数插件，都应当以分号结尾。否则压缩的时候可能出现问题。为了稳妥些，甚至可以在插件头部先加上一个分号，以免他人不规范的代码影响自身的插件代码

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

7、避免在插件内部使用$作为jQuery对象的别名，而应使用完整的jQuery来表示，避免冲突。当然，也可以利用闭包来回避这种问题，使插件内部继续使用$作为jQuery的别名

闭包

利用闭包的特性，即可以避免内部临时变量影响全局空间，又可以在插件内容继续使用$作为jQuery的别名。常见的jQuery插件都是以下这种形式的:

(function(){

/*这里放置代码*/

})();

首先定义一个匿名函数function(){/*这里放置代码*/}，然后用括号括起来，变成(function(){/*这里放置代码*/})这种形式，最后通过()这个运算符来执行。可以传递参数进行，以供内部函数使用

//为了更好的兼容性，开始前有个分号

;(function($){    //此处将$作为匿名函数的形参

/*这里放置代码，可以使用$作为jQuery的缩写别名*/

})(jQuery);      //这里就将jQuery作为实参传递给匿名函数了

上面的代码是一种常见的jQuery插件的结构

插件机制

jQuery提供了两个用于拓展jQuery功能的方法，即jQuery.fn.extend()方法和jQuery.extend()方法。jQuery.fn.extend()方法用于拓展封装对象方法的插件，jQuery.extend()方法用于拓展封装全局函数的插件和选择器插件。这两个方法都接受一个参数，类型为Object。Object对象的"名/值对"分别代表"函数或方法名/函数主体"

【jQuery.fn.extend()】

jQuery.fn.extend()方法用于将一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法

labelinput type="checkbox" name="foo" Foo/label

labelinput type="checkbox" name="bar" Bar/label

button id="btn1"全选/button

button id="btn2"全不选/button

script

jQuery.fn.extend({

check: function() {

return this.each(function() { this.checked = true; });

},

uncheck: function() {

return this.each(function() { this.checked = false; });

}

});

$('#btn1').click(function(){

$( "input[type='checkbox']" ).check();

});

$('#btn2').click(function(){

$( "input[type='checkbox']" ).uncheck();

});

/script

【jQuery.extend()】

jQuery.extend()方法用一个或多个其他对象来扩展一个对象，然后返回被扩展的对象

jQuery.extend( target [, object1 ] [, objectN ] )

例如，合并settings对象和options对象，修改并返回settings对象

var settings = {validate:false,limit:5,name:"foo"};

var options = {validate:true,name:"bar"};

var newOptions = jQuery.extend(settings,options);

console.log(newOptions);//Object {validate: true, limit: 5, name: "bar"}

jQuery.extend()方法经常被用于设置插件方法的一系列默认参数

function foo(options){

options=jQuery.extend({

name:"bar",

length:5,

dataType:"xml"

},options);

如果用户调用foo()方法的时候，在传递的参数options对象设置了相应的值，那么就使用设置的值，否则使用默认值

通过使用jQuery.extend()方法，可以很方便地用传入的参数来覆盖默认值。此时，对方法的调用依旧保持一致，只不过要传入的是一个映射而不是一个参数列表。这种机制比传统的每个参数都去检测的方式不仅灵活而且更加简洁。此外使用命名参数意味着再添加新选项也不会影响过去编写的代码，从而使开发者使用起来更加直观明了

什么是jquery插件?有什么用?

jquery 插件就是一些人用jquery写的一些工具，常见的是jquery UI和jquery easyui,我们在调用时只需要用很少的代码就能实现很好的效果。

如easyui的datagrid、combobox、tree等可以实现表格、下拉框、树等形状及需要的操作。

附：easyui官网

可以在网站里面下载demo、观看一些特效、下载插件js等。

jQuery插件开发全解析 jQuery插件的开发包括两种：

一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery 的全局函数就是属于jQuery命名空间的函数。

另一种是对象级别的插件开发，即给jQuery对象添加方法。

怎样编写一个jQuery插件

为了方便用户创建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。

1. jQuery.extend() 方法有一个重载。

　 jQuery.extend(object) ,一个参数的用于扩展jQuery类本身，也就是用来在jQuery类/命名空间上增加新函数，或者叫静态方法，例如jQuery内置的 ajax方法都是用jQuery.ajax()这样调用的，有点像 “类名.方法名” 静态方法的调用方式。下面我们也来写个jQuery.extend(object)的例子：

//扩展jQuery对象本身

jQuery.extend(｛

"minValue": function (a, b) ｛

///《summary

/// 比较两个值，返回最小值

///《/summary

return a 《 b ? a : b;

},

"maxValue": function (a, b) ｛

///《summary

/// 比较两个值，返回最大值

///《/summary

return a  b ? a : b;

}

});

//调用

var i = 100; j = 101;

var min_v = $.minValue(i, j); // min_v 等于 100

var max_v = $.maxValue(i, j); // max_v 等于 101

重载版本：jQuery.extend([deep], target, object1, [objectN])

用一个或多个其他对象来扩展一个对象，返回被扩展的对象。

如果不指定target，则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。

如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构。

未定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。

参数

deep:       可选。如果设为true，则递归合并。

target:     待修改对象。

object1:   待合并到第一个对象的对象。

objectN:   可选。待合并到第一个对象的对象。

示例1：

合并 settings 和 options，修改并返回 settings。

var settings = ｛ validate: false, limit: 5, name: "foo" };

var options = ｛ validate: true, name: "bar" };

jQuery.extend(settings, options);

结果：

settings == ｛ validate: true, limit: 5, name: "bar" }

示例2：

合并 defaults 和 options, 不修改 defaults。

var empty = ｛};

var defaults = ｛ validate: false, limit: 5, name: "foo" };

var options = ｛ validate: true, name: "bar" };

var settings = jQuery.extend(empty, defaults, options);

结果：

settings == ｛ validate: true, limit: 5, name: "bar" }

empty == ｛ validate: true, limit: 5, name: "bar" }

这个重载的方法，我们一般用来在编写插件时用自定义插件参数去覆盖插件的默认参数。

jQuery.fn.extend(object)扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。

首先我们来看fn 是什么东西呢。查看jQuery代码，就不难发现。

jQuery.fn = jQuery.prototype = ｛

　init: function( selector, context ) ｛.....};

};

原来 jQuery.fn = jQuery.prototype，也就是jQuery对象的原型。那jQuery.fn.extend()方法就是扩展jQuery对象的原型方法。我 们知道扩展原型上的方法，就相当于为对象添加”成员方法“，类的”成员方法“要类的对象才能调用，所以使用 jQuery.fn.extend(object)扩展的方法， jQuery类的实例可以使用这个“成员函数”。jQuery.fn.extend(object)和jQuery.extend(object)方法一 定要区分开来。

如何编写JQuery 插件详解

jQuery 如何写插件 -

jQuery插件的开发包括两种：

一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。

1、类级别的插件开发

类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展：

1.1

添加一个新的全局函数

添加一个全局函数，我们只需如下定义：

jQuery.foo =

function() {

alert('This is a test. This is only a

test.');

};

1.2

增加多个全局函数

添加多个全局函数，可采用如下定义：

Java代码 收藏代码

jQuery.foo = function() {

alert('This is a test. This is

only a test.');

};

jQuery.bar =

function(param) {

alert('This function takes a

parameter, which is "' + param + '".');

};

调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');

1.3

使用jQuery.extend(object);　

jQuery.extend({

foo:

function() {

alert('This is a test. This is

only a test.');

},

bar: function(param)

{

alert('This function takes a

parameter, which is "' + param +'".');

}

});

1.4

使用命名空间

虽然在jQuery命名空间中，我们禁止使用了大量的javaScript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突，因此我们习惯将一些方法封装到另一个自定义的命名空间。

jQuery.myPlugin =

{

foo:function()

{

alert('This is a test. This is only a

test.');

},

bar:function(param)

{

alert('This function takes a parameter, which is "' + param +

'".');

}

};

采用命名空间的函数仍然是全局函数，调用时采用的方法：

$.myPlugin.foo();

$.myPlugin.bar('baz');

通过这个技巧（使用独立的插件名），我们可以避免命名空间内函数的冲突。

2、对象级别的插件开发

对象级别的插件开发需要如下的两种形式：、

形式1：

(function($){

$.fn.extend({

pluginName:function(opt,callback){

// Our plugin implementation code goes

here.

}

})

})(jQuery);

形式2：

(function($)

{

$.fn.pluginName = function()

{

// Our plugin implementation code goes here.

};

})(jQuery);

上面定义了一个jQuery函数,形参是$，函数定义完成之后,把jQuery这个实参传递进去.立即调用执行。这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.

2.1

在JQuery名称空间下申明一个名字

这是一个单一插件的脚本。如果你的脚本中包含多个插件，或者互逆的插件（例如：

$.fn.doSomething() 和

$.fn.undoSomething()），那么你需要声明多个函数名字。但是，通常当我们编写一个插件时，力求仅使用一个名字来包含它的所有内容。我们的示例插件命名为“highlight“

$.fn.hilight

= function() {

// Our plugin implementation

code goes

here.

};

我们的插件通过这样被调用：

$('#myDiv').hilight();

但是如果我们需要分解我们的实现代码为多个函数该怎么办？有很多原因：设计上的需要；这样做更容易或更易读的实现；而且这样更符合面向对象。这真是一个麻烦事，把功能实现分解成多个函数而不增加多余的命名空间。出于认识到和利用函数是javascript中最基本的类对象，我们可以这样做。就像其他对象一样，函数可以被指定为属性。因此我们已经声明“hilight”为jQuery的属性对象，任何其他的属性或者函数我们需要暴露出来的，都可以在"hilight"

函数中被声明属性。稍后继续。

2.2

接受options参数以控制插件的行为

让我们为我们的插件添加功能指定前景色和背景色的功能。我们也许会让选项像一个options对象传递给插件函数。例如：

// plugin definition

$.fn.hilight =

function(options) {

var defaults = {

foreground:

'red',

background:

'yellow'

};

//

Extend our default options with those provided.

var

opts = $.extend(defaults, options);

// Our

plugin implementation code goes here.

};

我们的插件可以这样被调用：

$('#myDiv').hilight({

foreground: 'blue'

});

2.3

暴露插件的默认设置

我们应该对上面代码的一种改进是暴露插件的默认设置。这对于让插件的使用者更容易用较少的代码覆盖和修改插件。接下来我们开始利用函数对象。

//

plugin definition

$.fn.hilight =

function(options) {

// Extend our default options with those

provided.

// Note that the first arg to extend is an

empty object -

// this is to keep from overriding our

"defaults" object.

var opts = $.extend({},

$.fn.hilight.defaults, options);

// Our

plugin implementation code goes here.

};

// plugin

defaults - added as a property on our plugin function

$.fn.hilight.defaults = {

foreground: 'red',

background: 'yellow'

};

现在使用者可以包含像这样的一行在他们的脚本里：

//这个只需要调用一次，且不一定要在ready块中调用

$.fn.hilight.defaults.foreground

=

'blue';

接下来我们可以像这样使用插件的方法，结果它设置蓝色的前景色：

$('#myDiv').hilight();

如你所见，我们允许使用者写一行代码在插件的默认前景色。而且使用者仍然在需要的时候可以有选择的覆盖这些新的默认值：

//

覆盖插件缺省的背景颜色

$.fn.hilight.defaults.foreground = 'blue';

// ...

//

使用一个新的缺省设置调用插件

$('.hilightDiv').hilight();

// ...

//

通过传递配置参数给插件方法来覆盖缺省设置

$('#green').hilight({

foreground:

'green'

});

名称栏目：jquery代码插件,jquery开发插件
当前地址：http://ybzwz.com/article/dsdpdhi.html