第一步:要想封装自己的jq插件,要先了解jquery插件运行机制。jQuery使用无new的构造方式,直接$(' ')进行构造,相当于new jQuery()。看下面例子。
jQuery将jQuery.prototype赋值给jQuery.prototype.init的prototype作为中转站,最终return出了一个jQuery实例。将上述代码写在一个自执行函数内(形成私有作用域,避免命名空间污染),就构成了jQuery的核心框架。
第二步: jquery的两种使用方法 $.function() 和 $("selector");
1 $.function() 是在jquery原型对象设置的方法。我们可以通过 $.fn.extend()去扩展。例如:
$.fn.extend({
getMax:function(a,b){ //getMax 自定义方法。3
var result=a>b?a:b;
console.log(result);
}
});
$("input").getMax(1,2); //使用方法
2 $("selector")是在jquery对象上设置的方法。我们可以通过$.extend()去扩展。例如:
$.extend({
print1:function(name){ //print1是自己定义的函数名字,括号中的name是参数
console.log(name)
}
});
$.print1("222") ; //使用方法
所以我们的扩展插架也有两种方式。
第一种:在jQuery对象上添加了一个静态方法。所以我们调用通过$.extend()添加的函数时直接通过$符号调用($.myfunction())而不需要选中DOM元素($('selector').myfunction())。
$.extend({
sayHello: function(name) {
console.log('Hello,' + (name ? name : 'Dude') + '!');
}
})
$.sayHello(); //调用
$.sayHello('test'); //带参调用
第二种方法:运用面向对象的思维方式,在jquery的原型上扩展方法。这就要用到 $.fn.extend({})这个方法了。
;(function($,window,document,undefined){ //用一个自调用匿名函数把插架代码包裹起来,防止代码污染
$.fn.插件名称 = function (options) {
var defaults = { //defaults 使我们设置的默认参数。
Event : "click", //触发响应事件
msg : "Holle word!" //显示内容
};
var options = $.extend(defaults, options); //将传入参数和默认参数合并
var $this = $(this); //当然响应事件对象
$this.live(options.Event, function (e) { //功能代码部分,绑定事件
alert(options.msg);
});
}
})(jQuery,window,document);
//调用插件
$("#test").插件名称({
Event : "click", //触发响应事件
msg : "测试插件!" //显示内容
});
是不是很简单。