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

最新推荐文章于 2024-05-01 22:48:44 发布

转载最新推荐文章于 2024-05-01 22:48:44 发布 · 685 阅读

参考资料：

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