jq插件的编写方法（自定义jq插件）

jq插件用起来很方便，给客户端的编程带来很大的好处，节省大量的开发时间

我用Jq也有好长时间了，今天在一个项目中用一个插件的时候，忽然感觉这个插件有一个bug

这让我心生了自己写一个jq插件的想法

下面是一个例子：

jQuery（以下简称JQ）是一个功能强大而又小巧的JS框架，现在很多网站都在使用JQ，本站也不例外。本文教大家如何写一个属于你自己的JQ插件。

本JQ插件例子是在你网站的文章结尾处添加你的版权。

JQ插件标准的封装代码如下，首先需要闭包：

<script type="text/javascript">
(function ($) {
	//这里放入插件代码
})(jQuery);
</script>

这是jQuery官方的插件开发规范，这样写是作用是：
1. 避免全局依赖。
2. 避免第三方破坏。
3. 兼容jQuery操作符’$'和’jQuery’
接着给插件加入主体：

<script type="text/javascript">
(function ($) {
	$.fn.userCp = function(options) { //定义插件的名称，这里为userCp
		var dft = {
			//以下为该插件的属性及其默认值
			cpBy: "dafi", //版权所有者
			url: "http://www.qiandabao.com", //所有者链接
			size: "12px", //版权文字大小
			align: "left" //版权文字位置，left || center || right
		};
		var ops = $.extend(dft,options);
		var style = 'style="font-size:' + ops.size + ';text-align:' + ops.align + ';"'; //调用默认的样式
		var cpTxt = '<p' + ' ' + style + '>此文章版权归<a target="_blank" href="' + ops.url + '">' + ops.cpBy + '</a>所有</p>'; //生成版权文字的代码
		$(this).append(cpTxt); //把版权文字加入到想显示的div
	}
})(jQuery);
</script>

OK了，这个插件已经完成了，接下来我们来看看调用的方式。

比如你文章所在的div的id=”article-content”，那么在此div后面（先读取到了该div，该div才可以作为后面的JS的对象）加上JS代码：

<script type="text/javascript">
	$("#article-content").userCp();
<script">

其实也不是一定要放到该div的后面，比如要放到head区域里的话，就要使用JQ的预读功能，也就是把页面所有的dom都读取完之后，才执行里面的JS：

<script type="text/javascript">
$(function(){ //官方解释：在dom文档载入完成后执行的函数
		$("#article-content").userCp();
});
<script">

如果不想使用默认的内容，比如要修改版权所有者名字、网址、文字大小和靠右显示等，那就给这个插件传几个参数：

<script type="text/javascript">
	$("#article-content").userCp({
		cpBy: " T ",
		url: "http://www.qiandabao.com",
		size: "16px",
		align: "right"
	});
<script">

在实际的应用中，我们当然不会写这么一个插件，因为直接用非封装的方法或者直接改页面的源码会更快更方便，我只是为了给大家一个demo，所以才写了这个鸡肋的插件。