jQuery理解与运用
1. 什么是jQuery
它是一个轻量级的javascript类库，别人写好的一个类。2. jQuery优点
2.1 总是面向集合2.2 多行操作集于一行
注1：就一个类“jQuery”，简写“$”
3、导入js库
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
4、三种程序入口的运用以及区别
/* $(fn)做为程序入口 $(fn)、$(document).ready(fn)与window.onload的区别？ */ window.onload =function(){ alert("hello jQuery3"); } $(document).ready(function(){ alert("hello jQuery2"); }) $(function(){ alert("hello jQuery1"); })
弹出顺序为：jQuery2--jQuery1--jQuery3
区别：
jQuery1和jQuery2谁在前面谁就先运行，jsp的dom树结构加载完毕即刻调用方法
jQuery3最后运行， jsp的dom树加载完、css、js等静态资源加载完毕再执行window.onload
5、jQuery的几种简单选择器
<script type="text/javascript"> $(function(){ //利用a标签获取jquery实例 /* $("a").click(function(){ alert("123"); }); */ //利用id等于a3获取jQuery实例 /* $("#a3").click(function(){ alert("123"); }); */ //利用class值等于c1来获取jquery实例 /* $(".c1").click(function(){ alert("123"); }); */ //利用包含的形式来获取jquery实例 /* $("p a").click(function(){ alert("123"); }); */ //组合选择器 /* $("a,span").click(function(){ alert("123"); }); */ //第二个参数的作用（在div标签内部寻找a标签，然后给找到的标签添加事件） //如果第二个参数不填，那么默认是document $("a","div").click(function(){ alert("123"); }); }) </script>
5.1 通过点击事件给jQuery的实例追加jsp代码
$(function(){ $(":input[name='name1']").click(function(){ //在id=selId1的select的jquery实例上追加"<option value='1'>湖南省</option>"的html jquery实例 $("#selId1").append("<option value='1'>湖南省</option>"); }); $(":input[name='name2']").click(function(){ //将"<option value='1'>长沙</option>"的html jquery实例追加到id=selId2的select标签jquery实例中 $("<option value='1'>长沙</option>").appendTo("#selId2"); })
页面显示：
6、jQuery跟js的互转
//jquery对象转js对象 var h1Node = $h1.get(0); var h1Node = $h1[0]; alert(h1Node.value); */ var h2Node = document.getElementById("h2"); alert(h2Node.value); //js对象转jquery对象 var $h2Node = $(h2Node); alert(h2Node.val());
jQuery是一个类；
js的结构是一个元素（element）
7、json的三种格式
$(function(){ //json对象的字符串体现形式 var jsonObj1 = { sid:'s001', sname:'zhangsan', }; //console.log(jsonObj1); //json数组的字符串体现形式 var jsonArray = [1,3,4,5]; //console.log(jsonArray); //json混合模式的字符串体现形式 var jsons = {id:4,hobby:['a','b','c']}; //console.log(jsons); var jsonObj3 = { sid:'s002', sname:'lisi', hobby:['a','b','c'] }; }）
8、this指针的作用
$(function(){ $(":input").click(function(){ //指的是事件源 alert(this.value); $("a").each(function(index,item){ //指的是当前元素 alert(index+","+$(this).html()+","+$(item).html()); }); }); })
9、$.extend和$.fn.extend
$.extend是用来扩充jquery类属性或者方法
var jsonObj2 = {};
//用后面的对象扩充第一个对象
//$.extend(jsonObj2,jsonObj1);
//扩充值覆盖的问题，之前已经扩充的属性值会被后面的对象所覆盖，如果后面的对象有新的属性，会继续扩充
$.extend(jsonObj2,jsonObj1,jsonObj3);
console.log(jsonObj2);
$.extend({
hello:function(){
alert("hello");
}
});
$.hello();
$.fn.extend是用来扩充jquery实例的属性或者方法所用
$.fn.extend({ sayHello:function(){ alert("nihao"); } }); $("#yellow").sayHello(); alert("yellow");
用鼠标事件实现自动更换class样式
<style type="text/css">
.fen{
background:#ff66ff;
}
.yello{
background:#ffff66;
}
.red{
background:#ff3333;
}
</style>
<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");
});
})
$("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>
jsp页面显示
请忽略显示的数据的问题，咱只看效果
10、ajax的简单使用
1.1 什么是Jackson
Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象和xml文档，同样也可以将json、xml转换成Java对象。
1.2 核心代码
//JSON操作的核心，Jackson的所有JSON操作都是在ObjectMapper中实现
ObjectMapper mapper = new ObjectMapper(); mapper.writeValueAsString(obj); int count = md.getColumnCount(); map.put(md.getColumnName(i), rs.getObject(i));
10.1 jackson将java->json
JavaBean/Map
//json对象
Student stu=new Student("s001","zhangsan");
ObjectMapper mapper=new ObjectMapper();
System.out.println(mapper.writeValueAsString(stu));
10.2 数组/List/Set
// json数组 Student stu1=new Student("s002","lisi"); List<Student> list=new ArrayList<>(); list.add(stu1); list.add(stu); System.out.println(mapper.writeValueAsString(list));
10.3 类里嵌类--混合模式
// json混合g格式 Map<String,Object> map=new HashMap<>(); map.put("total", 2); map.put("stus",list); System.out.println(mapper.writeValueAsString(map));
json死循环问题
1、由双向绑定改成单向绑定，也就是彼此之间的关系交于一方维护。
2、@JsonIgnore：将彼此循环调用的属性忽略，不参与对象转成json格式
Ajax运用
JsonBaseDao
package com.yuan.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<>(); // 获取原数据 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.yuan.dao; import java.util.HashMap; import java.util.List; import java.util.Map; import com.dengrenli.util.JsonBaseDao; import com.dengrenli.util.JsonUtil; import com.dengrenli.util.PageBean; import com.dengrenli.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
package com.yuan.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.yuan.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.dengrenli.dao.RegionDao; import com.dengrenli.util.ResponseUtil; import com.fasterxml.jackson.databind.ObjectMapper; import com.mysql.fabric.Response; public class RegionServlet extends HttpServlet { private static final long serialVersionUID = 502710678698533506L; 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.yuan.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>
