文章目录
学习目标
day91 jquery
- 能够在HTML文件中引入jQuery文件
- 能够使用jQuery的基本选择器进行操作
- 能够使用jQuery的层级选择器进行操作
- 能够使用jQuery的属性选择器进行操作
- 能够使用jQuery的基本过滤器选择器进行操作
- 能够使用jQuery的表单过滤选择则其进行操作
- 能够理解jQuery的属性方法(基本&样式)
- 能够完成全选&全不选和下拉列表左右移动案例
day02 ajax & json
- 能够理解异步的概念
- 能够了解原生js的ajax
- 能够使用jQuery的$.ajax()进行访问
- 能够使用jQuery的$.get()进行访问
- 能够使用jQuery的$.post()进行访问
- 能够掌握json的对象&数组数据格式
- 能够使用json转换工具Jackson进行json格式字符串的转换
- 能够完成用户名是否存在案例
day03 redis
- 能够理解nosql的概念
- 能够说出redis的常用数据类型
- 能够使用redis的string操作命令
- 能够理解redis的hash操作命令
- 能够理解redis的list操作命令
- 能够理解redis的set操作命令
- 能够使用jedis对redis进行操作
- 能够完成jedis完成缓存优化案例
day01 JQuery
1. JQuery 基础
1. 概念
一个JavaScript的框架,简化JS开发
jQuery是一个快速、简洁的JavaScript框架,设计宗旨是“write less,do more”.封装js的常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和ajax交互。
JavaScript框架:本质上就是一些js文件,封装了js的原生代码而已。
2. 快速入门
-
步骤:
-
下载JQuery
-
目前有三个大版本:
1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日)
2.x:不兼容ie678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)
3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求, 一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。
目前该版本是官方主要更新维护的版本。最新版本:3.2.1(2017年3月20日 -
jquery-xxx.js和jquery-xxx.min.js区别:
- jquery-xxx.js:开发版本,给程序员看的,有良好的缩进和注释
- jquery-xxx.min.js:生产版本,程序中使用,没有缩进,体积小一些,程序加载更快。
-
-
导入jQuery的js文件:导入min.js文件
-
使用
var div1=$("#div1"); alert(div1.html())
-
3. jquery对象和js对象的区别和转换
- jQuery对象在操作时更加方便
- jQuery对象和js对象方法不通用
- 相互转换
- jq --> js : jq对象[索引] 或者 jq对象.get(索引)
- js --> jq: $(js对象)
2. 选择器
筛选具有相似特征的元素(标签)
1. 基本操作学习
-
事件绑定
// 1. 获取b1按钮 $("#b1").click(function(){ alert("abc"); });
-
入口函数
$(function(){ });
-
window.onload和$(function)的区别
- window.onload只能定义一次,如果定义多次,后边的会将前边的覆盖掉
- $(function) 可以定义多次的
-
样式控制:css方法
// $("#div1").css("background-color","red") $("#div1").css("backgroundColor","pink");
2.1 基本选择器
1. 标签选择器(元素选择器)
语法:$("html标签名")
获取所有匹配标签名称的元素
2. id选择器
语法:$("#id的属性值")
获取与指定id属性值匹配的元素
3. 类选择器
语法:$(".class的属性值")
获取与指定class属性值匹配的元素
4. 并集选择器
语法:$("选择器1,选择器2....")
获取多个选择器选中的所有元素
2.2 层级选择器
1. 后代选择器
语法:$("A B")
选择A元素内部的所有B元素(包括孙子)
2. 子选择器
语法:$("A > B")
选择A元素内部的所有B子元素(儿子)
2.3 属性选择器
1. 属性名称选择器
语法:$("A[属性名]")
包含指定属性的选择器
2. 属性选择器
语法:$("A[属性名]='值'")
包含指定属性等于指定值的选择器
3. 复合属性选择器
语法:$("A[属性名1]='值1'[]...")
包含多个属性条件的选择器
2.4 过滤选择器
1. 首元素选择器
语法::first
获得选择的元素中的第一个元素
2. 尾元素选择器
语法::last
获取选择的元素中的最后一个元素
3. 非元素选择器
语法::not(selector)
不包括指定内容的元素
4. 偶数选择器
语法::even
偶数,从0开始计数
5. 奇数选择器
语法: :odd
奇数,从0开始计数
6. 等于索引选择器
语法::eq(index)
指定索引元素
7. 大于索引选择器
语法::gt(index)
大于指定索引元素
8. 小于索引选择器
语法::lt(index)
小于指定索引元素
9. 标题选择器
语法::header
获取标题(h1~h6) 元素,固定写法
2.5 表单过滤选择器
1. 可用元素选择器
语法::enabled
获取可用元素
2. 不可用元素选择器
语法: :disabled
获取不可用元素
3. 选中选择器
语法::checked
获取单选/复选框选中的元素
:selected
获取下拉框选中的元素
3. DOM操作
1. 内容操作
html()
获取/设置元素的标签体内容<a><font>内容</font></a>--><font>内容</font>
text()
获取/设置元素的标签体纯文本内容<a><font>内容</font></a>-->内容
val()
获取/设置元素的value属性值
2. 属性操作
- 通用属性操作
attr()
获取/设置元素的属性removeAttr()
删除属性prop()
获取/设置元素的属性removeProp()
删除属性
attr 和 prop区别:
- 如果操作是是元素的固有属性,建议使用prop
- 如果操作的是元素自定义的属性,建议使用attr
- 对class属性操作
- addClass(): 添加class属性值
- removeClass(): 删除class属性值
- toggleClass(): 切换class属性
- css()
toggleClass(“one”): 判断如果元素对象上存在class=“one”,则将属性值one删掉;如果不存在class=“one”,添加
- CRUD操作
- append(): 父元素将子元素追加到末尾
- 对象1.append(对象2):将对象2添加到对象1元素内部,并且在末尾
- prepend():父元素将子元素追加到开头
- 对象1.prepend(对象2):将对象2添加到对象1元素内部,并且在开头
- appendTo():
- 对象1.appendTo(对象2):将对象1添加到对象2元素内部,并且在末尾
- prependTo():
- 对象1.prependTo(对象2):将对象1添加到对象2元素内部,并且在开头
- after():添加元素到元素后边
- 对象1.after(对象2):将对象2添加到对象1后边,对象1和对象2是兄弟关系
- before(): 添加元素到元素前边
- 对象1.before(对象2):将对象2添加到对象1前边,对象1和2是兄弟
- insertAfter():
- 对象1.insertAfter(对象2):将对1添加到对象2后边,对象1和对象2是兄弟关系
- insertBefore()
- 对象1.insertBefore(对象2):将对象1添加到对象2前边,对象1和2是兄弟
- remove(): 移除元素
- 对象.remove() 将对象删除掉
- empty(): 清空元素的所有后代元素
- 对象.empty() 将对象的后代元素全部清空,但是保留当前对象及其属性节点。
- append(): 父元素将子元素追加到末尾
jquery高级
1. 动画
1. 三种方式显示和隐藏元素
- 默认显示和隐藏方式
- show([speed],[easing],[fn])
- 参数
- speed 动画的速度。三个预定义的值(“slow”,“normal”,“fast”)或表示
- easing:用来切换效果,默认“swing”,可用参数“linear”
- swing: 动画执行效果:先慢,中间快,最后又慢
- linear:动画执行时速度是匀速
- fn: 在动画完成时执行的回调函数,每个元素执行一次
- 参数
- hide()
- toggle()
- show([speed],[easing],[fn])
- 滑动显示和隐藏
- slideDown(xxx)
- slideUp(xxx)
- slideToggle(xxx)
- 淡入淡出显示和隐藏方式
- fadeIn(xxx)
- fadeOut(xxx)
- fadeToggle(xxx)
2. 遍历
- js的遍历方式
- for(初始化值;循环结束条件;步长)
- jq的遍历方式
- jq对象.each(callback)
- 语法:jquery对象.each(function(index,element(){}));
- index:就是元素在集合中的索引
- element:就是集合中的每一个元素对象
- this:集合中的每一个元素对象
- 回调函数返回值
- false:如果当前function返回为false,则结束循环break
- true:如果当前function返回为true,结束本次循环,继续下次循环continue
- 语法:jquery对象.each(function(index,element(){}));
- $.each(object,[callback])
- for…of: jquery 3.0版本之后提供的方式
- for(元素对象 of 容器对象)
- jq对象.each(callback)
不管用js方式或jq方式去遍历数组,里面得到的对象都是JS对象,如果要调用JQ方式需要先转换!
3. 事件绑定
- jquery标准的绑定方式
- jq对象.事件方法(回调函数);
- 如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。
- jq对象.事件方法(回调函数);
- on绑定事件/off解除绑定
- jq对象.on(“事件名称”,回调函数)
- jq对象.off(“事件名称”)
- 如果off方法不传递任何参数,则将组件上的所有事件全部解绑
- 事件切换:toggle
- jq对象.toggle(fn1,fn2…)
- 当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2…
注意:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。
<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
4. 插件
增强jquery的功能
- 实现方式
- $.fn.extend(object) 对象级别 对当前页面的方法的抽取,重复利用
- 增强通过Jquery获取的对象的功能 $("#id")
- $.extend(object) 全局级别 直接使用,一般用于实现一些算法
- 增强JQuery对象自身的功能 $/jQuery
- $.fn.extend(object) 对象级别 对当前页面的方法的抽取,重复利用
day02 ajax
1. ajax
1. 概念
ASynchronous JavaScript And XML 异步的JavaScript 和 XML
异步 和 同步:客户端和服务器端相互通信的基础上。
- 同步:客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
- 异步:客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作。
ajax:用于创建交互式网页的开发技术
Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。提升用户的体验
2. 实现方式
1. 原生的js实现方式(了解)
-
创建核心对象
var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
-
建立连接
xmlhttp.open("GET","/day22/ajaxServlet?username=tom",true);
-
发送请求
xmlhttp.send();
-
接收数据
xmlhttp.onreadystatechange=function() { // 判断readyState就绪状态 if (xmlhttp.readyState==4 && xmlhttp.status==200) { var responseText = xmlhttp.responseText; alert(responseText); } } }
<script>
function fun() {
// 发送异步请求
// 1. 创建核心对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// 2. 建立连接
/*
参数:
1. 请求方式
get :请求参数在url后拼接,send方法为空参
post: 请求参数在send方法中定义
2. 请求的URL
3. 同步或异步请求:true异步
*/
xmlhttp.open("GET","/day22/ajaxServlet?username=tom",true);
// 3. 发送请求
xmlhttp.send();
// 4. 接收并处理来自服务器的响应结果
// 获取方式:xmlhttp.responseText
// 什么时候获取?当服务器响应成功后再获取
// 当xmlhttp对象的就绪状态改变时,触发事件onreadystatechange
xmlhttp.onreadystatechange=function()
{
// 判断readyState就绪状态
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var responseText = xmlhttp.responseText;
alert(responseText);
}
}
}
</script>
2. jquery实现方式(重点)
2.1 $.ajax()
$.ajax({
url:"/day22/ajaxServlet1",
type:"get", // 默认get
// data:"username=jack&age=23", // 请求参数
data:{"username":"jack","age":23},
success:function (data) {
alert(data);
},//响应成功后的回调函数
error:function () {
alert("出错了。。。");
},
dataType:"text" // 设置接收到的相应数据的格式
});
2.2 $.get()
语法: $.get(url, [data], [callback], [type])
参数:url:请求路径;data:请求参数;callback:回调函数;type:响应结果的类型
callback:发送成功时回调函数。data:待发送 Key/value 参数。type:返回内容格式,xml, html, script, json, text, _default。
2.4 $.post()
语法:$.post(url, [data], [callback], [type])
2. json
1. 概念
Javascript Object Notation javascript对象表示法
- json现在多用于存储和交换文本信息的语法
- 进行数据的传输
- JSON 比 XML 更小、更快,更易解析。
2. 语法
1. 基本规则
- 数据在名称/值对中:json数据是由键值对构成的
- 键用引号(单双都行)引起来,也可以不使用引号
- 值的取值类型:
- 数字(整数或浮点数)
- 字符串(在双引号中)
- 逻辑值(true 或 false)
- 数组(在方括号中)
- 对象(在花括号中)
- null
- 数据由逗号分隔:多个键值对由逗号分隔
- 花括号保存对象:使用{}定义json 格式
- 方括号保存数组:[]
2. 获取数据
- json对象.键名
- json对象[“键名”]
- 数组对象[索引]
- 遍历
for(var key in person){
alert(key+":"+person[key])
}
for (var i = 0; i < ps.length; i++) {
var p = ps[i];
for(var key in p){
alert(key+":"+p[key])
}
}
遍历需要注意:person[key],而不是person.key
3.JSON转为Java对象(了解)
JSON解析器:
- 常见的解析器:Jsonlib,Gson,fastjson,jackson
- 导入jackson的相关jar包
- 创建Jackson核心对象 ObjectMapper
- 调用ObjectMapper的相关方法进行转换
- readValue(json字符串数据,Class)
4. Java对象转换JSON
-
导入jackson的相关jar包
-
创建Jackson核心对象 ObjectMapper
-
调用ObjectMapper的相关方法进行转换
-
转换方法:
-
writeValue(参数1,obj):
参数1:
File:将obj对象转换为JSON字符串,并保存到指定的文件中
Writer:将obj对象转换为JSON字符串,并将json数据填充到字符输出流中
OutputStream:将obj对象转换为JSON字符串,并将json数据填充到字节输出流中
-
writeValueAsString(obj):将对象转为json字符串
- 注解:
- @JsonIgnore:排除属性。
- @JsonFormat:属性值的格式化
- @JsonFormat(pattern = “yyyy-MM-dd”)
- 复杂java对象转换
- List:数组
- Map:对象格式一致
案例
校验用户名是否存在
服务器响应的数据,在客户端使用时,要想当做json数据格式使用。有两种解决方案:
- $.get(type):将最后一个参数type指定为"json"
- 在服务器端设置MIME类型
response.setContentType("application/json;charset=utf-8");
day03 redis
1. 概念
redis是一款高性能的NOSQL系列的非关系型数据库,键值存储数据库。
1.1 什么是nosql
not only sql,泛指菲关系型数据库
2. 命令操作
1. redis的数据结构
redis存储的是:key,value格式的数据,其中key都是字符串,value有5种数据结构
数据结构:
- 字符串类型 string
- 哈希类型hash: map格式
- 列表类型list:linkedlist格式,支持重复元素
- 集合类型 set:不允许重复元素
- 有序集合类型 sortedset:不允许重复元素,且元素有顺序
2. 字符串类型 string
- 存储 set key value
- 获取:get key
- 删除:del key
3. 哈希类型
- 存储:hset key field value
- 获取
- hget key field:获取指定的field对应的值
- hgetall key:获取所有的field和value
- 删除 hdel key field
4. 列表类型 list
linkedlist,可以添加一个元素到列表的头部(左边)或者尾部(右边)
- 添加
- lpush key value:将元素加入列表左表
- rpush key value:将元素加入列表右边
- 获取:lrange key start end:范围获取
- 删除:
- lpop key :删除列表最左边的元素,并将元素返回
- rpop key:删除列表最右边
5. set集合
不允许重复元素
- 存储:sadd key value
- 获取:smembers key
- 删除:srem key value
6. 有序集合类型 sortedset
不允许重复元素,且元素有顺序.每个元素都会关联一个double类型的分数。redis正是通过分数来为集合中的成员进行从小到大的排序。
- 存储:zadd key score value
- 获取:zrange key start end [withscores]
- 删除:zrem key value
7. 通用命令
- keys * : 查询所有的键
- type key : 获取键对应的value的类型
- del key:删除指定的key value
4. 持久化
redis是一个内存数据库,当redis服务器重启,或者电脑重启,数据会丢失。我们可以将redis内存中的数据持久化保存到硬盘的文件中。
redis持久化机制:
RDB:默认方式
不需要进行配置,默认就使用这种机制
在一定的间隔时间中,检测key的变化情况,然后持久化数据
-
编辑redis.windows.conf文件
save 900 1
save 300 10
save 60 10000
-
重新启动redis服务器,并指定配置文件名称
D:\xxx\redis-2.8.9>redis-server.exe redis.windows.conf
AOF
日志记录的方式,可以记录每一条命令的操作。可以每一次命令操作后,持久化数据
-
编辑redis.windwos.conf文件
appendonly no(关闭aof) --> appendonly yes (开启aof)
appendfsync everysec : 每隔一秒进行一次持久化
5. java客户端 Jedis
一款java操作redis数据库的工具
使用步骤:
-
下载jedis的jar包
-
使用
//1. 获取连接 Jedis jedis = new Jedis("localhost",6379); //2. 操作 jedis.set("username","zhangsan"); //3. 关闭连接 jedis.close();
6. Jedis操作redis
1.字符串
可以使用setex()方法存储可以指定过期时间的 key value
jedis.setex("activecode",20,"hehe");
2. 哈希类型 hash
和redis语法都一致,后面的就不写了。
7. jedis连接池
JedisPool
使用
// 创建一个配置对象
JedisPoolConfig config = new JedisPoolConfig();
config.setMaxTotal(50);
config.setMaxIdle(10);// 最大空闲连接
// 1. 创建jedis连接池对象
JedisPool jedisPool = new JedisPool(config,"localhost",6379);
// 2. 获取连接
Jedis jedis = jedisPool.getResource();
// 3. 使用
jedis.set("hehe","haha");
// 4. 关闭,归还到连接池
jedis.close();
8. 连接池的工具类
public class JedisPoolUtils {
private static JedisPool jedisPool = null;
static {
// 读取配置文件
InputStream is = JedisPoolUtils.class.getClassLoader().getResourceAsStream("jedis.properties");
Properties pro = new Properties();
try {
pro.load(is);
} catch (IOException e) {
e.printStackTrace();
}
// 获取数据,设置到JedisPoolConfig中
JedisPoolConfig config = new JedisPoolConfig();
config.setMaxTotal(Integer.parseInt(pro.getProperty("maxTotal")));
config.setMaxIdle(Integer.parseInt(pro.getProperty("maxIdle")));
// 初始化
jedisPool = new JedisPool(config, pro.getProperty("host"), Integer.parseInt(pro.getProperty("port")));
}
/**
* 获取连接方法
*/
public static Jedis getJedis(){
return jedisPool.getResource();
}
}
使用
// 通过连接池工具类获取
Jedis jedis = JedisPoolUtils.getJedis();
// 3. 使用
jedis.set("hello","world");
// 4. 关闭,归还到连接池
jedis.close();