jQuery 插件-(初体验一)
1.jquery有2个扩展方法:
- jquery.fn.extend=jquery.prototype.extend
- jquery.extend
(两者的区别放在后面文章说)
2.具体实例结构:
//创建及时作用域
(function ($) {
// 通过字面量创造一个对象,存储我们需要的共有方法
var methods = {
inint: function (options) {
//返回“this”(函数each()的返回值也是this),以便进行链式调用。
return this.each(function () {
// 为每个独立的元素创建一个jQuery对象
var $this = $(this);
//设置默认值
var defaults = {
proName: 'zqz'
};
if (typeof (options) == 'undefined') {
settings = $.extend({}, defaults);
} else {
var settings = {
proName: options.proName,
Events: handlers.zqzClick($this, options)
};
settings = $.extend({}, defaults, settings);
}
})
}
};
//事件
var handlers = {
zqzClick: function ($this, options) {
$this.bind('click', options.zqzClick);
}
};
//向jQuery中被保护的“fn”命名空间中添加你的插件代码,用“zqz”作为插件的函数名称
$.fn.zqz = function () {
// 检验方法是否存在
var method = arguments[0];
if (methods[method]) {
method = methods[method];
arguments = Array.prototype.slice.call(arguments, 1);
// 如果方法不存在,检验对象是否为一个对象(JSON对象)或者method方法没有被传入
} else if (typeof (method) == 'object' || !method) {
method = methods.inint;
} else {
$.error('asdasd');
return this;
}
return method.apply(this, arguments);
}
})(jQuery)
//调用
$(function () {
//$('#blanckjh').zqz();
$('#blanckjh').zqz({
'proName': 'wdx',
'zqzClick': function () {
alert("zqz");
}
});
})
3.插件中涉及到的一些概念与注意事项放在后面文章说
更多精彩文章请访问GitHub博客
无特殊声明的文章均为原创!
原创文章如若转载,请注明出处!http://www.cnblogs.com/zqzjs/
告诫自己即使再累,也不要忘记学习。成功没有捷径可走,只有一步接着一步走下去!