Jquery插件-笔记
一 jquery类级别插件开发
1、
jQuery.extend({
foo: function() {
alert('This is a test. This is only a test.');
},
bar: function(param) {
alert('This function takes a parameter, which is "' + param +'".');
}
});
----------------
2、使用命名空间定义自己的jquery插件：
jQuery.myPlugin = {
foo:function() {
alert('This is a test. This is only a test.');
},
bar:function(param) {
alert('This function takes a parameter, which is "' + param + '".');
}
};
采用命名空间的函数仍然是全局函数，调用时采用的方法：
$.myPlugin.foo();
$.myPlugin.bar('baz');
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
二 jquery对象级别插件开发
// plugin definition
$.fn.hilight = function(options) {
// Extend our default options with those provided.
// Note that the first arg to extend is an empty object -
// this is to keep from overriding our "defaults" object.
var opts = $.extend({}, $.fn.hilight.defaults, options);
// Our plugin implementation code goes here.
};
// plugin defaults - added as a property on our plugin function
$.fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
};
现在使用者可以包含像这样的一行在他们的脚本里：
//这个只需要调用一次，且不一定要在ready块中调用
$.fn.hilight.defaults.foreground = 'blue';
接下来我们可以像这样使用插件的方法，结果它设置蓝色的前景色：
$('#myDiv').hilight();
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
结论：
this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性，方法
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jquery的方法和属性值。
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// 创建一个闭包
(function($) {
// 插件的定义
$.fn.hilight = function(options) {
debug(this);
// build main options before element iteration
var opts = $.extend({}, $.fn.hilight.defaults, options);
// iterate and reformat each matched element
return this.each(function() {
$this = $(this);
// build element specific options
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
// update element styles
$this.css({
backgroundColor: o.background,
color: o.foreground
});
var markup = $this.html();
// call our format function
markup = $.fn.hilight.format(markup);
$this.html(markup);
});
};
// 私有函数：debugging
function debug($obj) {
if (window.console && window.console.log)
window.console.log('hilight selection count: ' + $obj.size());
};
// 定义暴露format函数
$.fn.hilight.format = function(txt) {
return '<strong>' + txt + '</strong>';
};
// 插件的defaults
$.fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
};
// 闭包结束
})(jQuery);