学习JQuery插件开发教程_H5之家 - 中国HTML5教程资源分享第一站

文章目录

如果你跟我一样，jQuery属于入门级的，那么我建议你看我下一篇jQuery教程：自己动手开发jquery插件，这篇插件比较容易理解和模范，适合新手开发jQuery插件。推荐你去看一看。

在逛codeproject网站的时候，突然看到一篇文章：How to write plugin in Jquery.
如果对E文好的同学，可以看上面的连接。
现在我把上面网站的及结合自己的想法写这篇文章。希望能得到大牛们的支持和谅解。。。大鸟飞过。。。欢迎拍装。

一.介绍

插件编写的目的是给已经有的一系列方法或函数做一个封装，以便在其他地方重复使用，方便后期维护。
JQuery除了提供一个简单、有效的方式进行管理元素以及脚本，它还还提供了例外一种机制：即给核心模块增加自己的方法和额外的功能。通过这种机制，Jquery允许我们自己创建属于我们自己的插件，提高我们在开发过程中的效率。

1.1JQuery的插件分为3中类型：
（1）封装对象方法的插件（也就是对象级别的开发）
这种类型的插件是我们今天需要讲的插件。
（2）封装全局函数的插件（类级别开发）
指可以把独立的函数添加到JQuery命名空间之下。
添加一个全局函数，我们只需如下定义：

jQuery.foo = function() { alert('This is a test. This is only a test.'); };

当然你也可以添加多个全局函数：

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');
（3）选择器插件
1.2编写JQuery插件需要注意的地方：
（1）插件的推荐命名方法为：jquery.[插件名].
（2）所有的对象方法都应当附加到JQuery.fn对象上面，而所有的全局函数都应当附加到JQuery对象本身上。
（3）在插件内部，this指向的是当前通过选择器获取的JQuery对象，而不像一般方法那样，内部的this指向的是DOM元素。
（4）可以通过this.each 来遍历所有的元素
（5）所有方法或函数插件，都应当以分号结尾，否则压缩的时候可能会出现问题。为了更加保险写，可以在插件头部添加一个分号（；），以免他们的不规范代码给插件带来影响。
（6）插件应该返回一个JQuery对象，以便保证插件的可链式操作。
（7）避免在插件内部使用$作为JQuery对象的别名，而应当使用完整的JQuery来表示。这样可以避免冲突。
1.3JQuery插件的机制
JQuery提供了2个用于扩展JQuery功能的方法。即：
①jQuery.fn.extend()
②jQuery.extend()
第一个就是我们前面说插件类型的第一个中情况，第二个就是指后面的2种情况。
jQuery.extend()在插件中友一个很重要的功能是扩展已经有的object的对象。
比如：
var newSrc=$.extend(dest,src1,src2,src3...)
它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并。
示例：
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
得到的结果是：
result={name:"Jerry",age:21,sex:"Boy"}
详细的可以查看：jQuery.extend 函数详解里面对这个方法有很好的讲解。

官网：JQuery.extend()与JQuery.fn.extend()
使用命名空间
虽然在jQuery命名空间中，我们禁止使用了大量的函数名和变量名。但是仍然不可避免某些函数或变量名将于其他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');

二.第一个Jquery插件

如果需要写一个JQuery插件，你需要在$.fn对象后面增加一个属性名，这个属性名其实就是你的插件名。它的一般框架如下：

(function( $ ) { $.fn.myPlugin = function() { // 这里开始写功能需求 }; })( jQuery );

现在我们需要写的插件的功能很简单，就是把一个对象给慢慢的隐藏起来。就是使用fadeOut()这个方法。
OK，我们打开 VS 2012.新建一个jscript文件，并且命名为：MyPlugin.，并在里面添加如下代码：

(function ($) { $.fn.myPlugin = function () { this.fadeOut('normal'); }; })(jQuery);

怎么用呢？很简单。
新建一个html页面，把jquery文件以及刚刚我们MyPlugin.js文件导入到本次页面中。如下：

好的，你现在点击网页上面的按钮的时候，div就会缓缓的隐藏。。。因为我们设定的是normal嘛，里面也可以设定一些值之类的。
很兴奋的是，既然这个有智能提示，如下图：

学习JQuery插件开发教程

三.插件运用在多个元素控件中。

3.1 运用在多个元素控件中
在上面编写JQuery插件需要注意的地方的第四点，写道如果要遍历则可以用this.each方法。$("ID").each 可以遍历jquery对象、数组以及集合。
OK。知道了这样子，那么我们的新的代码如下：

(function ($) { $.fn.hoverElement = function () { this.each(function () { $(this).hover( function () { $(this).addClass("Add"); }, function () { $(this).removeClass("Remove"); } ); }) } })(jQuery);

上面主要用到.each()方法进行遍历。代码很简单，就是把当前的对象的背景色css样式在“Add”和“Remove”直接切换。

<div> First Button.. </div> <div> Second Button.. </div> <div> Third Button.. </div>