【学习拾遗】Jquery（四）--自写插件

　　前面博客也说过Jquery官网提供的插件，但是有时候我们需要自定义一些功能，免不了要自己写写jquery插件，这里来说一下jquery插件。

一）、格式

    1、通过$.extend()来扩展Jquery

　　　　格式：

　　　　　$.extend({

　　　　　　　函数名:function(参数){

　　　　　　　　　函数体

　　　　　　　}

　　　　　})

　　　　实例：

　　　　　$.extend({

　　　　　　　sayHello:function(name){

　　　　　　　　alert("hello:"+(name?name:"world"));

　　　　　　　}

　　　　　})

　　　　$.sayHello("leilei");

　　　　$.sayHello();

    2、通过$.fn向jQuery添加新方法,实际上是在jquery的原型上面增加一个函数

　　　　格式：

　　　　(function(){

　　　　　　$.fn.myfunction=function(){

　　　　　　　　　函数体

　　　　　　}

　　　　})(jQuery)

　　　　实例：

　　　　(function(){

　　　　　　$.fn.myfunction=function(options){

　　　　　　　　//默认设置

　　　　　　　　var defaults={

　　　　　　　　　　　'color':'red',

　　　　　　　　　　　'fontSize':'12px'

　　　　　　　　};

　　　　　　　　//复写默认设置

　　　　　　　　var settings=$.extend(defaults,options);

　　　　　　　　//函数体，支持链式操作

　　　　　　　　return this.css({

　　　　　　　　　　　'color':settings.color,

　　　　　　　　　　　'fontSize':settings.fontSize

　　　　　　　　　　　　});

　　　　　　　　}

　　　　})(jQuery)

    3、通过$.fun=function(){}定义全局插件

　　　　$.say=function(name){

　　　　　　alert("hello"+name)

　　　　}

二）、实例驱动

　　通过两个实例，来实践一下自定义jquery插件。

    实例１、美化样式标签字体样式插件

    JS：

(function($){

//定义一个Beautifier对象工厂
var Beautifier=function(ele,options){
this.$element=ele;
this.defaults={
color:"red",
fontsize:"12px",
textdecoration:"none"
}
this.opts=$.extend({},this.defaults,options);
};

//为该对象的原型添加一个beautiful方法
Beautifier.prototype={
beautiful:function(){
return this.$element.css({
color:this.opts.color,
fontSize:this.opts.fontsize,
textDecoration:this.opts.textdecoration
});
}
};

$.fn.beautiful=function(opts){
var beautifier=new Beautifier(this,opts);
console.log(this)
return beautifier.beautiful();

}

})(jQuery)

　　前台调用：

　　　　$(function(){

　　　　　　$("#test1").beautiful();

　　　　})

　　实例2、Table样式（两种方式实现）

　　a、面向对象实现

(function($,window,document){

var MyTable=function(options){
this.defaults={
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeClass:"activeRow"
};
this.opts=$.extend({},this.defaults,options);
}

MyTable.prototype={
rowColor:function(ele){
var $thisTable=$(ele);
var myTable1=this;
$thisTable.find("tr:even").addClass(this.opts.evenRowClass).end().find("tr:odd").addClass(this.opts.oddRowClass).end()
$thisTable.find("tr").bind("mouseover mouseout",function(){
$(this).toggleClass(myTable1.opts.activeClass).css("cursor","hand")
})

}
}
$.fn.myTable=function(options){
var mytable=new MyTable(options);
mytable.rowColor(this);

}
})(jQuery,window,document)

　　b、非面向对象实现

(function($){

$.fn.tableUI=function(options){

var defaults={
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeClass:"activeRow"
}
var pts=$.extend({},defaults,options);

this.each(function(){
var $thisTable=$(this);
return $thisTable.find("tr:even").addClass(pts.evenRowClass).end().find("tr:odd").addClass(pts.oddRowClass).end().find("tr").bind("mouseenter mouseleave",function(){
$(this).toggleClass(pts.activeClass)
})
})
}

})(jQuery)

PS：个人理解其实Jquery插件有两大要点：1、通过$.extend复写默认的设置；2、通过jquery选择器选择元素进行设置

实现效果就不再这里截图了，自己可以实践一下，主要的目的是在于如何自己开发一个Jquery插件。

三）、小结

　　自定义Jquery插件，个人认为还是如下：

　　1、通过$.extend复写默认的设置

　　2、通过jquery选择元素进行设置

　　3、如果有支持链式操作，在jquery插件的中加上return即可