根据JQuery开发自定义插件。

原文地址：

http://www.cnblogs.com/Jimmy009/archive/2013/01/17/jquery%E6%8F%92%E4%BB%B6.html

无参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 先生认为最大的快乐是让自己发展的软件让大家来使用了！

秒客网

根据JQuery开发自定义插件。

相关文章