jQuery插件

1. 插件机制简介

往jquery类库里面去扩展方法，这类方法就是jquery插件

2. json的三种格式

第一种：
2.1 对象

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

第二种
2.2 列表/数组

$(function(){
		//json对象的字符串体现形式
		var jsonObj1 = {
				sid:'s001',
				sname:'zrh'
		}
		console.log(jsonObj1);//通过console.log输出到控制台去
		//json数组的字符串体现形式
		var jsonArray1=[1,3,4,5];
		console.log(jsonArray1)
	})

第三种
2.3 混合模式

输出结果在控制台显示为：

3、$ .extend和$.fn.extend

4、 jQuery插件开发实例（demo7.jsp demo8.jsp demo9.jsp）

4.1 命名
jquery.xxx.js

把需要的css样式放这里面 jquer.table.css

@charset "UTF-8";
	  
.fen {
	background: #ff66ff;
}

.yellow {
	background: #ffff66;
}

.red {
	background: #ff3333;
}

.blue {
	background: #9999ff;
}

.green {
	background: #bbff99;
}
.hui {
	background: #d6d6c2;
}

把共有的jsp代码放这里面 ： jquery.table.js

$(function(){
	var defaults = {
			head : 'fen',
			out: 'yellow',
			over :'red'
	}
	
	$.fn.extend({
		//使用return的原因是让该实例方法支持链编程，好比Stringbuffer
		bgColor:function(option){
			$.extend(defaults,option)
			//这里的this指的是插件本身，可以看成一个jquery实例
			return this.each(function(){
				
				//这里的this指的是当前元素
				$("tr:eq(0)",this).addClass(defaults.head);
				$("tr:gt(0)",this).addClass(defaults.out);
				
				//添加动态效果
				$("tr:gt(0)",this).hover(function(){
					$(this).removeClass().addClass(defaults.over);
				},function(){
					$(this).removeClass().addClass(defaults.out);
					})
			})
		}
	});
	
})

head.jsp

写完上面的之后我们的代码就大大简化了
demo7
demo8
demo9代码相似:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>











	

		

			
书名
			
作者
			
点击量
		
		

			
圣墟
			
辰东
			
10万
		
		

			
飞剑问道
			
我吃西红柿
			
11万
		
		

			
杀神
			
逆苍天
			
22万
		
		

			
龙王传说
			
唐家三少
			
18万
		
		

			
斗破苍穹
			
天蚕拖豆
			
1万
		
	
	
	

		

			
书名
			
作者
			
点击量
		
		

			
圣墟
			
辰东
			
10万
		
		

			
飞剑问道
			
我吃西红柿
			
11万
		
		

			
杀神
			
逆苍天
			
22万
		
		

			
龙王传说
			
唐家三少
			
18万
		
		

			
斗破苍穹
			
天蚕拖豆
			
1万