jquery开发js插件

1.需要掌握的知识点

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

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

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

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

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

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

　　1）不带参插件

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml">

"Content-Type" content="text/html; charset=utf-8" />

    
    



    "button" value="点击我" id="btn" />


    




方式一：
(function($){
     $.fn.extend({
         myPlugName:function(){
             //dosomethings
         });    
     }
     });    
})(jQuery);
方式二：

(function($){
     $.fn.myPlugName=function(){
　　　　//dosomethings
　　　　}
})(jQuery);
$.fn.extend是实例的扩展；$.extend是类的扩展

　　2）带参插件


"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml">

"Content-Type" content="text/html; charset=utf-8" />

    
    



    
"myDiv">This is a Params JQuery!






方式一：
(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);