如何开发jQuery插件

插件：
基于一个框架的扩展。

演示一个进度条插件（基于jquery的开发）
jquery扩展方法（任何一个成熟的框架都有扩展自身的方法）

// jQuery扩展方法
$.fn.test = function() {}
$(selector).test();

// 变色的插件
<span class="btn">点击我</span>
<span class="btn">点击我</span>
<script type="text/javascript">
$.fn.changeColor = function() {
	$(this).click(function() {
		$(this).css('color', 'red');
	});
}
// 在jquery上扩展了一个新方法
$('.btn').changeColor();
</script>

//进度条插件
<style type="text/css">
.progress {
	height: 20px;
	border: 1px solid red;
}
.bar {
	background: green;
	height: 100%;
	width: 0px;
}
</style>
<div class="progress">
	<!-- <div class="bar"></div> -->
</div>

<script type="text/javascript">
	
$.fn.progress = function() {
	$(this).html('<div class="bar"></div>');
	loop();
	function loop() {
		var width = $(".bar").width() / 1 + 20 + 'px';
		$(".bar").css('width', width);
		setTimeout(function() {
			if (parseInt(width) <= 100) {
				loop();
			}
		}, 300);
	}
}


$('.progress').progress();
</script>