jquery开发自定义的插件总结

来源：互联网发布：知天命何以为君子编辑：程序博客网时间：2024/05/01 14:24

前几天在玩jquery，今天就把这几天的学习做一个总结。

首先jquery开发自定义的控件分两大类（我自己这么分的），第一就是不带参数的插件，还有一类就是带参数的jquery插件了。

先从简单的开始。首先我们要了解一下什么叫jquery，jquery是对js的一系列的分装，说白了他就是js的分装以后的产物。但是我们用jquery来实现会更加的方便。使用jquery的插件也很简单。只需要jquery的官网下载最新版本的jquery，然后再我们的网页的head下面引用一下就好了。例如：

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery引用放的位子</title><script src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript">      <!--这里写自己插件的地方--></script></head>

这里有一点需要确定，就是jquery的引用的地方一定在你自己插件的地方前面，因为浏览器在解析你的html的时候，是从上到下的，也就是说如果你先写插件后引用jquery，那么浏览器根本就不认识你的插件中的标示符。

无参jquery插件的模板：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>不带参数的jquery插件开发</title>    <script src="http://code.jquery.com/jquery-latest.js"></script>    <script type="text/javascript">        (function($){            $.fn.extend({                myPlugName:function(){                    $(this).click(function(){                        alert($(this).val());                        });                    }            });            })(jQuery);    </script></head><body>    <input type="button" value="点击我" id="btn" /></body>    <script type="text/javascript">          $("#btn").myPlugName();    </script></html

无参的格式为：

(function($){     $.fn.extend({         myPlugName:function(){<!--myPlugName你的插件的名字，根据自己的情况来命名-->             //dosomethings         });         }     });    })(jQuery);

这里大概的解释一下，$.fn.extend是一个实例的扩展，但是$.extend是类的扩展，如果不明白多看一下解释，或者是去api.jquery.com看一下jquery的官方手册。jQuery和$是等价的，你可以认为是别名。myPlugName这个是插件的名字，根据自己的情况来命名自己的拆建吧！接着就是写一些你想要做的事情了！很简单吧！哈哈

带参数的jquery插件
首先看一下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title>    <script src="http://code.jquery.com/jquery-latest.js"></script>    <script type="text/javascript">        (function($){            $.fn.hilight=function(options){                var defaults={                    foreground:'red',                    background:'yellow'                    };                var opts = $.extend(defaults,options);                $(this).css("background-color",opts.background);                $(this).css("color",opts.foreground);            };        })(jQuery);    </script></head><body>    <div id="myDiv">This is a Params JQuery!</div></body><script type="text/javascript">    $("#myDiv").hilight({foreground:'blue'});</script></html>

这里和不带参数的jquery插件差不多，但是还有略微的不同，最后$("#myDiv").hilight({foreground:'blue'});来给jquery传递参数！如果不写的话，那就用jquery自带的默认的值。jquery插件其中的一个标准模板为：

(function($){            $.fn.hilight=function(options){                var defaults={                    foreground:'red',                    background:'yellow'                    };                var opts = $.extend(defaults,options);                //dosomethings            };        })(jQuery);

这里需要注意一句话，var opts = $.extend(defaults,options);这句话的意思是吧defaults的属性和options的属性合并并保存到opts中。不懂的话参考：http://api.jquery.com/jQuery.extend/

这里当然标准的模板不是单单上面这么一种还有很多种，我只是整理了一种为初学者学习！

最后请允许我拷贝一段话，希望对你有用：

jQuery插件的文件名推荐命名为jquery.[插件名].js，以免和其他JS库插件混淆。
所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身。可以通过this.each 来遍历所有的元素在插件头部加上一个分号，以免他人的不规范代码给插件带来影响。
所有的方法或函数插件，都应当以分号结尾，以免压缩时出现问题除非插件需要返回的是一些需要获取的变量，插件应该返回一个jQuery对象，以保证插件的可链式操作。
利于jQuery.extend()方法设置插件方法的默认参数，增加插件的可用性。在插件内部,this指向的是当前通过选择器获取的JQuery对象，而不像一般方法那样,内部的this指向的是DOM元素。

Stallman 先生认为最大的快乐是让自己发展的软件让大家来使用了！

/*******************part 2*****************************/

　　方法一：

 1 //name : 插件名
 2  (function(){
 3   　　$.fn.name = function(options){
 4   　　　　//自定义参数对象(插件自带) for example
 5   　　　　var defaults = {
 6   　　　　　　value1 : 'a',
 7   　　　　　　value2 : 'b'
 8   　　　　};
 9  　　    var opts = $.extend(defaults,options);    //此处options为用户设置的参数对象(用户传参)
10         //实现插件的代码 bla bla bla
11      }　
12  })(jQuery);

　　方法二：

 1 (function(){
 2     $.fn.extend({
 3         //name1,name2 对象名
 4         name1 : function(){
 5             //功能代码
 6         },
 7         name2 : function(){
 8             //功能代码
 9         },
10         //其他功能
11     });
12 })(jQuery);

二、具体实例：

q:　加减法功能

　　方法一：

 1 (function(){
 2     $.fn.add = function(options){
 3         var defaults = {a:0,b:0};
 4         var opts = $.extend(defaults,options);
 5         return opts.a + opts.b;
 6     }
 7     $.fn.dev = function(options){
 8         var defaults = {a:0,b:0};
 9         var opts = $.extend(defaults,options);
10         return opts.a - opts.b;
11     }
12 })(jQuery);

　　方法二：

 1 (function(){
 2     $.fn.extend({
 3         add : function(a,b){
 4             var n = a + b;
 5             return n;
 6         },
 7         dev : function(a,b){
 8             var n = a - b;
 9             return n;
10         }
11     });
12 })(jQuery);

调用代码：

1 var n = $(this).add(3,2);
2 alert(n); //5
3 var m = $(this).dev(3,2);
4 alert(m);//1

/*****************part3********************/

jQuery编写插件的两种方法

1.添加jQuery对象级的插件，是给jQuery类添加方法

写法：

[javascript] view plain copy
 
;(function($){  
    $.fn.extend({  
        "函数名":function(自定义参数){  
            //这里写插件代码  
        }  
    });  
})(jQuery);  
或者  
;(function($){  
    $.fn.函数名=function(自定义参数){  
        //这里写插件代码  
    }  
})(jQuery);  

调用方法：$("#id").函数名(参数);

2.jQuery类级别的插件，相当于添加静态方法

[javascript] view plain copy
 
;(function($){  
    $.extend({  
        "函数名":function(自定义参数){  
            //这里写插件代码  
        }  
    });  
})(jQuery);  
或者  
;(function($){  
    $.函数名=function(自定义参数){  
        //这里写插件代码  
    }  
})(jQuery);  

调用方法：$.函数名(参数);

0 0