1. 什么是jQuery
它是一个轻量级的javascript类库
2. jQuery优点
总是面向集合
多行操作集于一行
3.导入js库
<script type="text/javascript" src=""></script>
4. jQuery三种工厂模式
1.选择器
<%@ 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> <script type="text/javascript"> $(function(){ $("a").click(function(){ alert("利用a标签获取jquery实例") }); $(".c2").click(function(){ alert("利用类选择器获取jquery实例"); }); $("#a3").click(function(){ alert("利用id选择器获取jquery实例"); }); $("div button").click(function(){ alert("利用包含选择器获取jquery实例"); }); $("a,button").click(function(){ alert("利用组合选择器获取jquery实例"); }); }) </script> </head> <body> <p> <a id="a1" class="c1" href="#">点我1</a> </p> <p> <button id="a2" class="c2" href="#">点我2</button> </p> <p> <button id="a3" class="c3" href="#">点我3</button> </p> <div> <button id="a4" class="c1" href="#">点我4</button> </div> </body> </html>
2.jquery对象转js对象
var $h1= $("#h1"); alert($h1.val()); //jquery对象转js对象 var h1Node=$h1.get(0); alert(h1Node.value);
3.js对象转jquery对象
var h2Node=document.getElementById("h2"); alert(h2Node.value); //js对象转jquery对象 $h2Node=$(h2Node); alert(h2Node.val());
4. this指针的作用
<script type="text/javascript"> $(function(){ $(":input").click(function(){ //this指的是事件源 alert(this.value); $("a").each(function(){ //this指的是当前元素 alert($(this).html()) }); }); }) ; </script>
5.使用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>1万</td> </tr> <tr> <td>杀神</td> <td>逆苍天</td> <td>25万</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. 插件机制简介
就是用jquery写的一些js代码，他能实现具体的功能，比如上传图片，弹出遮罩层，直接将js文件引入进页面就可以调用了，达成快速开发的效果。
简单的来说，就是 往jquery类库里面去扩展方法，
Ajax运用
1、jackson
Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象和xml文档，同样也可以将json、xml转换成Java对象
//json对象json对象 Student stu1 = new Student("s001","张三"); ObjectMapper om = new ObjectMapper(); System.out.println(om.writeValueAsString(stu1)); //json数组： Student stu2 = new Student("s002","李四"); List<Student> ls = new ArrayList<>(); ls.add(stu1); ls.add(stu2); System.out.println(om.writeValueAsString(ls)); //json混合模式 Map<String, Object> xmap = new HashMap<>(); xmap.put("003",2); xmap.put("004",ls); System.out.println(om.writeValueAsString(xmap));
核心代码：
ObjectMapper mapper = new ObjectMapper(); mapper.writeValueAsString(obj); int count = md.getColumnCount(); map.put(md.getColumnName(i), rs.getObject(i));
2、后台json的三种格式的体现形式
实体类（Student）：
package com.entity; import java.util.HashSet; import java.util.Set; public class Student { private String sid; private String sname; //教师集合 private Set<Teacher> teas = new HashSet<>(); 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<Teacher> getTeas() { return teas; } public void setTeas(Set<Teacher> teas) { this.teas = teas; } @Override public String toString() { return "Student [sid=" + sid + ", sname=" + sname + ", teas=" + teas + "]"; } public Student(String sid, String sname, Set<Teacher> teas) { super(); this.sid = sid; this.sname = sname; this.teas = teas; } public Student() { super(); } public Student(String sid, String sname) { super(); this.sid = sid; this.sname = sname; } }
1 对象
2 列表/数组
3. 混合模式
<%@ 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,2,3,4,5];
console.log(jsonArray1);
//json混合模式的字符串体现形式
var jsons = {id:3,hobby:['a','b']};
console.log(jsons);
var jsonObj3 = {
sid : 's002',
sname : 'lisi',
hobby:['a','b']
};
//$.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").hello();
alert("yellow");
});
</script>
</head>
<body>
<span id="yellow">yellow</span>
</body>
</html>
json死循环：
import java.util.HashSet; import java.util.Set; import com.entity.Student; import com.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)); } }