标签:define doc 方案 代码 method 直接 css 结束 def
jQuery插件有两种写法
本文介绍$.fn.myMethod=function(){}这种方式
直接上一个例子,这个例子是对页面上所有的超链接应用样式
; (function ($, window, document, undefined) {
$.fn.beautifulHyperlink = function (options) {
var defaults = { 'color': 'red', 'fontSize': '15px' };
var settings = $.extend({}, defaults, options);
return this.each(function () {
$(this).css({ 'color': settings.color, 'fontSize': settings.fontSize });
});
//this.css({ 'color': settings.color, 'fontSize': settings.fontSize });
}
})(jQuery, window, document)
//调用方法
$(function () {
$('a').beautifulHyperlink({ 'color': 'yellow' });
});
关键点如下:
;
,作用是防止其他js代码结束没有;
,导致js错误{}
作用是保证default不被改变,饭后后续用到defaults中的原始值最后贴一下终极优化方案,面向对象的思想
; (function ($, window, document, undefined) {
var Beautifier = function (eles, opts) {
this.$elements = eles;
this.options = opts;
this.defaults = { 'color': 'red', 'fontSize': '15px' };
this.settings = $.extend({}, this.defaults, this.options);
}
Beautifier.prototype = {
beautify: function () {
var thisObj = this; //指向当前对象Beautifier,否则下面settings引用不到,因为each中的this是被遍历对象中当前值的dom对象
return this.$elements.each(function () {
$(this).css({ 'color': thisObj.settings.color, 'fontSize': thisObj.settings.fontSize });
});
//return this.$elements.css({ 'color': this.settings.color, 'fontSize': this.settings.fontSize });
}
};
$.fn.beautifulHyperlinkEx = function (options) {
var beautifier = new Beautifier(this, options);
beautifier.beautify();
}
})(jQuery, window, document)
标签:define doc 方案 代码 method 直接 css 结束 def
原文地址:https://www.cnblogs.com/yinchh/p/10647661.html