一、jQuery入门
1.什么是jQuery
它是一个轻量级的javascript类库
注意：就一个类“jQuery”，简写“$”
2.jQuery优点
2.1 总是面向集合
2.2 多行操作集于一行
3.初识 jQuery
3.1 导入js库
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
3.2 $(fn)做为程序入口(三种方式)
<script type="text/javascript">
//第一种
$(function(){
alert("hello jquery");
})
//第二种
$(document).ready(function(){
alert("hello jquery2");
})
//第三种
window.onload = function(){
alert("hello jquery3");
}
</script>
提问：$(fn)、$(document).ready(fn)与window.onload的区别？
结论：$(fn)、$(document).ready(fn)是等价的，哪个代码在前面就先执行哪段代码
jsp的dom树结构加载完毕即刻调用方法
window.onload最后执行（jsp的dom树加载完css、js等静态资源加载完毕执行）
4.jQuery三种工厂方法
4.1 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标签获取jQuery实例(标签选择器)
$("a").click(function () {
alert("被翻牌子");
})
ID选择器
//利用id=a3标签获取jQuery实例(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
//讲解第二个参数的作用（在div标签内部寻找a标签，然后给找到的标签添加事件）
//如果第二个参数没有填，那么默认是document(在整个jsp页面去找)
$("a","div").click(function () {
alert("被翻牌子");
})
4.2 jQuery(html，jquery对象转js对象)
html：基于html的一个字符串
//var h1Node = $h1.get(0);
var h1Node = $h1[0];
alert(h1Node.value);
4.3 jQuery(element，js对象转jquery对象)
element：js对象，表示一个html元素对象
js对象与jquery对象的相互转换
var h2Node = document.getElementById("h2");
//js对象转jquery对象
var $h2Node = $(h2Node);
alert($h2Node.val());
注意：$就是jQuery简写
5. this指针的作用
$(function () {
$(":input").click(function(){
//指的是事件源
alert(this.value);
$("a").each(function(index,item) {
//指的时当前元素
alert(index+","+$(this).html()+","+$(item).html());
});
});
})
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>
二、jQuery插件
1. 插件机制简介
1.往jquery类库里面去扩展方法，这类方法就是jquery插件
2. json的三种格式
2.1 对象
{sid:‘s01’,sname:‘zs’}
var jsonObj1 = {
sid:'s001',
sname:'zhangsan'
};
console.log(jsonObj1);
2.2 列表/数组
[1,3,4,5]
//json数组的字符串体现形式
var jsonArray1 = [1,2,3,4];
console.log(jsonArray1);
2.3 混合模式
{id:3,hobby:[‘a’,‘b’,‘c’]}
//json混合模式的字符串体现形式
var jsons = {id:3,hobby:['a','b','c']};
console.log(jsons);
2. $.extend和$.fn.extend
2.1 $.extend：对象的扩展(或继承)
var jsonObj1 = {
sid:'s001',
sname:'zhangsan'
};
var jsonObj3 = {
sid:'s002',
sname:'lisi',
hobby:['a','b','c']
};
// $.extend是用来扩充jQuery类属性或方法所用
var jsonObj2 = {};
//用后面的对象扩充第一个对象
//讲解扩充值覆盖的问题,之前已经扩充的属性值会被后面的对象所覆盖，如果后面对象有新的属性，会继续扩充
$.extend(jsonObj2,jsonObj1,jsonObj3);
console.log(jsonObj2);
$.extend({
hello:function(){
alert('我来了');
}
});
$.hello();
2.2 $.fn.extend
//$.fn.extend是用来扩充jQuery实例的属性或方法所用
$.fn.extend({
sayHello:function(){
alert('随便你');
}
});
$("#yellow").sayHello();
4. jQuery插件开发实例
4.1 js
$(function() {
var defaults = {
head : 'green',
out : 'blue',
over : 'hui'
}
$.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);
});
});
}
});
})
4.2 css
$(function() {
var defaults = {
head : 'green',
out : 'blue',
over : 'hui'
}
$.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);
});
});
}
});
})
4.3 jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="/jquery/jsp/common/head.jsp" %>
<!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">
<style type="text/css">
@import url(js/bgColor/bgColor.css);
</style>
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
$("table").bgColor({
head : 'blue',
out : 'green',
over : 'hui'
});
})
</script>
</head>
<body>
<table id="t1" 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>
<table id="t2" 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>
三、Ajax
- jackson
Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象
和xml文档，同样也可以将json、xml转换成Java对象
package com.jquery;
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;
import com.leiyuanlin.entity.Student;
/**
* 后台json的三种格式的体现形式
* @author 2018101801
*
*/
public class Demo1 {
public static void main(String[] args) throws JsonProcessingException {
//json对象
Student stu1 = new Student("s001", "zs");
ObjectMapper om = new ObjectMapper();
System.out.println(om.writeValueAsString(stu1));
//json数组
Student stu2 = new Student("s002", "ls");
List<Student> list1 = new ArrayList<>();
list1.add(stu1);
list1.add(stu2);
System.out.println(om.writeValueAsString(list1));
//json混合模式
Map<String, Object> map = new HashMap<>();
map.put("total", 2);
map.put("stus", list1);
System.out.println(om.writeValueAsString(map));
}
}
2. javaBean与map集合转换成json字符串格式是一样的
package com.jquery;
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 2018101801
*
*/
public class Demo2 {
public static void main(String[] args) throws JsonProcessingException {
// {"total":2,"stus":[{"sid":"s001","sname":"zs"},{"sid":"s002","sname":"ls"}]}
// {"sid":"s001","sname":"zs"}
Map<String, Object> stu1 = new HashMap<String, Object>();
stu1.put("sid", "s001");
stu1.put("sname", "zs");
ObjectMapper om = new ObjectMapper();
System.out.println(om.writeValueAsString(stu1));
// [{"sid":"s001","sname":"zs"},{"sid":"s002","sname":"ls"}]
Map<String, Object> stu2 = new HashMap<String, Object>();
stu2.put("sid", "s002");
stu2.put("sname", "ls");
List<Map<String, Object>> list1 = new ArrayList<>();
list1.add(stu1);
list1.add(stu2);
System.out.println(om.writeValueAsString(list1));
}
}
- java->json死循环
package com.jquery;
import java.util.HashSet;
import java.util.Set;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.leiyuanlin.entity.Student;
import com.leiyuanlin.entity.Teacher;
/**
* json死循环问题
* 1、由双向绑定改成单向，也就是说将彼此之间的关系交于一方维护
* 2、@JsonIgnore：将彼此循环调用的属性忽略，不参与对象转成json格式
* @author 2018101801
*
*/
public class Demo3 {
public static void main(String[] args) throws JsonProcessingException {
Student stu1 = new Student("s001", "金花");
Student stu2 = new Student("s002", "随便");
Teacher tea1 = new Teacher("t001", "飞刀", null);
Teacher tea2 = new Teacher("t002", "笑笑", null);
Set<Teacher> teas = new HashSet<>();
teas.add(tea1);
teas.add(tea2);
stu1.setTeas(teas);
Set<Student> stus = new HashSet<>();
stus.add(stu1);
stus.add(stu2);
tea1.setStus(stus);
ObjectMapper om = new ObjectMapper();
System.out.println(om.writeValueAsString(stu1));
}
}
解决方案：
1、忽略双向关联的一个方向即可
stu1.setTeas(teas);与tea1.setStus(stus);只用一种
2、@JsonIgnore/程序控制
4. jQuery的ajax请求
demo.js
$(function(){
var ctx = $("#ctx").value;
$.ajax({
url:ctx+"/regionServlet",
success:function(data){
for(index in data){
$("#province").append("<option selected='"+data[index].ID+"'>"+data[index].REGION_NAME+"</option>");
}
},
dataType:"json"
});
$("#province").change(function(){
$("option:gt(0)","#city").remove();
$.ajax({
url:ctx+"/regionServlet?ID="+this.value,
success:function(data){
for(index in data){
$("#city").append("<option selected='"+data[index].ID+"'>"+data[index].REGION_NAME+"</option>");
}
},
dataType:"json"
});
});
$("#city").change(function(){
$("option:gt(0)","#county").remove();
$.ajax({
url:ctx+"/regionServlet?ID="+this.value,
success:function(data){
for(index in data){
$("#county").append("<option selected='"+data[index].ID+"'>"+data[index].REGION_NAME+"</option>");
}
},
dataType:"json"
});
});
});
demo.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 }/table/js/demo10.js"></script>
<title>Insert title here</title>
</head>
<body>
<div>
<h1>$.ajax实现省市联动</h1>
<div>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath }" >
收货地址
<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>
感谢观看！
扫一扫
1879
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
