jQuery插件使用

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();//通过选择器调取到实例的方法

ene
	

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" %>






	



	

		

			
书名
			
作者
			
点击量
		
		

			
圣墟
			
辰东
			
10万
		
		

			
飞剑问道
			
我吃西红柿
			
11万
		
		

			
杀神
			
逆苍天
			
22万
		
		

			
龙王传说
			
唐家三少
			
18万
		
		

			
斗破苍穹
			
天蚕拖豆
			
1万
		
	
	
	

		

			
书名
			
作者
			
点击量
		
		

			
圣墟
			
辰东
			
10万
		
		

			
飞剑问道
			
我吃西红柿
			
11万
		
		

			
杀神
			
逆苍天
			
22万
		
		

			
龙王传说
			
唐家三少
			
18万
		
		

			
斗破苍穹
			
天蚕拖豆
			
1万
		
	

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插件就介绍到这啦。