一 jquery入门
1. 什么是jQuery
它是一个轻量级的javascript类库
【注1】就一个类“jQuery”，简写“$”
2. jQuery优点
2.1 总是面向集合
2.2 多行操作集于一行
3. hello jQuery
3.1 导入js库
<script type="text/javascript" src=""></script>
3.2 $(fn)做为程序入口
( f n ) 、 (fn)、 (fn)、(document).ready(fn)与window.onload的区别？
( f n ) 、 (fn)、 (fn)、(document).ready(fn)是等价的，哪个代码在前面哪个先执行（ jsp的dom树结构加载完毕即刻调用方法）；
window.onload最后执行（jsp的dom树加载完，css、js等静态资源加载完毕执行）。
<script type="text/javascript">
/* $(fn)、$(document).ready(fn)与window.onload的区别？ */
/*项目维护的时候需要用到 */
/* 结论：$(fn)、$(document).ready(fn)是等价的，哪个代码在前面哪个先执行
* jsp的dom树结构加载完毕即刻调用方法
window.onload最后执行
jsp的dom树加载完，css、js等静态资源加载完毕执行
*/
window.onload = function () {
alert("hello jquery3");
}
$(function() {
alert("hello jquery1");
})
$(document).ready(function () {
alert("hello jquery2");
})
</script>
4. jQuery三种工厂方法
4.1 jQuery 选择器
//利用a标签获取jQuery实例
/* $("a").click(function () {
alert("被翻牌子了");
}); */
//利用id=a3获取jQuery实例
/* $("#a3").click(function () {
alert("被翻牌子了");
}); */
//类选择器
/* $(".c1").click(function () {
alert("被翻牌子了");
}); */
//包含选择器：
/* $("p a").click(function () {
alert("被翻牌子了");
}) */
//组合选择器
/* $("a,span").click(function () {
alert("被翻牌子了");
}); */
//讲解第二个参数的作用（在div标签内部寻找a标签，然后给找到的标签添加事件）
//如果第二个参数没有填写，那么默认是document
// 自定义选择器：:exp
$("a" ,"div").click(function () {
alert("被翻牌子了");
});
4.2 jQuery对象转js对象
/* var $h1 = $("#h1");
alert($h1.val());
//jQuery对象转js对象
//第一种
//var h1Node = $h1.get(0);
//第二种用数组
var h1Node = $h1[0];
alert(h1Node.value); */
4.3 js对象转jQuery对象
var h2Node = document.getElementById("h2")
alert(h2Node.value);
//js对象转jQuery对象
var $h2Node = $(h2Node);
alert($h2Node.val());
**5. this指针的作用 **
$(function () {
//给input点击事件
$(":input").click(function () {
//this指事件元（获取当前按钮的按钮值）
alert(this.value);
$("a").each(function (index,item) {
//指的是当前元素（点击按钮，获取所有a标签的值）
alert(index + "," + $(this).html() + "," + $(item).html());
});
});
})
6、使用jquery动态给table添加样式
<script type="text/javascript">
$(function (){
$("table tr:eq(0)").addClass("yello");
$("table tr:gt(0)").addClass("red");
$("table tr:gt(0)").hover(function () {
$(this).removeClass().addClass("fen");
},function () {
$(this).removeClass().addClass("red");
});
});
</script>
二、jQuery插件
1. 插件机制简介
往jquery类库里面去扩展方法，这类方法就是jquery插件
2. 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>
<script type="text/javascript">
$(function() {
//json对象的字符串体现形式
var jsonObj1 = {
sid:'s001',
sname:'zhangsan'
};
console.log(jsonObj1);
//json数组的字符串体现形式
var jsonArray1 = [1,3,4,5];
console.log(jsonArray1);
//json混合模式的字符串体现形式
var jsons = {id:3,hobby:['a','b','c']};
console.log(jsons);
var jsonObj3 = {
sid:'s001',
sname:'lisi',
hobby:['a','b','c']
};
//$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").sayHello();
alert("yellow");
})
</script>
</head>
<body>
<span id="yellow">yellow</span>
</body>
</html>
3.4. jQuery插件开发实例
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);
});
});
}
});
})
css
.fen {
background: #ff66ff;
}
.yellow {
background: #ffff66;
}
.red {
background: #ff3333;
}
.blue {
background: #9999ff;
}
.green {
background: #bbff99;
}
.hui {
background: #d6d6c2;
}
怎么建立 js 文件?
右键点击 new 然后选择下面的 source file 输入名字 输入名字 点击finish 就能新建js文件了
三、 ajax
1. jackson
Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象
和xml文档，同样也可以将json、xml转换成Java对象
package com.caoguangli;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.caoguangli.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", "zs");
ObjectMapper om = new ObjectMapper();
System.out.println(om.writeValueAsString(s));
// json数组
Student s1= new Student("s002", "绿色");
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));
}
}
核心代码：
ObjectMapper mapper = new ObjectMapper();
mapper.writeValueAsString(obj);
int count = md.getColumnCount();
map.put(md.getColumnName(i), rs.getObject(i));
2. javaBean与map集合转换成json字符串格式是一样的
package com.caoguangli;
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 Deno2 {
public static void main(String[] args) throws JsonProcessingException {
Map<String, Object> stu = new HashMap<>();
stu.put("sid", "s001");
stu.put("sname", "张三");
ObjectMapper om = new ObjectMapper();
System.out.println(om.writeValueAsString(stu));
Map<String, Object> stu2 = new HashMap<>();
stu2.put("sid", "s002");
stu2.put("sname", "绿色");
List<Map<String, Object>> list = new ArrayList<>();
list.add(stu);
list.add(stu2);
System.out.println(om.writeValueAsString(list));
}
}
3.json死循环
两个实体类一个学生（Student）的实体类和一个老师（Teacher）类
package com.caoguangli;
import java.util.HashSet;
import java.util.Set;
import com.caoguangli.entity.Student;
import com.caoguangli.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));
}
}
4. $.ajax实现省市联动
利用map集合存储数据，然后利用把数据以json格式传入前台，然后jsp页面利用ajax接收，转译Json格式，然后给市和县添加change事件
JsonBaseDao
package com.caoguangli.util;
import java.lang.reflect.Field;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.mysql.jdbc.Connection;
import com.mysql.jdbc.ResultSetMetaData;
import javafx.util.Callback;
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
package com.caoguangli.dao;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.caoguangli.util.JsonBaseDao;
import com.caoguangli.util.JsonUtil;
import com.caoguangli.util.PageBean;
import com.caoguangli.util.StringUtils;
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数据的工具包1）
package com.caoguangli.util;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
* 专门用来处理Jon数据的工具包
* @author Administrator
*
*/
public class JsonUtil {
/**
* 从paMap拿到咱们所需要用到的查询维度，用于sql语句拼接
* @param paMap 获取从jsp页面传递到后台的 参数集合（req.getPaMap）
* @param key
* @return
*/
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
package com.caoguangli.web;
import java.io.IOException;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.caoguangli.dao.RegionDao;
import com.caoguangli.util.ResponseUtil;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.mysql.fabric.Response;
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
package com.caoguangli.util;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
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>
推荐：
jQuery在线手册：http://hemin.cn/jq/
713
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
