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和.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对象