jQuery入门
1. 什么是jQuery
它是一个轻量级的javascript类库
注1：就一个类“jQuery”，简写“
”
注
1
：
” 注1：
”注1：就是jQuery简写
2.Javascipt跟jQuery的区别：
Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。
jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发
jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到。
2. jQuery优点
2.1 总是面向集合
2.2 多行操作集于一行
3.jQuery的导入库
3.1 导入js库（<script type="text/javascript" src=""></script>）
4.jQuery的程序入口
$(function() {
alert("hello jquery1");
})
$(document).ready(function() {
alert("hello jquery2");
})
window.onload = function() {
alert("hello jquery3");
}
5.(fn)、(document).ready(fn)与window.onload的区别？
/*
结论：$(fn)、$(document).ready(fn)是等价的，哪个代码在前面哪个代码先执行
jsp的dom树结构加载完毕即刻调用方法
window.onload最后执行
jsp的dom树加载完，css,js等静态资源加载完毕执行
*/
4.jQuery有很多选择器
ID选择器
$("#a3").click(function (){
alert("小芳芳被翻牌子了呀，为你感到开心啊")
});
类选择器
$(".c1").click(function (){
alert("小芳芳被翻牌子了呀，为你感到开心啊")
});
包含选择器
$("p a").click(function (){
alert("小芳芳被翻牌子了呀，为你感到开心啊")
});
组合选择器
$("a,span").click(function (){
alert("小芳芳被翻牌子了呀，为你感到开心啊")
});
4.js对象与jquery对象的相互转换
//jquery对象转换js对象
var $h1=$('#h1');
alert($h1.val());
//jquery对象转换js对象
var h1Node=$h1.get(0);
var h1Node=$h1[0];
alert(h1Node.value));
//js对象转换jquery对象
var h2Node=document.getElementById("h2");
alert(h2Node.value);
//js对象转换jquery对象
var $h2Node=$(h2Node);
alert($h2Node.val());
});
.5.this指针的作用
5.1 事件源（获取当前按钮的按钮值）
$(function () {
$(":input").click(function () {
alert(this.value);
5.2 当前元素（点击按钮，获取所有a标签的值）
$("a").each(function (index,item) {
//指的是当前元素
alert(index+","$(this).html()+","+$(item).html);
});
});
})
jQuery的插件
1.什么是jQuery的插件
往jquery类库里面去扩展方法，这类方法就是jquery插件
2. json的三种格式
2.1 对象
//json对象的字符串体现形式
var jsonObj3={
sid:'s001',
sname:'zhangsan'
};
console.log(jsonObj1);
2.2 列表/数组
//json数组的字符串形式
var jsonArray1=[1,3,4,5];
console.log(jsonArray1);
//json混合模式的字符串形式
//json混合模式的字符串形式
var jsons={id:3,hobby:['a','b','c']};
console.log(jsons);
6.利用 $.extend：对象的扩展(或继承)
var jsonObj1 = {
sid:'s001',
sname:'liuxia‘
};
var jsonObj2 = {};
//用后面的对象扩充第一个对象
$.extend(jsonObj2,jsonObj1);
如果扩充值覆盖问题，之前已经扩充的属性值会被后面的对闲值所覆盖，如果后面对象有新的属性会继续扩充
var jsonObj1 = {
sid:'s001',
sname:'liuxia‘
};
var jsonObj3 = {
sid:'s002',
sname:'小花',
hobby:['a','b','c']
};
var jsonObj2 = {};
$.extend(jsonObj2,jsonObj1,jsonObj3);
console.log(jsonObj2);
$.fn.extend：是用来扩充jquery实例的属性值或者方法所用
在这里插入代码片
$.extend({
hello:function(){
alert('我要钱');
}
});
$.hello();
$.fn.extend({
sayHello:function(){
alert('我要钱‘);
}
});
$("#yellow").sayHello();
alert("yellow");
jQuery插件开发实例：
<%@ 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">
.over{
background: #ff66ff;
}
.out{
background: #ffff66;
}
.head{
background: #ff3333;
}
</style>
<script type="text/javascript">
$(function(){
//给默认值
$("tr:eq(0)",this).addClass('head');
$("tr:gt(0)",this).addClass('out');
//添加动态效果
$("tr:gt(0)",this).hover(function(){
$(this).removeClass().addClass('over');
},function(){
$(this).removeClass().addClass('out');
});
})
</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>
首先建一个/jquery/table/css的css样式：
@charset "UTF-8"; .head {
background: #ff66ff;
} .out {
background: #ffff66;
}.over {
background: #ff3333;
}.blue {
background: #9999ff;
}.green {
background: #bbff99;
}
.hui {
background: #d6d6c2;
}
<link href="${pageContext.request.contextPath }/jquery/table/css/jquery.table.css" type="text/css" rel="stylesheet"/>
接着我们要建一个/jquery/table/js/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);
});
});
}
});
})
接着修改jsp页面：
修改前script里面要写这些
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<title>Insert title here</title>
<style type="text/css">
.over{
background: #ff66ff;
}
.out{
background: #ffff66;
}
.head{
background: #ff3333;
}
</style>
<script type="text/javascript">
$(function(){
$("table").each(function(){
//给默认值
$("tr:eq(0)",this).addClass('head');
$("tr:gt(0)",this).addClass('out');
//添加动态效果
$("tr:gt(0)",this).hover(function(){
$(this).removeClass().addClass('over');
},function(){
$(this).removeClass().addClass('out');
});
});
})
</script>
</head>
<body>
<table id="t"
修改后
<script type="text/javascript">
$(function(){
$("table").bgColor({
head : 'blue',
out : 'green',
over : 'hui'
});
})
</script>
只要把css样式和js文件导入进去就可以动态修改样式了
<link href="${pageContext.request.contextPath }/jquery/table/css/jquery.table.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
因为每次修改颜色，我们都要导入css样式和js文件,所以我们把他进行封装到head.jsp里面这样我们就方便了：
<link href="${pageContext.request.contextPath }/jquery/table/css/jquery.table.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/table/js/jquery.table.js"></script>
7.ajax
Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象
和xml文档，同样也可以将json、xml转换成Java对象
Map<String,String> stu = new hashMap<>();
stu.add("01","gd"); stu.add("02","zw");
ObjectMapper mapper = new ObjectMapper();//转为json的形式
System.out.print( mapper.writeValueAsString(obj););
json死循环问题
忽略双向关联的一个方向即可
@JsonIgnore/程序控制
也可以将json对象转为java对象,在 用$.ajax的时候可以转为java对象
ar stu = $.pareJSON(str);
7.1利用jQuery的ajax做一个省市县三级联动
思路：利用map集合存储数据，然后利用把数据以json格式传入前台，然后jsp页面利用ajax接收，转译Json格式，然后给市和县添加change事件。
JsonBaseDao
public List<Map<String, Object>> executeQuery(String sql, PageBean pageBean) {
return super.executeQuery(sql, pageBean, new Callbac<Map<String, Object>>() {
public List<Map<String, Object>> foreach(ResultSet rs) {
List<Map<String, Object>> list=new ArrayList<>();
//获取源数据
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 List<Map<String, Object>> list(Map<String, String[]> paramMap,PageBean pageBean){
String id = JsonUtils.getParamVal(paramMap, "ID")
String sql="select * from ch_region where 1=1";
if(StringUtils.isBlank(id)) {
sql+=" and parent_id=7459";
}
else {
sql+=" and parent_id="+id;
}
return super.executeQuery(sql, pageBean);
}
RegionServlet
在这里插入代码片
public class RegionServlet extends HttpServlet {
private static final long serialVersionUID = 6826185684173095882L
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 {
resp.setContentType("text/html;charset=UTF-8");
PrintWriter out = resp.getWriter();
List<Map<String, Object>> list = regionDao.list(req.getParameterMap(), null);
ObjectMapper om=new ObjectMapper();
out.println(om.writeValueAsString(list).toString());
out.flush();
out.close();
}
}
jsp页面
<title>ajax实现省市县三级联动</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url:"/reg.do",
success:function(data){
for(index in data){
//把数据追加到后面
$("#province").append("<option value='"+data[index].ID+"'>"+data[index].REGION_ID+"</option>")
}
},
dataType:"json"
});
$("#province").change(function(){
$("option:gt(0)","#city").remove();//清空追加的值
$.ajax({
url:"/reg.do?ID="+this.value,//直接的id值
success:function(data){
for(index in data){
$("#city").append("<option value='"+data[index].ID+"'>"+data[index].REGION_ID+"</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>
地址：
<select id="province">
<option selected="selected">---请选择省份---</option>
</select>
<select id="city">
<option selected="selected">---请选择城市---</option>
</select>
<select id="county">
<option selected="selected">---请选择县区---</option>
</select>
</body>
412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
