前一篇介绍可以通过添加全局函数来开发 jQuery
插件,实际上全局函数就是对 jQuery
对象进行扩展,而添加实例方法就是对 jQuery.prototype
对象进行扩展,我们可以使用别名 - jQuery.fn
。
添加实例方法
(function($) {
$.fn.myMethod = function() {
alert('it works');
}
}(jQuery));
此时页面内只有一个 div
元素,添加新增的实例方法:
$('div').myMethod();
进入页面后:
实例方法添加成功。
切换类插件
我们来写一个用于切换元素类的小插件。页面有个小按钮,当点击按钮后我们希望能切换颜色:
<style>
.blue {
background-color: lightblue;
}
.green {
background-color: lightgreen;
}
</style>
<button class="blue">change</button>
添加一个实例方法 switchClass
来实现该效果:
(function($) {
$.fn.switchClass = function(class1, class2) {
if (this.hasClass(class1)) {
this.removeClass(class1).addClass(class2);
}
else if (this.hasClass(class2)) {
this.removeClass(class2).addClass(class1);
}
};
})(jQuery);
使用该插件方法:
$('button').click(function() {
$('button').switchClass('blue', 'green');
});
此时,点击按钮后:
再点击颜色会切换回蓝色。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。