JQuery及ajax简单运用

首先简单的介绍一下JQuery
它是一个轻量级的javascript类库，我们只需要知道他们的功能，就能调用
我们写好一个类“jQuery”，简写“$”

它的优点：
1 总是面向集合
2 多行操作集于一行
我们先将jquery.min.js jar包导入到自定位置并引用

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

1.JQuery中有三种调用方法

$(fn),$(document).ready(fn)与window.onload

他们的区别就是jsp的dom树结构加载完毕即刻调用方法
$(fn),$(document).ready(fn)是没有区别的，哪个在前面哪个就先执行，window.onload最后执行
jsp的dom树加载完，.css .js 等静态资源加载完毕执行 --主要是用在项目维护中

JQuery与js转换
我用这几段代码来玩成简单的案例
jQuery对象转js对象

<script type="text/javascript">
var $h1=$("#h1");alert($h1.val());
//先获取js对象
//① 把对象看作集合
var h1Node = $h1.get(0);//获取下标为1的h1
//② 把对象看作数组
var h1Node = $h1[0];//获取下标为1的h1alert(h1Node.value);
</script>

js对象转jQuery对象

var h2Node = document.getElementById("h2");
alert(h2Node.value);
var $h2Node = $(h2Node);
alert(h2Node.val());

jQuery插件

了解json
json是可以由多个集合转为json
extend
它是用来扩充jQuery类属性或者方法所用之前已经扩充的属性值会被后面的对象覆盖，如果后面对象有新的属性，会继续扩充

弹出的顺序就是依次的 hello–> 早安–> red

$.extend和json结合运用案例
我想在我这个样式下样式颜色可以变来变去

在根目录下创建自定义js和css文件

js自定义文件

$(function() {
var defaults={
head :'green',
out :'red',
over :'pink'
}
$.fn.extend({

//使用return的原因是让该实例方法支持链编程，就像String buffer
bgColor:function(option){
$.extend(defaults,option);
//这个this指的是插件本身，可以看成一个jquery实例
return this.each(function(){
alert("saa");

//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);
});
});
}
})

})

css简单样式

$.extend(defaults,options);

.green {
background: green;
}

.red {
background: red;
}

.pink {
background: pink;
}

.blue {
background: #9999ff;
}

.yellow {
background: #bbff99;
}

.hui {
background: #d6d6c2;
}

然后我们在jsp文件调用查看，也可以另建一个jsp文件，调用不同的颜色

一定要记得我们引入包时，一定要注意顺序，小心没有出来效果

效果

ajax简单运用

ajax的转换
Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象
和xml文档，同样也可以将json、xml转换成Java对象
我们需要下载这写jar包

Map<String,String> stu = new hashMap<>();
stu.add("11","牛蛙");
stu.add("22","酸汤鱼");
ObjectMapper mapper = new ObjectMapper();//转为json的形式
System.out.print( mapper.writeValueAsString(obj););

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

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