jquery插件开发
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>HTML5 时钟</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
.clocks {
height: 500px;
margin: 25px auto;
position: relative;
width: 500px;
}
</style>
</head>
<body>
<ul>
<li>
<a href="http://www.webo.com/liuwayong">我的微博</a>
</li>
<li>
<a href="http://http://www.cnblogs.com/Wayou/">我的博客</a>
</li>
<li>
<a href="http://wayouliu.duapp.com/">我的小站</a>
</li>
</ul>
<div>
这是div标签
</div>
</body>
<script>
/*
1.直接扩展jquery 添加方法 sayHello();
*/
// $.extend({
// sayHello: function(name) {
// alert('Hello,' + (name ? name : 'Dude'));
// }
// });
// $.sayHello(); //调用
// $.sayHello('Wayou'); //带参调用
/*
2.在全局空间定义myPlugin
*/
// $.fn.myPlugin = function(options) {
// var defaults = {//定义默认参数
// 'color': 'red',
// 'fontSize': '12px'
// };
// var settings = $.extend({}, defaults, options);//合并用户的options 和默认的defaults到插件空间
// return this.css({//返回方法,利于链式操作
// 'color': settings.color,
// 'fontSize': settings.fontSize
// });
// }
// $(function(){
// $('a').myPlugin({
// 'color': '#2C9929',
// 'fontSize': '36px'
// });
// $('div').myPlugin();
// })
/*
3.在全局空间中定义匿名函数,中定义一个插件
在匿名函数前面加一个";"是一个好的习惯
($, window, document, undefined)匿名函数的参数是为了防止其他人全局屏蔽这几个参数
*/
;(function($, window, document, undefined){
//定义Beautifier的构造函数
var Beautifier = function(ele, opt) {
this.$element = ele,
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration':'none'
},
this.options = $.extend({}, this.defaults, opt)
}
//定义Beautifier的方法
Beautifier.prototype = {
beautify: function() {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
});
}
}
//在插件中使用Beautifier对象
$.fn.myPlugin = function(options) {
//创建Beautifier的实体
var beautifier = new Beautifier(this, options);
//调用其方法
//return beautifier;//用于3.1调用
return beautifier.beautify();//用于3.2调用
}
})(jQuery, window, document);
//3.1调用
// $(function() {
// $('a').myPlugin({
// 'color': '#2C9929',
// 'fontSize': '12px'
// }).beautify();
// })
//3.2调用
$(function(){
$('a').myPlugin({
'color': '#2C9929',
'fontSize': '20px',
'textDecoration': 'underline'
});
});
</script>
</html>