1.需要掌握的知识点
1）(function($){...}(jQuery)):实际上就是匿名函数并且函数用（）阔起来，形成闭包，外界对其内部函数没有影响
$(function(){…}); jQuery(function($) {…}); $(document).ready(function(){…})用法都是一样的，我们自定义插件时需要用到
最主要的特征：$.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
方式一：
(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>
方式一：
(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);