jQuery插件及ajax

首先我们需要导入js库

①引入js代码。

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"> </script>

②jquery程序入口的几种方式，如下图:

在讲jquery插件之前，我先来讲一下json

2. json的三种格式
2.1 对象
{sid:‘s01’,sname:‘zs’}

 $(function(){
    	//json对象的字符串体现形式 
    	var jsonObj1={
    			sid:"s001",
    			sname:'zhangsan'
    	};
    	console.info(jsonObj1)
    	
    })

效果如下图:

2.2 列表/数组,下标从0开始
[1,3,4,5]

$(function(){
    	//json对象的字符串体现形式 
    	var jsonObj1={
    			sid:"s001",
    			sname:'zhangsan'
    	};
    	console.info(jsonObj1);
    	//json数组的字符串体现形式
    	var jsonArray1=[1,3,4,5];
    	console.log(jsonArray1);
    })

效果如下图：

2.3 混合模式 ，返回的是一个Map集合
{id:3,hobby:[‘a’,‘b’,‘c’]}

$(function(){
    	//json对象的字符串体现形式 
    	var jsonObj1={
    			sid:"s001",
    			sname:'zhangsan'
    	}；
    	//json混合模式的字符串体现形式
    	var jsons={id:3,hobby:['a','b','c']};
    	console.log(jsons);
    })

效果如下图:

3.接下来我们来讲解一下（$.extend和$.extend和.fn.extend）

$.extend 是用来扩充jquery类属性或者方法所用，我们在开发中常用到扩充属性，接下来我们来讲解一下扩充属性。

 $(function(){
    	//json对象的字符串体现形式 
    	var jsonObj1={
    			sid:"s001",
    			sname:'zhangsan'
    	};
    	console.info(jsonObj1);
    	//json数组的字符串体现形式
    	var jsonArray1=[1,3,4,5];
    	console.log(jsonArray1);
    	
    	//json混合模式的字符串体现形式
    	var jsons={id:3,hobby:['a','b','c']};
    	console.log(jsons);
    	
    	var jsonObj3={
    			sid:"s002",
    			sname:'lisi',
    			hobby:['a','b','c']
    	};
    	//$.extend 是用来扩充jquery类属性或者方法所用
    	var jsonObj2={};
    	//用后面的对象扩充一个对象
    	//$.extend{jsonObj2,jsonObj1}
    	//讲解扩充值覆盖的问题，之前已经扩充的属性值会被后面的对象所覆盖，如果后面有新的属性，会继续扩充
    	$.extend(jsonObj2,jsonObj1,jsonObj3);
    	console.log{jsonObj2};
    })

效果如下图:

②$.fn.extend 是用来扩充jquery实例化的属性或者方法，我们在开发中常用的一般是扩充方法，接下来就来讲解一下扩充方法

接下来简介插件机制：

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

首先我们把所需的文件写好。

来写一个公用的css文件，方便我们去调试任何一个界面的样式，只需要引入它即可

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

.yello {
	background: #ffff66;
}

.red {
	background: #ff3333;
}

.blue {
	background: #9999ff;
}

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

再写一个js文件:

$(function(){
	var defaults={
			head :'fen',
			out :'yellow',
			over:'red'
	}
	$.fn.extend({
		bgColor:function(option){
			$.extend(defaults,option);
			//使用return 的原因是让改实例方法支持链编程,好比stringbuffer
			//这里的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);
		});
	});
		}
});
})

然后我们在所需用到的jsp界面里来进行引入，为了不然代码显得臃肿我们把引入的文件也放在了一个公用的common文件里。

我们来运行jsp界面看效果如下图:


这个插件就方面我们以后开发，自己想怎么调样式就怎么调，只需要写自己所需的样式就行，简化了我们的代码。

最后我们来介绍一下ajax运用：

Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象
和xml文档，同样也可以将json、xml转换成Java对象

这个时候我们要去下载其相关的jar包

  Map<String,String> stu = new hashMap<>();
	stu.add("aa","jason");
	stu.add("bb","杰");
	ObjectMapper mapper = new ObjectMapper();//转为json的形式
   System.out.print( mapper.writeValueAsString(obj););

当然也可以将json对象转为java对象,在 用$.ajax的时候可以转为java对象

var stu = $.pareJSON(str);//将转过了的转为java对象