jquery插件开发

 

(function($){
$.extend({
Alert: function(str) {
if(!str) return;
alert(str)
console.log(str);
}
})
})(jQuery);
$.Alert(); //直接调用
$.Alert('Hello'); //调用时带参

注：但这种方式无法利用jQuery强大的选择器带来的便利，要处理DOM元素以及将插件更好地运用于所选择的元素身上，还是需要使用下面第二种开发方式。

 

 

 

 

(function($){
$.fn.bgColor = function(cor){
//这里的$(this)就是选择的那个元素
$(this).css('background-color', cor);
}
})(jQuery)
$('div').bgColor('red'); //调用
(function($){
//定义Beautifier的构造函数
var Beautifier = function(ele, opt) {
this.$element = ele,
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration':'none'
},
this.options = $.extend({}, this.defaults, opt)
}
//定义Beautifier的方法
Beautifier.prototype = {
beautify: function() {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
});
}
}
//在插件中使用Beautifier对象
$.fn.mupiao = function(options) {
//创建Beautifier的实体
var beautifier = new Beautifier(this, options);
//调用其方法
return beautifier.beautify();
}
})(jQuery)
$('div').mupiao( {'color': 'green', 'fontSize': '18px', 'textDecoration':'none'}); //调用