跟我一起学JQuery插件开发

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

【】How to write plugin in Jquery

【】锋利的JQuery 书

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

JQuery的插件分为中类型
（）封装对象方法的插件（也就是对象级别的开发）
这种类型的插件是我们今天需要讲的插件
（）封装全局函数的插件（类级别开发）
指可以把独立的函数添加到JQuery命名空间之下
添加一个全局函数我们只需如下定义
jQueryfoo = function() {
alert(This is a test This is only a test);
};
当然 你也可以添加多个全局函数

复制代码代码如下:
jQueryfoo = function() {
alert(This is a test This is only a test);
};
jQuerybar = function(param) {
alert(This function takes a parameter which is " + param + ");
};
调用时和一个函数的一样的:jQueryfoo();jQuerybar();或者$foo();$bar(bar);
（）选择器插件
编写JQuery插件需要注意的地方
（）插件的推荐命名方法为jquery[插件名]js
（）所有的对象方法都应当附加到JQueryfn对象上面而所有的全局函数都应当附加到JQuery对象本身上
（）在插件内部this指向的是当前通过选择器获取的JQuery对象而不像一般方法那样内部的this指向的是DOM元素
（）可以通过thiseach 来遍历所有的元素
（）所有方法或函数插件都应当以分号结尾否则压缩的时候可能会出现问题为了更加保险写可以在插件头部添加一个分号（）以免他们的不规范代码给插件带来 影响
（）插件应该返回一个JQuery对象以便保证插件的可链式操作
（）避免在插件内部使用$作为JQuery对象的别名而应当使用完整的JQuery来表示这样可以避免沖突
JQuery插件的机制
JQuery提供了个用于扩展JQuery功能的方法即
①jQueryfnextend()
②jQueryextend()
第一个就是我们前面说插件类型的第一个中情况第二个就是指后面的种情况
jQueryextend()在插件中友一个很重要的功能是扩展已经有的object的对象
比如
var newSrc=$extend(destsrcsrcsrc)
它的含义是将srcsrcsrc合并到dest中返回值为合并后的dest由此可以看出该方法合并
示例
var result=$extend({}{name:"Tom"age:}{name:"Jerry"sex:"Boy"})
得到的结果是
result={name:"Jerry"age:sex:"Boy"}
详细的 可以查看jQueryextend 函数详解里面对这个方法有很好的讲解

官网JQueryextend()与JQueryfnextend()
使用命名空间
虽然在jQuery命名空间中我们禁止使用了大量的javaScript函数名和变量名但是仍然不可避免某些函数或变量名将于其他jQuery插件沖突因此我们习惯将一些方法封装到另一个自定义的命名空间
复制代码代码如下:
jQuerymyPlugin = {
foo:function() {
alert(This is a test This is only a test);
}
bar:function(param) {
alert(This function takes a parameter which is " + param + ");
}
};
采用命名空间的函数仍然是全局函数调用时采用的方法
复制代码代码如下:
$myPluginfoo();
$myPluginbar(baz);

二第一个Jquery插件
如果需要写一个JQuery插件你需要在$fn对象后面增加一个属性名这个属性名 其实 就是你的插件名它的一般框架如下
复制代码代码如下:
(function( $ ) {
$fnmyPlugin = function() {
// 这里开始写功能需求
};
})( jQuery );
现在我们需要写的插件的功能很简单就是把一个对象给慢慢的隐藏起来就是使用fadeOut()这个方法
OK我们打开 VS 新建一个jscript文件并且命名为MyPluginjs并在里面添加如下代码
复制代码代码如下:
(function ($) {
$fnmyPlugin = function () {
thisfadeOut(normal);
};
})(jQuery);
怎么用呢？很简单
新建一个html页面把jquery文件以及刚刚我们MyPluginjs文件导入到本次页面中如下
复制代码代码如下:
<script src="Scripts/jqueryjs" type="text/javascript"></script>
<script src="MyPluginjs" type="text/javascript"></script>
js代码
<script type="text/javascript">
$(document)ready(function () {
$("#btn")click(function () {
$("#div")myPlugin();
});
});
</script>
HTML代码
复制代码代码如下:
<div id="div" style="width: px; height: px; backgroundcolor: Gray;">
My God</div>
<input id="btn" type="button" value="button" onclick="MyClick()" />
好的你现在点击网页上面的按钮的时候div就会缓缓的隐藏因为我们设定的是normal嘛里面也可以设定一些值之类的
很兴奋的是既然这个有智能提示如下图

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

复制代码代码如下:
(function ($) {
$fnhoverElement = function () {
thiseach(function () {
$(this)hover(
function () {
$(this)addClass("Add");
}
function () {
$(this)removeClass("Remove");
}
);
})
}
})(jQuery);
上面主要用到each()方法进行遍历代码很简单就是把当前的对象的背景色css样式在“Add”和“Remove”直接切换

HTML的代码是
复制代码代码如下:
<div class="hoverText">
First Button
</div>
<div class="hoverText">
Second Button
</div>
<div class="hoverText">
Third Button
</div>
JS 代码
复制代码代码如下:
<script type="text/javascript">
$(document)ready(function () {
$("hoverText")hoverElement();
});
</script>
很简单不解释
链式操作
链式操作？都听过吧比如下面这一句话
$("#div")css("color" "red")addClass("Add")animate({"width":"px"});
就是能在当前的元素后面通过“” 来实施更多的操作这个动作特别的潇洒
那我们要怎么才能实现这种效果呢？很简单我能只需要把对象回去就可以了请注意上面的第六点插件应该返回一个JQuery对象以便保证插件的可链式操作
我们依旧看刚刚的例子
复制代码代码如下:
(function ($) {
$fnhoverElement = function () {
return thiseach(function () {
$(this)hover(
function () {
$(this)addClass("Add");
}
function () {
$(this)removeClass("Remove");
}
);
})
}
})(jQuery);
代码都一样唯一区别的是thiseach(function () { 这个前面加了一个 return这样就实现了我们的链式操作
然后 你这样
复制代码代码如下:
$(document)ready(function () {
$("hoverText")hoverElement()css("color""yellow");
});
能看到 文字已经变成了yellow色的了

四 自定义自己的插件
对于一个商业插件来说自定义插件的样式是必不可少的我们可以通过我们自己输入不同的样式来改变开发者的默认样式比如说最常见的 widthheighturlcolor等等要是没有这些自定义的东西那开发者开发的插件的利用价值就大大的减小了
OK下面的这个实例的意思是 当我们hover一个对象的时候它能改变它的textbackgroundforeground三个属性也就是文本背景色前景色用户可以设定他自己想设定的值而不是固定死的当然如果用户没有设置我们会给他一个默认值
定义这类插件的开发框架是
$fnYouPlugin = function (options) {}
为了防止一些偷懒的人我们需要设置一些默认值当它没有设置的时候我们就用这些默认值
var defaultVal = {
Text: Your mouse is over
ForeColor: red
BackColor: gray
};
那默认值和用户传进来的值是怎么联合在一起的呢？这个就需要我们在开篇的时候讲到的$extend()知识了
var obj = $extend(defaultVal options);
这样子的话就把用户自定义的值覆盖了默认用户的值如果用户没定义值就用系统自定义的
代码如下
复制代码代码如下:
(function ($) {
$fntextHover = function (options) {//options 经常用这个表示有许多个参数
var defaultVal = {
Text: Your mouse is over
ForeColor: red
BackColor: gray
};
//默认值
var obj = $extend(defaultVal options);
return thiseach(function () {
var selObject = $(this);//获取当前对象
var oldText = selObjecttext();//获取当前对象的text值
var oldBgColor = selObjectcss("backgroundcolor");//获取当前对象的背景色
var oldColor = selObjectcss("color");//获取当前对象的字体的颜色
selObjecthover(function () {//定义一个hover方法
selObjecttext(objText);//进行赋值
selObjectcss("backgroundcolor" objBackColor);//进行赋值
selObjectcss("color" objForeColor);//进行赋值
}
function () {
selObjecttext(oldText);
selObjectcss("backgroundcolor" oldBgColor);
selObjectcss("color" oldColor);
}
);
});
}
})(jQuery);
代码也很简单上面都有些了解释此刻不在罗嗦
怎么用呢？很简单
HTML code
复制代码代码如下:
<div id="div" class="textBar">
Mouse over here
</div>
<div id="div" class="textBar">
Mouse over here
</div>
JS Code
复制代码代码如下:
$(document)ready(function () {
$(#div)textHover({
Text: I am going to over
ForeColor: yellow
BackColor: Red
});
$(#div)textHover({ Text: I am second div });
});
就能看到效果了
希望对你们有帮助
OK到现在为止应该一个插件开发的基本要素就这些了本来后面还有一个比较复杂的代码一起发的等下一节吧！
源码下载