简单的插件demo
//sample:扩展jquery对象的方法,bold()用于加粗字体。 (function ($) { $.fn.extend({ "bold": function () { ///<summary> /// 加粗字体 ///</summary> return this.css({ fontWeight: "bold" }); } }); })(jQuery);调用$(function(){ $.("p").bold();});
为了方便用户创建插件,jquery提供了jQuery.extend()和jQuery.fn.extend()方法。
jQuery.extend()
一、类级别($.extend)
类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法。
开发扩展其方法时使用$.extend方法,即jQuery.extend(object);
jQuery.extend(object) ,一个参数的用于扩展jQuery类本身,也就是用来在jQuery类/命名空间上增加新函数,或者叫静态方法,例如jQuery内置的 ajax方法都是用jQuery.ajax()这样调用的,有点像 “类名.方法名” 静态方法的调用方式。下面我们也来写个jQuery.extend(object)的例子:
//扩展jQuery对象本身 jQuery.extend({ "minValue": function (a, b) { ///<summary> /// 比较两个值,返回最小值 ///</summary> return a < b ? a : b; }, "maxValue": function (a, b) { ///<summary> /// 比较两个值,返回最大值 ///</summary> return a > b ? a : b; } }); //调用 var i = 100; j = 101; var min_v = $.minValue(i, j); // min_v 等于 100 var max_v = $.maxValue(i, j); // max_v 等于 101
二、 对象级别
对象级别则可以理解为基于对象的拓展,如$("#table").changeColor(...); 这里这个changeColor呢,就是基于对象的拓展了。
开发扩展其方法时使用$.fn.extend方法,即jQuery.fn.extend(object);
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:100px;
height:100px;
background:blue;
}
</style>
<script src="jquery-1.7.2.js"></script>
<script>
$(function(){
//定义一闭包个区域 防止插件污染
(function($){
//使用jq插件机制的扩展方法$.fn.extend()编写插件
$.fn.extend({
"bold":function(){
return this.css(‘fontWeight‘,‘bold‘);
},
"bkred":function(){
return this.css(‘background‘,‘red‘);
},
"size_a":function(options){
var options=$.extend(defanlts,options||{});//默认参数和传参进行合并
this.css({
‘width‘:options.width,
‘height‘:options.height
});
return this;//为了可以链式调用,需要把对象返回,否则报错
}
});
//设置默认值-默认参数
var defanlts = {
‘width‘:‘100px‘,
‘height‘:‘100px‘
};
})($);
$(".p").bold().css(‘fontSize‘,‘50px‘).css(‘margin‘,0);
$(".p").bkred().on(‘click‘,function(){
alert(‘我是p元素‘)
});
$("#box").size_a({‘width‘:300,‘height‘:200}).on(‘click‘,function(){
$(this).css(‘background‘,‘red‘);
});
});
</script>
</head>
<body>
<div class="box" id="box">123</div>
<p class="p">我</p>
<p>我</p>
</body>
</html>
如有不解请参考http://jingyan.baidu.com/album/e75aca85550216142edac63b.html?picindex=1
http://www.cnblogs.com/joey0210/p/3408349.html#