一、jQuery入门
1. 什么是jQuery
它是一个轻量级的javascript类库
注1：就一个类“jQuery”，简写“$”
2. jQuery优点
2.1 总是面向集合
2.2 多行操作集于一行
3. hello jQuery
3.1 导入js库（）
3.2 $(fn)做为程序入口
如：
<!-- 导包 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function() {
alert("hello jQuery");
})
</script>
$(document).ready(function() {
alert("hello jQuery2");
})
window.onload=function() {
alert("hello jQuery3");
}
$(fn)、$(document).ready(fn)与window.onload的区别？（一般在项目维护时使用）
$(fn)、$(document).ready(fn)是等价的，哪个代码再前面就哪个先执行;
jsp的dom树结构加载完毕即刻调用方法
window.onload最后执行
jsp的dom树结构加载完毕，css、js等静态资源加载完毕执行
4. jQuery三种工厂方法 （demo2.jsp）
4.1 jQuery(exp[,context])
exp：选择器
context：上下文，环境/容器，documemt
注1：选择器，css选择器
标签选择器
ID选择器
类选择器
包含选择器：E1 E2
组合选择器：E1,E2,E3
自定义选择器：:exp
<%@ 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() {
//利用a标签获取jquery的实例(标签选择器)
/*
$("a").click(function name() {
alert("被翻牌子了");
})
*/
//利用id="a3"获取jquery的实例(ID选择器)
/*
$("#a3").click(function name() {
alert("被翻牌子了");
})
*/
//利用class="c1"获取jquery的实例(类选择器)
/* $(".c1").click(function name() {
alert("被翻牌子了");
}) */
//包含选择器：E1 E2
/* $("p a").click(function name() {
alert("被翻牌子了");
}) */
//组合选择器：E1,E2,E3
/* $("a,span").click(function name() {
alert("被翻牌子了");
}) */
//讲解第二个参数的作用(在div内部寻找a标签,然后给找到的标签添加事件)
//如果第二个参数没有填写的情况下,那么默认的是document(就是去整个jsp页面找标签)
$("a","div").click(function name() {
alert("被翻牌子了");
})
})
</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>点我6</span>
</body>
</html>
4.2 jQuery(html) （demo3.jsp）
html：基于html的一个字符串
<%@ 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() {
$(":input[name='name1']").click(function() {
//在id=selId1的select标签jquery实例上追加<option value='1'>湖南省</option>的htmljquery实例
$("#selId1").append("<option value='1'>湖南省</option>");
});
$(":input[name='name2']").click(function() {
//将<option value='2'>湖北省</option>的htmljquery实例追加到id=selId2的select标签jquery实例中
$("<option value='2'>湖北省</option>").appendTo("#selId2");
})
})
</script>
</head>
<body>
<select id="selId1">
<option value="-1">---请选择---</option>
</select>
<select id="selId2">
<option value="-1">---请选择---</option>
</select>
<input name="name1" value="add1" type="button">
<input name="name2" value="add2" type="button">
<input type="hidden" id="h1" value="h1">
<input type="hidden" id="h2" value="h2">
<input type="hidden" id="h3" value="h3">
</body>
</html>
点击add1时下拉框就会加一条湖南省，同理点击add1时下拉框就会加一条湖北省
4.3 jQuery(element) （demo3.jsp）
element：js对象，表示一个html元素对象
js对象与jquery对象的相互转换
jquery对象转js对象
var $h1=$("#h1");
alert($h1.val());
/* var h1Node=$h1.get(0);*///第一种
var h1Node=$h1[0];//第二种
alert(h1Node.value);
s对象转jquery对象
var h2Node=document.getElementById("h2");
alert(h2Node.value);
var $h2Node=$(h2Node);
alert($h2Node.val());
注1：$就是jQuery简写
5. this指针的作用 （demo4.jsp）
demo4.jsp的body
<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>
<input type="button" value="ok">
</body>
5.1 事件源（获取当前按钮的按钮值）
$(":input").click(function() {
alert(this.value);
});
5.2 当前元素（点击按钮，获取所有a标签的值）
$("a").each(function() {
alert($(this).html());
})
带参数
$("a").each(function(index,item) {
//this跟item是一个作用的意思
alert(index+","+$(this).html()+","+$(item).html());
})
6、使用jquery动态给table添加样式
$(function() {
$("table tr:eq(0)").addClass("yello");
$("table tr:gt(0)").addClass("red");
})
运行界面：
二、jQuery插件
1. 插件机制简介
往jquery类库里面去扩展方法，这类方法就是jquery插件
2. json的三种格式
2.1 对象
{sid:‘s01’,sname:‘zs’}
$(function() {
//json对象的字符串体现形式
var jsonObj1={
sid:'s001',
sname:'zhangsan'
}
console.log(jsonObj1);
})
打印结果：
2.2 列表/数组
[1,3,4,5]
//json数组的字符串体现形式
var jsonArray1= [1,3,4,5];
console.log(jsonArray1);
打印结果：
2.3 混合模式
{id:3,hobby:[‘a’,‘b’,‘c’]}
打印结果：
2. . e x t e n d 和 .extend和 .extend和.fn.extend
2.1 $.extend：对象的扩展(或继承)
$.extend(obj1,obj2)
//$.extend是用来扩充jquery类属性或者方法所用
var jsonObj2={};
//用后面的对象扩充第一个对象
$.extend(jsonObj2,jsonObj1);
console.log(jsonObj2);
打印结果：
$.extend(obj1,obj2,obj3[,…])
var jsonObj3={
sid:'s002',
sname:'lisi',
hobby:['a','b','c']
}
//$.extend是用来扩充jquery类属性或者方法所用
var jsonObj2={};
//用后面的对象扩充第一个对象
//$.extend(jsonObj2,jsonObj1);
//讲解扩充值覆盖问题，之前已经扩充的属性值会被覆盖掉，如果后面有新的属性值，会继续扩充
$.extend(jsonObj2,jsonObj1,jsonObj3);
console.log(jsonObj2);
打印结果：
2.2 $.fn.extend
//$.fn.extend是用来扩充jquery实例属性或者方法所用
$.fn.extend({
sayHello:function(){
alert("Hello");
}
});
$("#yellow").sayHello();
alert("yellow");
3. jQuery插件的添加
其实就是给jQuery添加新的实例方法或类方法，然后将功能封闭在其中
4. jQuery插件开发实例
命名
jquery.xxx.js
如我的命名：
jquery.table.css是写样式的
.fen {
background: #ff66ff;
}
.yellow {
background: #ffff66;
}
.red {
background: #ff3333;
}
.blue {
background: #9999ff;
}
.green {
background: #bbff99;
}
.hui {
background: #d6d6c2;
}
jquery.table.js写前端代码
$(function(){
var defaults={
head:'yellow',
out:'red',
over:'blue'
}
$.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);
});
});
}
});
})
我们在jsp页面这里的颜色可以根据jquery.table.css是自己调,默认是jquery.table.js中的颜色
<script type="text/javascript">
$(function() {
$("table").bgColor({
head:'hui',
out:'green',
over:'fen'
});
})
</script>
简写引用的代码，当我们jsp引用css,js代码多了的时候，我们创建一个专门放引用代码的类，以便减少jsp的代码量
如我的：
head.jsp中放的都是引用的代码
在jsp页面将其他界面引入
<%@ include file="/jsp/common/head.jsp" %>
运行结果：
三、ajax
导入包
写两个实体类，一个学生类一个老师类
public class Student {
private String sid;
private String sname;
private Set<Teacher> teas=new HashSet<>();
public Student(String sid, String sname, Set<Teacher> teas) {
super();
this.sid = sid;
this.sname = sname;
this.teas = teas;
}
public Set<Teacher> getTeas() {
return teas;
}
public void setTeas(Set<Teacher> teas) {
this.teas = teas;
}
public Student() {
super();
}
public Student(String sid, String sname) {
super();
this.sid = sid;
this.sname = sname;
}
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;
}
@Override
public String toString() {
return "Student [sid=" + sid + ", sname=" + sname + ", teas=" + teas + "]";
}
}
public class Teacher {
private String sid;
private String sname;
private Set<Student> stus=new HashSet<>();
public Teacher() {
super();
}
public Teacher(String sid, String sname, Set<Student> stus) {
super();
this.sid = sid;
this.sname = sname;
this.stus = stus;
}
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<Student> getStus() {
return stus;
}
public void setStus(Set<Student> stus) {
this.stus = stus;
}
@Override
public String toString() {
return "Teacher [sid=" + sid + ", sname=" + sname + ", stus=" + stus + "]";
}
}
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. jackson将java–>json
2.1 JavaBean/Map
{}
Student stu1=new Student("s001","zhangsan");
ObjectMapper om=new ObjectMapper();
System.out.println(om.writeValueAsString(stu1));
2.2 数组/List/Set
[]
Student stu2=new Student("s002","lisi");
List<Student> list1=new ArrayList<>();
list1.add(stu1);
list1.add(stu2);
System.out.println(om.writeValueAsString(list1));
2.3 类里嵌类
混合模式
Map<String, Object> map=new HashMap<>();
map.put("total", 2);
map.put("stus", list1);
System.out.println(om.writeValueAsString(map));
后台一起输出的结果：
javaBean与map集合转换成json字符串格式是一样的
public static void main(String[] args) throws JsonProcessingException {
Map<String, Object> stu1=new HashMap<>();
stu1.put("sid", "s001");
stu1.put("sname", "zhangsan");
ObjectMapper om=new ObjectMapper();
System.out.println(om.writeValueAsString(stu1));
Map<String, Object> stu2=new HashMap<>();
stu2.put("sid", "s002");
stu2.put("sname", "lisi");
List<Map<String, Object>> list1=new ArrayList<>();
list1.add(stu1);
list1.add(stu2);
System.out.println(om.writeValueAsString(list1));
}
后台打印结果：
3. java->json死循环
public static void main(String[] args) throws JsonProcessingException {
Student stu1=new Student("s001", "zhangsan");
Student stu2=new Student("s002", "lisi");
Teacher tea1=new Teacher("t001", "mi", null);
Teacher tea2=new Teacher("t002", "lu", null);
Set<Teacher> teas1=new HashSet<>();
teas1.add(tea1);
teas1.add(tea2);
stu1.setTeas(teas1);
Set<Student> stus=new HashSet<>();
stus.add(stu1);
stus.add(stu2);
tea1.setStus(stus);
ObjectMapper om=new ObjectMapper();
System.out.println(om.writeValueAsString(stu1));
}
报了一个栈内台溢出的错，就是因为双向绑定的原因
3.1 忽略双向关联的一个方向即可，由双向绑定改成单向绑定，也就是将彼此之间的关系交于一方维护
后台打印结果：
3.2 @JsonIgnore/程序控制
在学生类或者老师类加上注解 @JsonIgnore，将彼此循环调用的属性忽略，不参与转成json格式
如：
这样的话即使双向绑定了后台也会输出你所要打印的结果
4.$.ajax实现省市联动
JsonBaseDao
public class JsonBaseDao extends BaseDao<Map<String, Object>> {
public final List<Map<String, Object>> executeQuery(String sql,PageBean pageBean ) {
return super.executeQuery(sql, pageBean, new Callback<Map<String, Object>>(){
public List<Map<String, Object>> foreach(ResultSet rs) {
/**
* 1、创建一个实体类
* 2、给创建的实例属性赋值
* 3、将添加完内容的实体添加到list集合中
*
*/
List<Map<String, Object>> list = new ArrayList<>();
// 获取原数据
java.sql.ResultSetMetaData md = rs.getMetaData();
int count = md.getColumnCount();
Map<String, Object> map = null;
while(rs.next()) {
map = new HashMap<>();
for (int i = 1; i <= count; i++) {
map.put(md.getColumnName(i), rs.getObject(i));
}
list.add(map);
}
return list;
}
});
}
}
RegionDao
public class RegionDao extends JsonBaseDao {
public List<Map<String, Object>> list(Map<String, String[]> paMap, PageBean pageBean){
String id = JsonUtil.getParamVal(paMap, "ID");
String sql = "select * from ch_region where true";
if(StringUtils.isBlank(id)) {
sql += " and parent_id=7459";
}else {
sql += " and parent_id="+id;
}
return super.executeQuery(sql, pageBean);
}
public static void main(String[] args) {
// Map<String, String> paMap = new HashMap<>();
PageBean pageBean = new PageBean();
Map<String, String[]> paMap = new HashMap<>();
paMap.put("ID", new String[] {"9504"});
RegionDao regionDao = new RegionDao();
List<Map<String, Object>> list = regionDao.list(paMap, pageBean);
System.out.println(list);
}
}
JsonUtil
**
* 专门用来处理Jon数据的工具包
*/
public class JsonUtil {
/*
*从paramMap拿到咱们所需要用到的查询维度，用于sql语句拼接
* 获取从jsp页面传递到后台参数集合（req.getParamterMap）
*/
public static String getParamVal(Map<String, String[]> paMap,String key) {
if(paMap != null && paMap.size() > 0) {
String[] vals = paMap.get(key);
if(vals != null && vals.length > 0) {
String val = Arrays.toString(vals);
return val.substring(1, val.length()-1);
}
return "";
}
return "";
}
}
RegionServlet
public class RegionServlet extends HttpServlet {
private static final long serialVersionUID = 502710496798533506L;
private RegionDao regionDao = new RegionDao();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
List<Map<String, Object>> list = regionDao.list(req.getParameterMap(), null);
ObjectMapper om = new ObjectMapper();
try {
ResponseUtil.write(resp, om.writeValueAsString(list));
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
ResponseUtil
public class ResponseUtil {
public static void write(HttpServletResponse response,Object o) throws Exception {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.println(o.toString());
out.print(o.toString());
out.flush();
out.close();
}
}
jsp 页面
<%@ 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>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.demo10.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function() {
var ctx = $("#ctx").val();
$.ajax({
url:"/regionServlet",
success:function(data){
for(index in date){
//console.log(data[index]);
$("#province").append("<option value='"+date[index].ID+"'>"+date[index].REGION_NAME+"</option>")
}
},
dataType:"json"
});
$("#province").change(function(){
$("option:gt(0)","#city").remove();
$.ajax({
url:"/regionServlet?ID="+this.value,
success:function(data){
for(index in date){
//console.log(data[index]);
$("#city").append("<option value='"+date[index].ID+"'>"+date[index].REGION_NAME+"</option>")
}
},
dataType:"json"
});
});
$("#city").change(function(){
$("option:gt(0)","#county").remove();//清空追加的值
$.ajax({
url:"/reg.do?ID="+this.value,//直接的id值
success:function(data){
for(index in data){
$("#county").append("<option value='"+data[index].ID+"'>"+data[index].REGION_ID+"</option>")
}
},
dataType:"json"
});
})
})
</script>
</head>
<body>
<div>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">
<h1>$.ajax实现省市联动</h1>
<div>
收货地址
<select id="province">
<option selected="selected">---请选择省份---</option>
</select>
<select id="city">
<option selected="selected">---请选择城市---</option>
</select>
<select id=" county">
<option selected="selected">---请选择县区---</option>
</select>
</div>
</div>
</body>
</html>
565
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
