jQuery 选择器&插件&ajax
- jQuery 选择器&插件&ajax
- jQuery 简介
- jQuery 之 选择器
- jQuery 的工厂方法
- this 指针
- jQuery 之 插件
- json的三种格式
- jQuery 插件开发实例
- jquery 之 ajax
- jackson
- 将java 转为 json
- json 死循环
jQuery 选择器&插件&ajax
jQuery 简介
什么是jQuery?
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（JavaScript框架）。
jQuery设计的宗旨是“write Less，Do More”，意思就是：写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性：
- 具有独特的链式语法和短小清晰的多功能接口；
- 具有高效灵活的css选择器，并且可对CSS选择器进行扩展
- 具有便捷的插件扩展机制和丰富的插件。
jQuery优点：
- 总是面向集合
- 多行操作集于一行
jQuery 之 选择器
1、导入js库
<script type=“text/javascript” src=""></script>2、$(fn)做为程序入口
jQuery程序的入口：
- $(document).ready(fn)
- $(fn);
$(fn)、$(document).ready(fn)、window.onload有什么区别？
$(fn)、$(document).ready(fn)是等价的，哪个代码在前面就哪个先执行，jsp的dom树结构加载完毕即刻调用方法；
window.onload最后执行，jsp的dom树加载完毕，css.js等静态资源加载完毕执行。
jQuery 的工厂方法
jQuery 有三种工厂方法 。
1、 jQuery (exp[,context])
- 标签选择器
- ID选择器
- 类选择器
exp：选择器
context：上下文，环境/容器，documemt
注意：
选择器，css选择器
$就是jQuery简写
包含选择器：E1 E2
组合选择器：E1,E2,E3
自定义选择器：:exp
2、jQuery(html)
html：基于html的一个字符串
3、jQuery(element)
element：js对象，表示一个html元素对象
this 指针
this 指针的作用：
- 1、事件源（获取当前按钮的按钮值）
- 2、当前元素（点击按钮，获取所有a标签的值）
- 3、在插件中的作用，看下图所示：
jQuery 之 插件
jQuery 插件简介
jQuery 插件:
用jquery写一些js代码能实现具体的功能，直接将该js文件引入进页面就可调用，可以快速开发。
$.extend 和 $.fn.extend：
- $.extend：对象的扩展(或继承)
$.extend(obj1,obj2,obj3[,...])
$.extend(obj1,obj2)
$.extend(obj1)//$.method=function(options){...};- $.fn.extend
$.fn.extend(obj1)//$.fn.method=function(options){...};json的三种格式
- 1、对象
如： {sid:‘001’,sname:‘小样’} - 2、列表/数组
如： [1,2,3,4] - 3、混合模式
如： {id:001,hobby:[‘aa’,‘bb’,‘cc’]}
请参考重要代码，对比json的三种格式（前台 & 后台）：
json 前台展示：
<%@ 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-3.3.1.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
//json对象的字符串体现形式
var jsonObj1 = {sid:'s001',sname:'南柱赫'};
//console.log(jsonObj1);
//json数组的字符串体现形式
var jsonArray1 = [1,2,3,4];
//console.log(jsonArray1);
//json混合模式的字符串体现形式
var jsons = {id:1,hobby:["aa","bb","cc"]};
//console.log(jsons);
//$.extend用来扩充jquery类的属性和方法
var jsonObj2 = {};
//$.extend(jsonObj2,jsonObj1);//用后面的对象扩充第一个对象
//console.log(jsonObj2);
//之前已经扩充的属性值会被后面的对象覆盖，如果后面对象有新的属性，会继续扩充
//解决扩充覆盖问题
var jsonObj3 = {sid:'s003',sname:'伊清',hobby:['rap','唱跳']};
$.extend(jsonObj2,jsonObj1,jsonObj3);
console.log(jsonObj2);
$.extend({
hello:function(){
alert('来啦来啦');
}
});
$.hello();
//$.fn.extend是用来扩充jQuery实例的属性、方法
$.fn.extend({
sayHello:function(){
alert('Hello!');
}
});
$("#yellow").sayHello();
alert("yellow");
})
</script>
</head>
<body>
<span id="yellow">yellow</span>
</body>
</html>json 后台展示：
jQuery 插件开发实例
jQuery插件的添加，其实就是给jQuery添加新的实例方法或类方法，然后将功能封闭在其中
重要代码如下：
自定义 css：
自定义 js：
jsp界面实例：
在jsp界面实例中直接引用相关的css 和 js 即可！！！
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/jsp/common/head.jsp" %>
<!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">
$(function(){
$("table").bgColor({
head : 'fen',
out : 'yellow',
over : 'red'
});
})
</script>
</head>
<body>
<table id="t1" border="1" width="90%">
<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="90%">
<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>注意 :
在大型项目中，大部分时候需要在多个jsp界面调用多个css 和 js ，这时，我们可以再写一个head.jsp，在这个head.jsp 界面直接调用需要用到的css 和 js，然后，在有需要的jsp界面直接调用head.jsp就OK ! 下面就是一个例子。
head.jsp 代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE>
<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-3.3.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery/table/js/jquery.table.js"></script>在界面调用，代码如下：
<%@ include file="/jsp/common/head.jsp" %>这样岂不是减少了代码量，还提高了开发效率。
jquery 之 ajax
jackson
什么是 jackson？
Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象
和xml文档，同样也可以将json、xml转换成Java对象
jackson 核心代码：
ObjectMapper mapper = new ObjectMapper();
mapper.writeValueAsString(obj);
int count = md.getColumnCount();
map.put(md.getColumnName(i), rs.getObject(i));将java 转为 json
注意：
javaBean与Map集合转换成json字符串的格式是一样的，论证如下：
json 死循环
处理方式：
- 1、由双向绑定改成单向绑定，将彼此之间的关系交于一方维护
- 2、@JsonIgnore：将彼此循环调用的属性忽略，不参与对象转成json格式
重要代码如下：
package com.dj;
import java.util.HashSet;
import java.util.Set;
import com.dj.entity.Student;
import com.dj.entity.Teacher;
import com.fasterxml.jackson.annotation.JsonIgnore;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
/**
* json死循环
*
* 处理方式：
* 1、由双向绑定改成单向绑定，将彼此之间的关系交于一方维护
* 2、@JsonIgnore：将彼此循环调用的属性忽略，不参与对象转成json格式
*
* @author 86182
*
*/
public class Demo3 {
public static void main(String[] args) throws JsonProcessingException {
Student stu1 = new Student("s-001", "南柱赫");
Student stu2 = new Student("s-002", "李钟硕");
Teacher tea1 = new Teacher("t-001", "张艺兴", null);
Teacher tea2 = new Teacher("t-002", "王嘉尔", null);
Set<Teacher> teas = new HashSet<>();
teas.add(tea1);
teas.add(tea2);
stu1.setTeas(teas);
Set<Student> stus = new HashSet<>();
stus.add(stu1);
stus.add(stu2);
tea1.setStus(stus);
ObjectMapper om = new ObjectMapper();
System.out.println(om.writeValueAsString(stu1));
}
}处理后的打印效果：
