jquery开发js插件

1.需要掌握的知识点

　　1）(function($){...}(jQuery)):实际上就是匿名函数并且函数用（）阔起来，形成闭包，外界对其内部函数没有影响

　　　　$(function(){…});   jQuery(function($) {…});  $(document).ready(function(){…})用法都是一样的，我们自定义插件时需要用到

　　2）$.extend()，$.fn.extend()区别

　　　　最主要的特征：$.extend()是扩展的是Jquery类的静态成员

　　　　　　　　　　　$.fn.extend()扩展的是Jquery类实例化对象成员

2.自定义控件分类：带参插件；不带参插件

　　1）不带参插件

<!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
View Code
方式一：
(function($){
     $.fn.extend({
         myPlugName:function(){<!--myPlugName你的插件的名字，根据自己的情况来命名-->
             //dosomethings
         });    
     }
     });    
})(jQuery);
方式二：
(function($){
     $.fn.myPlugName=function(){<!--myPlugName你的插件的名字，根据自己的情况来命名;$.fn.名字是$的原型添加属性或者方法-->
　　　　//dosomethings
　　　　}
})(jQuery);
$.fn.extend是实例的扩展；$.extend是类的扩展

　　2）带参插件

<!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>
View Code
方式一：
(function($){
            $.fn.hilight=function(options){
                var defaults={
                    foreground:'red',
                    background:'yellow'    
                };
                var opts = $.extend(defaults,options);//将defaults与options结合在一起放到$类中作为其成员变量再被赋值给opts在这个区域内做相应操作
                //dosomethings
            };
        })(jQuery);
方式二：
(function($){
　　　　　　　$.fn.hilight=function(options){
　　　　　　　　　　var defaults={
　　　　　　　　　　　　foregroup:'red',
　　　　　　　　　　　　backgroup:'yellow'
　　　　　　　　　　}
　　　　　　　　};
　　　　　　　　//这里还要将参数放到$中
　　　　　　　　var opts=$.extends(defaults,options)
　　　　　　　　//dosomethings
　　　　})(jQuery);

 

posted @ 2017-06-20 21:37  王吉平  阅读(194)  评论(0)  编辑  收藏  举报