<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body id="body">
<ul>
<li>
<a href="">我的微博</a>
</li>
<li>
<a href="">我的博客</a>
</li>
<li>
<a href="">我的小站</a>
</li>
</ul>
<p>这是p标签不是a标签,我不会受影响</p>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
/**
* 1、自调用匿名函数,构造命名空间,防止污染全局环境或者被全局环境所污染
* 2、前面的分号,表示防止他人代码结尾缺失分号,导致自己代码异常无法执行
* 3、传入全局变量对象以参数形式传递到插件内部,可以提高访问速度
* 4、为了得到没有被修改的undefined,采取形参声明、实参不传入的方式,他就是最真实的'undefined'
*/
;(function($,window,document,undefined){
var myPlugin = "myPlugin";
/**
* 采用面向对象的方式,处理插件中的逻辑方法
*/
//定义Beautifier构造函数
var Beautifier = function(ele,opt){
//构造函数调用,this指的是Beautifier对象,如果作为普通函数调用,this指的是window对象
this.elemet = ele;
this.$elemet = $(ele);
var defaults = {
color:'red',
fontSize:'12px',
textDecoration:'none'
};
this.options = $.extend([],defaults,opt);
this.init();
};
//定义Beautifier的方法,定义在它的原型对象上,达到所有实例共享方法
Beautifier.prototype = {
init:function(){
//beautify()方法在构造函数里面,由this调用,那里的this指的是Beautifier对象,这里的this就是那里的this,也是Beautifier对象
return this.$elemet.css({
color:this.options.color,
fontSize:this.options.fontSize,
textDecoration:this.options.textDecoration
});
},
test:function(){
console.log("test function...");
}
};
/**
* 定义插件方法,在插件中使用Beautifier对象方法来处理逻辑
*/
$.fn[myPlugin] = function(options){
//插件方法内部,this对象指的是选择器返回的集合
this.each(function() {
//这里的this指的是集合中的dom元素对象
//判断插件逻辑是否已经完成了对当前dom对象的处理,如果已经处理,则不再重复处理
if (!$.data(this, "plugin_" + myPlugin)) {
$.data(this, "plugin_" + myPlugin, new Beautifier(this,options));
}
});
//返回【选择器返回的集合】对象,实现链式调用
return this;
};
})(jQuery,window,document);
//使用插件
$("li a").myPlugin({
color:'red',
fontSize:'30px',
textDecoration:'underline'
});
</script>
</html>
参照:
http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html
http://blog.jobbole.com/30550/