1.什么是jQuery插件？
往jquery类库里面去扩展方法，这类方法就是jquery插件。
2.json的三种格式
1 对象 2 列表/数组 3 混合模式（下面由代码演示）
3.$.extend和$.fn.extend！
//$.extend是用来扩充jQuery类属性或方法所用
var e3={};
//用后面的对象来扩充前面的对象
$.extend(e3,i1);
//如果两个对象里面有键是一样的 之前的会被后面的所覆盖 新的会扩充到里面去
$.extend(e3,i1,i3);
console.info(e3);
//$.fn.extend是用来扩充jQuery实例属性或方法所用
$.fn.extend({
hello:function(){
alert('上午好');
}
});
$('#a1').hello();//通过选择器调取到实例的方法
<a href="#" id='a1'>ene</a>
4.jQuery插件的添加。
其实就是给jQuery添加新的实例方法或类方法，然后将功能封闭在其中，外面调用。
首先添加插件命名规则：jquery.xxx.js 里面再写一个js文件 是用来写$(function(){ }) 里面的代码 外面这个$(function(){ }) 里可以调用这个方法 还有一些css文件都可放入这里
下面写一个鼠标浮上去变颜色的例子：
当前jsp页面：<%@ include file="/jsp/head.jsp" %>里面已经提取了所有公用的那些引入jQuery文件 多行集于一行。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/jsp/head.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//这边直接用标签调方法 里面传参
$(function(){
$('table').bgColor({
yellow:'pnk',
red:'green',
green:'fen'
});
});
</script>
</head>
<body>
<body>
<table id="t1" border="1" width="100%">
<tr>
<td>书名</td>
<td>作者</td>
<td>点击量</td>
</tr>
<tr>
<td>圣墟</td>
<td>辰东</td>
<td>10万</td>
</tr>
<tr>
<td>飞剑问道</td>
<td>我吃西红柿</td>
<td>11万</td>
</tr>
<tr>
<td>杀神</td>
<td>逆苍天</td>
<td>22万</td>
</tr>
<tr>
<td>龙王传说</td>
<td>唐家三少</td>
<td>18万</td>
</tr>
<tr>
<td>斗破苍穹</td>
<td>天蚕拖豆</td>
<td>1万</td>
</tr>
</table>
<table id="t2" border="1" width="100%">
<tr>
<td>书名</td>
<td>作者</td>
<td>点击量</td>
</tr>
<tr>
<td>圣墟</td>
<td>辰东</td>
<td>10万</td>
</tr>
<tr>
<td>飞剑问道</td>
<td>我吃西红柿</td>
<td>11万</td>
</tr>
<tr>
<td>杀神</td>
<td>逆苍天</td>
<td>22万</td>
</tr>
<tr>
<td>龙王传说</td>
<td>唐家三少</td>
<td>18万</td>
</tr>
<tr>
<td>斗破苍穹</td>
<td>天蚕拖豆</td>
<td>1万</td>
</tr>
</table>
</body>
</html>js文件：
$(function(){
//写一个默认的颜色
var i={
yellow:'yellow',
red:'red',
green:'green'
}
$.fn.extend({
//使用return原因是让实例方法支持链编程 好比stringbuffer
bgColor:function(option){
//把后面传的参数覆盖默认的参数
$.extend(i,option);
//有多个实例 所以需要遍历调用这个方法的实例
//这里this指插件本身 可以看成一个jQuery实例
return this.each(function(){
//给默认值 eq下标第一个 gt匹配所有大于给定值的元素
//this是当前元素
$("tr:eq(0)",this).addClass(i.yellow);
$("tr:gt(0)",this).addClass(i.red);
//添加动态效果
$("tr:gt(0)",this).hover(function(){//鼠标附上去当前这个颜色变成后面设置的这个
$(this).removeClass().addClass(i.green);
},function(){//鼠标移开就变回去
$(this).removeClass().addClass(i.red);
});
});
}
});
});效果如下：
有关jQuery插件就介绍到这啦。