<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.1.0.js">
</script>
<script type="text/javascript">
// 封装jq插件
// 面向对象思想
// 设置一个构造函数
var Beautifuler = function(ele, opt) {
this.element = ele,
// 设置默认样式
this.defaultStyle = {
color: 'red',
fontSize: '16px'
},
// 使用extend方法，根据外部是否传入新样式来决定使用哪一套样式表
this.setting = $.extend({}, this.defaultStyle, opt);
};
// 向原型中挂载方法，在方法中把样式添加进选中的节点
Beautifuler.prototype = {
beautiful: function() {
// 这里边的this指向的是创建出来的对象
return this.element.css({
'color': this.setting.color,
'fontSize': this.setting.fontSize
});
}
}
// 把定义出来的对象挂载进jq插件
$.fn.setFont = function(option) {
// 创建对象实例
var beautifuler = new Beautifuler(this, option);
// 调用对象方法，让字体样式发生改变
return beautifuler.beautiful();
}
$(function() {
// 调用插件修改字体样式
$('p').setFont({
color: 'green',
fontSize: '26px'
})
})
</script>
</head>
<body>
<p>好桑心，这不是我要的那种结果，结果~</p>
</body>
</html>
jQuery 插件面向对象的封装
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 一旦该代码被引入则会立即执行，这样插件马上回在内存中出现，以后调用该插件就不需要再次执行这段代码了，而是直接从内存...
- 1、B/S架构，java2、css-一件美丽的衣裳3、标示class-通用性比较强id-一个里面ID不可以重复st...
- 前言 最近在折腾jQuery插件，写成插件的目的就是为了实现功能与项目相分离，使得这个代码在下一个项目中能直接引用...
- 一.对象和类的概念 对象：真实存在的唯一事物 类：同一事物的公共属性与行为的抽取 面向对象的核心思想：找适合的对象...
