1、jQuery入门
1.1、什么是jQuery？
它是一个轻量级的javascript类库
1.2、 jQuery优点
1.2.1 总是面向集合
1.2.2 多行操作集于一行
1.3、程序入口:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
/* $(fn)、$(document).ready(fn)与window.onload的区别？三种写法 项目维护时需要用*/
$(function() {
alert("hello jquery");
})
$(document).ready(function () {
alert("hello jquery2");
})
window.onload = function () {
alert("hello jquery3");
}
</script>
</head>
<body>
</body>
</html>
结论： ( f n ) 与 (fn)与 (fn)与(document).ready(fn)是等价的，谁在前谁先执行
jsp的dom树结构加载完毕即刻调用方法
window.onload最后执行
jsp的dom树结构加载完,css js等静态资源记载完毕在执行
1.4 jQuery(exp[,context])
exp：选择器
context：上下文，环境/容器，documemt
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
</head>
<body>
<p>
<a id="a1" class="c1" href="#">点我1</a>
</p>
<p>
<a id="a2" class="c2" href="#">点我2</a>
</p>
<p>
<a id="a3" class="c3" href="#">点我3</a>
</p>
<div>
<a id="a4" class="c1" href="#">点我4</a>
</div>
<div>
<p>
<a id="a5" class="c1" href="#">点我5</a>
</p>
</div>
<span>点我</span>
</body>
</html>
标签选择器
$("a").click(function () {
alert("被翻牌子");
})
ID选择器
$("#a3").click(function () {
alert("被翻牌子");
})
类选择器
$(".c1").click(function () {
alert("被翻牌子");
})
包含选择器：E1 E2
$("p a").click(function () {
alert("被翻牌子");
})
组合选择器：E1,E2,E3
$("a,span").click(function () {
alert("被翻牌子");
})
自定义选择器：:exp
(如果第二个参数没有填，默认查找整个jsp页面)
$("a","div").click(function () {
alert("被翻牌子");
})
1.4.1 jQuery(html，jquery对象转js对象 js对象转jquery对象)
jquery对象转js对象
//var h1Node = $h1.get(0);
var h1Node = $h1[0];
alert(h1Node.value);
js对象转jquery对象
var h2Node = document.getElementById("h2");
var $h2Node = $(h2Node);
alert($h2Node.val());
1.5 this指针的作用
1.5.1、事件源（获取当前按钮的按钮值）
1.5.2 当前元素（点击按钮，获取所有a标签的值）
<script type="text/javascript">
$(function(){
$(":input").click(function(){
//this指的是事件源
alert(this.value);
$("a").each(function(){
//this指的是当前元素
alert($(this).html())
});
});
}) ;
</script>
1.6、使用jquery动态给table添加样式
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<title>Insert title here</title>
<style type="text/css">
.fen {
background: pink;
}
.yello {
background: #ffff66;
}
.red {
background: #ff3333;
}
.blue {
background: #9999ff;
}
.green {
background: #bbff99;
}
.hui {
background: #d6d6c2;
}
</style>
<script type="text/javascript">
$(function () {
$("table tr:eq(0)").addClass("green");
$("table tr:gt(0)").addClass("fen");
$("table tr:gt(0)").hover(function(){
$(this).removeClass().addClass("fen");
},function(){
$(this).removeClass().addClass("hui");
});
});
</script>
</head>
<body>
<table border="1" width="100%">
<tr>
<td>书名</td>
<td>作者</td>
<td>点击量</td>
</tr>
<tr>
<td>圣墟</td>
<td>辰东</td>
<td>10万</td>
</tr>
<tr>
<td>飞剑问道</td>
<td>我吃西红柿</td>
<td>11万</td>
</tr>
<tr>
<td>杀神</td>
<td>逆苍天</td>
<td>22万</td>
</tr>
<tr>
<td>龙王传说</td>
<td>唐家三少</td>
<td>18万</td>
</tr>
<tr>
<td>斗破苍穹</td>
<td>天蚕拖豆</td>
<td>1万</td>
</tr>
</table>
</body>
</html>
2、 jQuery插件
1、 插件机制简介
往jquery类库里面去扩展方法，这类方法就是jquery插件
2、 json的三种格式
2.1 对象
2.2 列表/数组
2.3 混合模式
代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery.min.js">
</script>
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
//json对象的字符串体现形式
var jsonObj1 = {
sid : 's001',
sname : 'zhangsan'
};
console.log(jsonObj1);
//json数组的字符串体现形式
var jsonArray1 = [1,2,3,4,5];
console.log(jsonArray1);
//json混合模式的字符串体现形式
var jsons = {id:3,hobby:['a','b']};
console.log(jsons);
var jsonObj3 = {
sid : 's002',
sname : 'lisi',
hobby:['a','b']
};
//$.extend是用来扩充jQuery类属性或者方法所用
var jsonObj2 = {};
//用后面的对象扩充前一个对象
//$.extend(jsonObj2,jsonObj1);
//讲解扩充值覆盖的问题，之前已经扩充的属性值会被后面的对象所覆盖，如果后面对象有新的属性值，会继续扩充
$.extend(jsonObj2,jsonObj1,jsonObj3);
console.log(jsonObj2);
$.extend({
hello:function(){
alert('天气真好');
}
});
$.hello();
//$.fn.extend是用来扩充jquery实例的属性或者方法所用
$.fn.extend({
sayHello:function(){
alert("适合打篮球");
}
});
$("#yellow").hello();
alert("yellow");
});
</script>
</head>
<body>
<span id="yellow">yellow</span>
</body>
</html>
3、插件开发：
将css和js封装进文件中，直接调用（格式如下即可，也可省去table包）
如图
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);
});
});
}
});
})
jquery.table.css：
.fen {
background: #ff66ff;
}
.yellow {
background: #ffff66;
}
.red {
background: #ff3333;
}
.blue {
background: #9999ff;
}
.green {
background: #bbff99;
}
.hui {
background: #d6d6c2;
}
3、ajax
1、jackson
Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象
和xml文档，同样也可以将json、xml转换成Java对象
核心代码：
ObjectMapper mapper = new ObjectMapper();
mapper.writeValueAsString(obj);
int count = md.getColumnCount();
map.put(md.getColumnName(i), rs.getObject(i));
2、后台json的三种格式的体现形式
实体类（Student）
package com.zhoutubing.entity;
import java.util.HashSet;
import java.util.Set;
public class Student {
private String sid;
private String sname;
//教师集合
private Set<Teacher> teas = new HashSet<>();
public String getSid() {
return sid;
}
public void setSid(String sid) {
this.sid = sid;
}
public String getSname() {
return sname;
}
public void setSname(String sname) {
this.sname = sname;
}
public Set<Teacher> getTeas() {
return teas;
}
public void setTeas(Set<Teacher> teas) {
this.teas = teas;
}
@Override
public String toString() {
return "Student [sid=" + sid + ", sname=" + sname + ", teas=" + teas + "]";
}
public Student(String sid, String sname, Set<Teacher> teas) {
super();
this.sid = sid;
this.sname = sname;
this.teas = teas;
}
public Student() {
super();
}
public Student(String sid, String sname) {
super();
this.sid = sid;
this.sname = sname;
}
}
json的三种格式：
1 、对象 {sid:‘s001’,sname:‘zs’}
2 、列表/数组 [1,3,5,7]
3 、混合模式 {id:3,hobby:[‘a’,‘b’,‘c’]}
package com.zhoutubing;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.dengrenli.entity.Student;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
/**
* 后台json的三种格式的体现形式
* @author Administrator
*
*/
public class Demo1 {
public static void main(String[] args) throws Exception {
// json对象
Student s= new Student("s001", "zhangsan");
ObjectMapper om = new ObjectMapper();
System.out.println(om.writeValueAsString(s));
// json数组
Student s1= new Student("s002", "lisi");
List<Student> list = new ArrayList<>();
list.add(s);
list.add(s1);
System.out.println(om.writeValueAsString(list));
// json混合模式
Map<String, Object> map = new HashMap<>();
map.put("total", 2);
map.put("stu", list);
System.out.println(om.writeValueAsString(map));
}
}
2 javaBean与map集合转换成json字符串格式是一样的
package com.zhoutubing;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
/**
* javaBean与map集合转换成json字符串格式是一样的
* @author Administrator
*
*/
public class Demo2 {
public static void main(String[] args) throws JsonProcessingException {
Map<String, Object> stu1 = new HashMap<>();
stu1.put("sid", "001");
stu1.put("sname", "张三");
ObjectMapper om = new ObjectMapper();
System.out.println(om.writeValueAsString(stu1));
Map<String, Object> stu2 = new HashMap<>();
stu2.put("sid", "002");
stu2.put("sname", "李四");
List<Map<String, Object>> ls1 = new ArrayList<>();
ls1.add(stu1);
ls1.add(stu2);
System.out.println(om.writeValueAsString(ls1));
}
}
3.json死循环
package com.zhoutubing;
import java.util.HashSet;
import java.util.Set;
import com.zhoutubing.entity.Student;
import com.zhoutubing.entity.Teacher;
import com.fasterxml.jackson.annotation.JsonIgnore;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
/**
* json死循环问题
* 1.由双向绑定改成单向绑定，也就是说将彼此之间的关系交于一方维护
* 2.在teacher实体类那边加 @JsonIgnore：将彼此循环调用的属性忽略，不参与对象转成json格式
* @author Administrator
*
*/
public class Demo3 {
public static void main(String[] args) throws JsonProcessingException {
Student s1 = new Student("s001", "张三");
Student s2 = new Student("s002", "李四");
Teacher t1 = new Teacher("t001", "小李", null);
Teacher t2 = new Teacher("t002", "飞刀", null);
Set<Teacher> teas = new HashSet<>();
teas.add(t1);
teas.add(t2);
s1.setTeas(teas);// StackOverflowError双向绑定
Set<Student> ss = new HashSet<>();
ss.add(s1);
ss.add(s2);
t1.setS(ss);
ObjectMapper om = new ObjectMapper();
System.out.println(om.writeValueAsString(s1));
}
}
解决方法：
1、 忽略双向关联的一个方向即可
2、 @JsonIgnore/程序控制（将彼此循环调用的属性忽略，不参与对象转成json格式）
375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
