jQuery插件的怎么写？

对于jQuery之前一直用，也看到过别人写的插件，直到最近才想着学习怎么写自己的jQuery插件，今天看了网上的一些资料，发现其实很简单的。

先看一个简单的jQuery插件的例子

<script>
(function($){
        $.fn.extend({
            "bold":function(){
                    return this.css({fontWeight:"bold"});
                },
            "red":function(){
                    return this.css({color:"red"});
                }            
        });
        })(jQuery);
</script>

使用的时候要先导入jquery插件，比如$("p").bold().red(),这样p标签内容就会变为红色粗体。

那么，如何写一个正确的jQuery的插件呢？

首先，插件的结构是这样的

(function($){
 })(jQuery);

这种结构在javascript中叫做闭包，能够不被编译器执行。

然后，在闭包中写插件的功能，有两种写法

第一种：就是上面例子中的，这种适合写有多个函数的插件，例子中的bold和red就是定义的两个插件的名字。

第二种：

    (function($){
            
        jQuery.fn.bold=function(){
                    return this.css({fontWeight:"bold"});
                };
        jQuery.fn.red=function(){
            return this.css({"color":"red"});
        }

        })(jQuery);

可以看做是定义了两个函数，分别是bold和red。

jQuery.extend()的介绍和使用

注意，区别于上面的jQuery.fn.extend()。

jQuery.extend()有几个重载方法

一、jQuery.extend(desc,src1,src2,src3...)

用来把后面的参数src1、src2。。合并到desc中,比如

var src1={name:petty,age:20}
var src2={name:tim,sex:female}
var desc={name:tom}
var result=jQuery.extend(desc,src1,src2)，

结果result={name:tim,age:20,sex:female}，同时desc也变为合并后的值，也就是说如果后面的参数和前面的参数有相同的属性值，则后面的属性会覆盖前面的属性。有时候我们不希望改变desc的值，则可以用{}代替desc，

jQuery.extend({},src1,src2,...)

上述的extend方法原型中的dest参数是可以省略的，如果省略了，则该方法就只能有一个src参数，而且是将该src合并到调用extend方法的对象中去，如：

　　$.extend(src)

　　该方法就是将src合并到jquery的全局对象中去，如：

 $.extend({
  hello:function(){alert('hello');}
  });

二、jQuery.extend(boolean,desc,src1,src2...)

第一个boolean为布尔值，意为是否深度覆盖，后面的参数与上面的一致。所谓深度覆盖，看下面的例子。

var result=jQuery.extend(true,{},
{name:tim,size:{width:20,length:30}},
{name:cat,age:20,size:{width:10,height:50})

则结果为result={name:cat,age:20,size:{width:10,length:30,height:50}}

如果第一个参数为false，则结果应该是这样result={name:cat,age:20,size:{width:10,height:50}}

下面是一个较完整的例子

    <script type="text/javascript">
        (function($){
        jQuery.fn.bold=function(options){
            var result=jQuery.extend(defaults,options);
                    return this.css({fontWeight:result.fontWeight});
                };
        jQuery.fn.color=function(options){
            var result=jQuery.extend(defaults,options);
            return this.css({"color":result.color});
        };
        
        var defaults={
                fontWeight:"bold",
                color:"green"
        };

        })(jQuery);
    
    $(function(){
            var options={
                    color:"red"
            };
        $("p").bold().color(options);
    });
    </script>