一。本地存储
本地存储分为cookie,以及新增的localStorage和sessionStorage
cookie需要用到一个js文件,jquery.cookie.js文件,自行百度下载配置
1.cookie存储在本地,容量最大4K,在同源的http请求是携带传递,损耗带宽,可设置访问路径,只有此路径及此路径的子路径才能访问此cookie,在设置的过期时间之前有效。
jquery 设置cookie
$.cookie("mycookie"(代表name值),"123"(代表value值),{expires:7(代表失效时间),path:"/"(代表根目录)});
jquery 获取 cookie
$.cookie("mycookie");
查看cookie位置
2.localStorage 存储在本地,容量为5M或者更大,不会再请求时候携带传递,在所有同源窗口中共享,数据一直有效,除非人为删除,可作为长期数据。
//设置
localStorage.setItem("dat","456");
localStorage.dat = "456"
//获取
localStorage.getItem("dat");
localStorage.dat
//删除
localStorage.removeItem("dat");
3.sessionStorage 存储在本地,容量为5M或者更大,不会再请求时候携带传递,在同源的当前窗口关闭前有效。
localStorage和sessionStorage 合称为Web Storage,Web Storage支持事件通知机制,可以将数据更新的通知监听者,Web Storage的api接口使用更方便。
iPhone的无痕浏览不支持Web Storage,只能用cookie。
二。jquery UI
设置一些拖拽的动画会用到UI
jquery UI 是以jquery为基础的代码库,包含底层用户交互,动画,特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用。
jquery UI网址
三。移动端js事件
学习移动端场景下的js事件;制作移动端特效常用的js库,介绍移动端常用开发框架Bootstrap
移动端的操作方式和PC端是不同的,移动端主要用手指操作,所以有特殊的touch事件,touch事件包括如下几个事件:
1.touchstart // 手指放到屏幕上是触发
2.touchmove //手指在屏幕上滑动时触发
3.touchend // 手指离开屏幕是触发
4.touchcancel //系统取消touch事件的时候触发,比较少用
移动端一般有三种操作,点击,滑动,拖动。这三种操作一般是组合使用上面的几个事件来完成的,所有上面的4个事件一般很少单独使用,一般是封装使用来实现这三种操作,可以使用封装成熟的js 库。
下面的库不常用,以前用。了解即可。精简版的jquery
zeptojs
zeptojs是一个轻量级的针对现代高级浏览器的js库,他与jquery有这类似的api。如果你会用jquery,那么你也会用zepto,zepto的一些可选功能是专门针对移动端浏览器的,他的最初目标是在移动端提供一个精简的类似jquery的js库。
以下常用的库
swiper
swiper js是一款成熟稳定的应用于PC端和移动端的滑动效果插件,一般用来触屏焦点图,触屏整屏滚动等效果,swiper分为2.x和3.x版本,2.x支持低版本浏览器,3.x放弃支持低版本浏览器,适合应用在移动端。
swiper的使用方法,需要引用3个文件,css文件以及两个不同的js文件:
bootstrap
简单,直观、强悍的前端开发框架,让web开发更迅速,简单。来自Twitter,是目前很受欢迎的前端框架之一。bootrstrap是基于HTML、CSS、Javascript的,让书写代码更容易,移动优先,响应式布局开发。
bootrstrap中文网址:https://www.bootcss.com/
bootrstrap容器
container-fluid 流体
container
1170
970
750
100%
<div class = "container-fluid">流体容器</div>
<div class = "container">响应式固定容器</div>
bootrstrap响应式查询区间:
1.大于等于768
2.大于等于992
3.大于等于1200
bootrstrap栅格系统:
bootrstrap将页面分为12等分,按照12等份定义了适应不同宽度等份的样式类,这些样式类组成了一套响应式,移动设备优先的流式栅格系统:
1.col-lg- 大于1200排成一行,小于1200分别占一行
2.col-md- 大于992排成一行,小于1200分别占一行
3.col-sm- 大于768排成一行,小于992分别占一行
4.col-xs- 始终排列成一行
列偏移
1.col-lg-offdet-
2.col-md-offset-
3.col-sm-offset-
4.col-xs-offset-
bootstrap隐藏类
1.hidden-xs
2.hidden-sm
3.hidden-md
4.hidden-lg
bootstrap按钮
1.btn 声明按钮
2.btn-default 默认按钮样式
3.btn-primay
4.btn-success
5.btn-info
6.btn-warning
7.btn-danger
8.btn-link
9.btn-lg
10.btn-md
11.btn--xs
12.btn-block 宽度是父级宽100%的按钮
13.active
14.disabled
15.btn-group 定义按钮组
bootstrap表单
1.from 声明一个表单域
2.from-inline 内联表单域
3.from-horizontal 水平排列表单域
4.from-group 表单组,包括表单文字和表单控件
5.from-control 文本输入框,下拉列表控件样式
6.checkbox-inline 多选框样式
7.radio -inline 单选框样式
8.input-group 表单控件组
9.input-group-addon 表单控件组物件样式
10.input-group-btn 表单控件组物件为按钮的样式
11.from-group-lg 大尺寸表单
12.from-group-sm 小尺寸表单
bootstrap图片
img-responsive 声明响应式图片
bootstrap字体图标
通过字体代替图标,font文件夹需要和css文件夹同一目录
bootstrap导航条
1.navbar 声明导航条
2.navbar-default 声明默认的导航条样式
3.navbar-inverse 声明反白的导航条样式
4.navbar-static-top 去掉导航条的圆角
5.navbar-fixed-top 固定到顶部的导航条
6.navbar-fixed-bottom 固定到底部的导航条
7.navbar-header 申明logo的容器
8.navbar-brand 针对logo等固定内容的样式
9.navbar-nav 定义导航条中的菜单
10.navbar-form 定义导航条中的表单
11.navbar-btn 定义导航条中的按钮
12.navbar-text 定义导航条中的文本
13.navbar-left 菜单靠左
14navbar-right 菜单靠右
模态框
1.modal 声明一个模态框
2.modal -dialog 定义模态框尺寸
3.modal -lg 定义大尺寸模态框
4.modal -sm 定义小尺寸模态框
5.modal -header
6.modal -footer