JQ jQuery插件如何开发

onestopweb

浏览: 702110 次

最近访客更多访客>>

vincepisces

heishehui

wtomato

hushouhao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

境-JS

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.10.1.min.js"></script>
</head>
<body>
<script>
$.extend({
	sayHello: function(name) {
		console.log('Hello,' + (name ? name : 'Dude') + '!');
	}
})
$.sayHello(); //调用
$.sayHello('Wayou'); //带参调用
</script>
</body>
</html>

效果图：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.10.1.min.js"></script>
</head>
<body>
<script>
$.extend({
	log: function(message) {
		var now = new Date(),
			y = now.getFullYear(),
			m = now.getMonth() + 1, //！JavaScript中月分是从0开始的
			d = now.getDate(),
			h = now.getHours(),
			min = now.getMinutes(),
			s = now.getSeconds(),
			time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;
		console.log(time + ' My App: ' + message);
	}
})
$.log('initializing...'); //调用
</script>
</body>
</html>

效果图：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.10.1.min.js"></script>
</head>
<body>
<ul>
	<li><a href="###">阅谁问君诵，水落清香浮</a></li>
	<li><a href="###">阅谁问君诵，水落清香浮</a></li>
	<li><a href="###">阅谁问君诵，水落清香浮</a></li>
</ul>
<script>
$.fn.myPlugin = function() {
	//在这里面,this指的是用jQuery选中的元素
	//example :$('a'),则this=$('a')
	this.css('color', 'red');
}
$(function(){
	$('a').myPlugin();
})
</script>
</body>
</html>

效果图：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.10.1.min.js"></script>
</head>
<body>
<ul>
<li>
	<a href="###">阅谁问君诵，水落清香浮</a>
</li>
<li>
	<a href="###">阅谁问君诵，水落清香浮</a>
</li>
<li>
	<a href="###">阅谁问君诵，水落清香浮</a>
</li>
</ul>
<script>
;(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.beautify();
	}
})(jQuery, window, document);
$(function(){
	//$('a').myPlugin();
	$('a').myPlugin({
        'color': '#2C9929',
        'fontSize': '20px',
        'textDecoration': 'underline'
    });
})
</script>
</body>
</html>

效果图：