jQuery
1. 什么是jQuery
它是一个轻量级的javascript类库
注1：就一个类“jQuery”，简写“$”
2. jQuery优点
2.1 总是面向集合
2.2 多行操作集于一行
3.如何使用jQuery(hello jQuery)
3.1 导入js库
<script type="text/javascript" src="js库路径"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.js"></script>
$(fn)、$(document).ready(fn)与window.onload的区别
window.onload=function(){
alert("3")
}
$(document).ready(function(){
alert("2")
})
$(function(){
alert("1");
})
/*
*结论：$(fn)、$(document).ready(fn)是等价的。那个代码在前面哪个先执行。
*jsp的dom树结构加载完毕即刻调用方法
*window.onload最后执行
*jsp的dom树加载完,css,js等静态资源加载完毕执行
*/
4.jQuery三种工厂方法
4.1 jQuery(exp[,context])
exp:选择器
context:上下文 容器/环境 默认：document
/* 4.jQuery三种工厂方法
4.1 jQuery(exp[,context])
exp:选择器
c */ontext:上下文 容器/环境 默认：document
//利用a标签获取jquery实例
//元素选择器
/* $("a").click(function(){
alert("被翻牌子了");
}); */
//利用ID=a3标签获取jquery实例
//ID选择器
/* $("#a3").click(function(){
alert("被翻牌子了");
}); */
//类选择器
/* $(".c1").click(function(){
alert("被翻牌子了");
}); */
//包含选择器（E1 E2）
/* $("p a").click(function(){
alert("被翻牌子了");
}); */
//组合选择器（E1，E2）
/* $("a,span").click(function(){
alert("被翻牌子了");
}); */
//讲解第二个参数的作用(在DIV标签内部寻找到a标签，然后给找到的标签添加事件)
//如果第二个参数没有填写，那么默认是document
//属性选择器
$("a","div").click(function(){
alert("被翻牌子了");
});
})
</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>
jQuery.fn.extend()就是扩展jQuery本身的实例方法 “对象名.方法名”
jQuery.extend()就是扩展jQuery本身的类方法。静态方法 “类名.静态方法名”
2.JSON的三种方式
2.1 对象
{sid:'p001',sname:'zhangsan'}
2.2 列表/数组
[1,3,4,5]
[{},{},{}]
$.each(数组,function(idx,elem){
});
2.3 混合模式
{id:3,num:[1,3,4,5]}
{total:81,page:1,list:[{对象},{对象},{对象}]}
2.4 JSON转换
将字符串转成json对象： JSON.parse()
将对象、数组转换成字符串：JSON.stringify()
var obj={id:’001’:name:’zhangsan’
$(function() {
var obj={sid:'001',snaem:'zs'};
console.log(obj);
//1.将对象.数组转化成字符串JSON.stringify();
var tostr=JSON.stringify(obj);
console.log(tostr);
//2将字符串转化成JSON对象
var toobj=JSON.parse(tostr);
console.log(toobj);
//.$.extend和$.fn.extend
//1.1$.extend(obj1,obj2,obj3[,...])
//将所有参数合并到obj1,并返回obj1;
var obj1={'pid':'001','pname':'李四'};
var obj2={'pid':'007'};
var obj3={'card':'43101010001'};
console.log(obj1.pid+','+obj1.pname+','+obj1.card);
$.extend(obj1,obj2);
console.log(obj1.pid+','+obj1.pname+','+obj1.card);
$.extend(obj1,obj2,obj3);
console.log(obj1.pid+','+obj1.pname+','+obj1.card);
console.log("obj2:"+JSON.stringify(obj2));
//以obj参数扩展Jquery类方法和类属性（静态方法和静态属性）
//$.extend(obj)：一次能扩展多个类方法
//$.method=function(option){};一次只能扩展一个类方法
var obj = {
add : function(a, b) {
return a + b;
},
minus : function(a, b) {
return a - b;
}
}
$.extend(obj);
var res=$.add(4,6);
console.log(res);
var ues=$.minus(8,4);
console.log(ues);
//$.method=function(option){};一次只能扩展一个类方法
$.div=function(a,b){
return a*b;
};
var res=$.div(2,2);
console.log(res);
//$.fn.extend:扩展jquery对象的实例方法
//实例化对象名.方法名
$.fn.extend({
color:function(){
return $(this).css({'background':'red'});
}
});
$('div').color();
$('table').bgcolor();
});
1.1 什么是Jackson
Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象和xml文档，同样也可以将json、xml转换成Java对象。
1.2 核心代码
//JSON操作的核心，Jackson的所有JSON操作都是在ObjectMapper中实现
对象User
package com.demo;
public class User {
private int age;
private String name;
private int id;
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public User(int age, String name, int id) {
super();
this.age = age;
this.name = name;
this.id = id;
}
}
//JSON操作的核心，Jackson的所有JSON操作都是在
ObjectMapper mapper=new ObjectMapper();
// 1.3.1 JavaBean、Map集合与JSON互转
// 1）JavaBean/Map转JSONs
// 2）JavaBean转json对象
User user=new User(1, "lisji", 4);
String objtojson=mapper.writeValueAsString(user);
System.out.println(objtojson);
//1.2map集合转化成json对象
Map<String, Object> map=new HashMap<String, Object>();
map.put("pid", "p001");
map.put("pname", "zhangs");
map.put("page", "18");
String maptojson=mapper.writeValueAsString(map);
System.out.println(maptojson);
//1.3json对象转化成javabean对象
String jsonStr="{\"pname\":\"zhangs\",\"pid\":\"p001\",\"page\":\"18\"}";
User us=mapper.readValue(jsonStr, User.class);
// System.out.println(us);
//1.4JSON对象转化成map集合
//TypeReference(json对象序列化与反序列化)
Map<String, Object> jsonTMap= mapper.readValue(jsonStr, new TypeReference<Map<String, Object>>() {
});
//System.out.println(jsonTMap);
4.插件：表格行颜色切换效果
新建bgcolor.css文件
.head{
background: #ccc;
}
.over{
background: red;
}
.out{
background: #fff;
}
创建js文件jquery.bgcolor.js
$.fn.extend({
bgcolor:function(options){
//判空处理
options=options||{};
var defaults={
headClass:'head',
overClass:'over',
outClass:'out'
};
//扩展jquery本身的类方法，命名参数写发
$.extend(defaults,options);
return $(this).each(function(){
//修改表头的颜色
$("tr:eq(0)",this).addClass(defaults.headClass);
//添加行的悬停效果
$("tr:gt(0)",this).addClass(defaults.outClass).hover(function(){
$(this).removeClass(defaults.outClass).addClass(defaults.overClass);
},function(){
$(this).removeClass(defaults.overClass).addClass(defaults.outClass);
});
});
}
})
引入插件
<script type="text/javascript" src="js/plugins/bgcolor/jquery.bgcolor.js"></script>
<link rel="stylesheet" type="text/css" href="js/plugins/bgcolor/bgcolor.css">
效果
2.2 jQuery之Ajax实现省市县级联动（数据库版）
$(function(){
query($("#prov"),7459)
$("#prov").change(function(){
query($("#city"),$(this).val())
});
$("#city").change(function(){
query($("#town"),$(this).val())
})
$("#prov").change(function(){
query($("#town"),$(this).val())
})
});
function query(obj,pid){
$.ajax({
url:'RegionAction',
data:{"parent_id":pid},
dataType:'json',
type:'post',
success:function(data){
obj.find("option:not(:first)").remove();
$.each(data,function(idx,elem){
obj.append("<option value='"+elem.id+"'>"+elem.region_name+"</option>")
});
}
});
}
</script>
</head>
<body>
<select id="prov">
<option value="">请选择</option>
</select>
<select id="city">
<option value="">请选择</option>
</select>
<select id="town">
<option value="">请选择</option>
</select>
效果
