JQuery插件开发教程

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

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');
使用命名空间

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插件

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

 

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<script src="MyPlugin.js" type="text/javascript"></script> 
js代码： 
<script type="text/javascript"> 
$(document).ready(function () { 
$("#btn1").click(function () { 
$("#div1").myPlugin(); 
}); 
}); 
</script> 

 

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

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

 

 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> 

 

3.2 链式操作
$("#div1").css("color", "red").addClass("Add").animate({"width":"100px"},1000);
就是能在当前的元素后面通过“.” 来实施更多的操作。这个动作特别的潇洒。
那我们要怎么才能实现这种效果呢？很简单，我能只需要把对象回去就可以了。请注意上面的第六点：插件应该返回一个JQuery对象，以便保证插件的可链式操作。
我们依旧看刚刚的例子：

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

 

$(document).ready(function () { 
$(".hoverText").hoverElement().css("color","yellow"); 
}); 

 

四 自定义自己的插件

(function ($) { 
$.fn.textHover = function (options) {//options 经常用这个表示有许多个参数。 
var defaultVal = { 
Text: 'Your mouse is over', 
ForeColor: 'red', 
BackColor: 'gray' 
}; 
　　　　　　//默认值 
var obj = $.extend(defaultVal, options); 
return this.each(function () { 
var selObject = $(this);//获取当前对象 
var oldText = selObject.text();//获取当前对象的text值 
var oldBgColor = selObject.css("background-color");//获取当前对象的背景色 
var oldColor = selObject.css("color");//获取当前对象的字体的颜色 
selObject.hover(function () {//定义一个hover方法。 
selObject.text(obj.Text);//进行赋值 
selObject.css("background-color", obj.BackColor);//进行赋值 
selObject.css("color", obj.ForeColor);//进行赋值 
}, 
function () { 
selObject.text(oldText); 
selObject.css("background-color", oldBgColor); 
selObject.css("color", oldColor); 
} 
); 
}); 
} 
})(jQuery); 

 

HTML code： 
. 代码如下:
<div id="div1" class="textBar"> 
Mouse over here..... 
</div> 
<div id="div2" class="textBar"> 
Mouse over here..... 
</div> 

 

JS Code： 
. 代码如下:
$(document).ready(function () { 
$('#div1').textHover({ 
Text: 'I am going to over..', 
ForeColor: 'yellow', 
BackColor: 'Red' 
}); 
$('#div2').textHover({ Text: 'I am second div...' }); 
});