【前端】jquery如何编写插件？

来源：互联网发布：热血传奇挖矿脚本源码编辑：程序博客网时间：2024/05/17 19:21

参考资料：

http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html

http://www.jq-school.com/Show.aspx?id=169

现在解释：

【定义jq插件的两种方式】

$(function() {   $.fn.插件名称 = function(options) {      var defaults = {         Event : "click",        //触发响应事件         msg : "Holle word!"        //显示内容      };      var options = $.extend(defaults,options);      var $this = $(this);        //当然响应事件对象      //功能代码部分      //绑定事件      $this.live(options.Event,function(e){         alert(options.msg);      });   }});

上面这种可以将 function换成｛｝等对象。

第二种方式：

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

就是将hello方法合并到jquery的实例对象中。

【备注：extend方法的解释】

一、Jquery的扩展方法原型是:　　　

 extend(dest,src1,src2,src3...);

它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后，是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构，可以如下使用：

  var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。

这样就可以将src1,src2,src3...进行合并，然后将合并结果返回给newSrc了。如下例：

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})

那么合并后的结果

  result={name:"Jerry",age:21,sex:"Boy"}

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

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

　　就是将hello方法合并到jquery的全局对象中。
　　2、$.fn.extend(src)
　　该方法将src合并到jquery的实例对象中去，如:

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

　　就是将hello方法合并到jquery的实例对象中。

　　下面例举几个常用的扩展实例：

$.extend({net:{}});

　　这是在jquery全局对象中扩展一个net命名空间。

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

　　这是将hello方法扩展到之前扩展的Jquery的net命名空间中去。

　　三、Jquery的extend方法还有一个重载原型：

extend(boolean,dest,src1,src2,src3...)

第一个参数boolean代表是否进行深度拷贝，其余参数和前面介绍的一致，什么叫深层拷贝，我们看一个例子：

var result=$.extend( true,  {},      { name: "John", location: {city: "Boston",county:"USA"} },      { last: "Resig", location: {state: "MA",county:"China"} } );

我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true，那么合并后的结果就是：

result={name:"John",last:"Resig",        location:{city:"Boston",state:"MA",county:"China"}}

也就是说它会将src中的嵌套子对象也进行合并，而如果第一个参数boolean为false，我们看看合并的结果是什么，如下：

var result=$.extend( false, {},  { name: "John", location:{city: "Boston",county:"USA"} },  { last: "Resig", location: {state: "MA",county:"China"} }                      );

那么合并后的结果就是:

  result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}

　　以上就是$.extend()在项目中经常会使用到的一些细节。

【非常感谢网友的资料。】

【调用方式及实地试验】

<html><head>    <title></title>    <script type="text/javascript" src="/content/scripts/jquery-1.7.1.min.js"></script></head><body style="border: 1px solid red; background: green;">             z<div style="width: 400px; height: 500px; background: gray;" id="test1">    这个是div1             z    <div style="width: 200px; height: 100px; background: white; margin: 50px;" id="test2">        这个是div2        <div id="test3" style="width: 90px; height: 20px; margin: 20px; border:1px solid green; color: red;">阻止事件冒泡。</div>    </div></div><script type="text/javascript">  $(document.getElementById("test1")).click(function(){        alert("div1的点击事件");    })  ;  $(document.getElementById("test2")).click(function(){      alert("div2的点击事件");  })  ;  $(document).click(function(){      alert("document的点击事件");  })  ;    $("#test3").click(function(event){        alert("下面你看不到其他弹窗事件。");        event.stopPropagation();        return  false;    });</script><div>    <input type="button" id="btn_test" value="测试用按钮"></div><script type="text/javascript">    $.fn.hello1=function(){        alert("ok,hello1");    }    $.fn.helloObj={        test1:function(){            alert("ok,test1");        }    };    $.fn.extend({        hello2:function(){            alert("ok,hello2");        },        helloObj2:{            test2:function(){                alert("ok,helloobj2.test2");            }        }    });    $("#btn_test").click(function(){        $("#df").hello1();        $("").helloObj.test1();        $("").hello2();        $().helloObj2.test2();    });</script></body></html>

【下一个问题，假如我要直接用$.插件名称，那么如何办？--改进】

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <title></title>    <script type="text/javascript" src="/content/scripts/jquery-1.7.1.min.js"></script></head><body style="border: 1px solid red; background: green;">             z<div style="width: 400px; height: 500px; background: gray;" id="test1">    这个是div1             z    <div style="width: 200px; height: 100px; background: white; margin: 50px;" id="test2">        这个是div2        <div id="test3" style="width: 90px; height: 20px; margin: 20px; border:1px solid green; color: red;">阻止事件冒泡。</div>    </div></div><script type="text/javascript">  $(document.getElementById("test1")).click(function(){        alert("div1的点击事件");    })  ;  $(document.getElementById("test2")).click(function(){      alert("div2的点击事件");  })  ;  $(document).click(function(){      alert("document的点击事件");  })  ;    $("#test3").click(function(event){        alert("下面你看不到其他弹窗事件。");        event.stopPropagation();        return  false;    });</script><div>    <input type="button" id="btn_test" value="测试用按钮"></div><script type="text/javascript">    $.fn.hello1=function(){        alert("ok,hello1");    }    $.fn.helloObj={        test1:function(){            alert("ok,test1");        }    };    $.fn.extend({        hello2:function(){            alert("ok,hello2");        },        helloObj2:{            test2:function(){                alert("ok,helloobj2.test2");            }        }    });    $.MyPlugin1={        p1:function(){ alert("p1 ok?");}    }    $("#btn_test").click(function(){        $("#df").hello1();        $("").helloObj.test1();        $("").hello2();        $().helloObj2.test2();        $.MyPlugin1.p1();    });</script></body></html>

看到没有？

$.fn是将对象附加到$("选择器") 后面，在里面用 $(this)来获取当前选择的对象。

$.插件名称直接附加到 $后面，前者调用方式 $("").xxx 后者调用： $.xxx