# 全局插件模板
/**
* 封装全局函数的插件模板
*/
;
(function($) {
$.extend({
"project": function(value) {
// 这里写插件代码
return 'OK';
}
});
})(jQuery);
// 插件应用
$(function() {
alert(jQuery.project());
});
# 封装对象方法的插件模板
/**
* jQuery 颜色插件
* 采用封装对象方法的方式
*/
// 1. 基本框架
// 前面写 ; 是因为防止其他插件的结尾没有写分号，打包的时候出错
;
(function($) {
// 插件代码
})(jQuery);
// 2. 采用扩展 jQuery.fn.extend() 的方法
;
(function($) {
$.fn.extend({
"color": function(value) {
// 这里写插件代码
// 设置元素的color，如果value==null，则返回元素本身的color值
return this.css('color', value);
}
});
})(jQuery);
// 3. 插件应用
$(function(){
alert($('div').color());
alert($('div').color('red'));
})
# 自定义选择器插件
/**
* 自定义选择器插件
*/
;
(function($) {
$.extend($.expr[':'], {
"between": function(a, i, m) {
var tmp = m[3].split(',');
return tmp[0]-0 < i && i < tmp[1] - 0;
}
});
})(jQuery);
// 插件应用
$(function() {
$('div:between(2, 5)').css('background', 'white');
});
