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);