27.jQuery UI和本地存储及移动端js事件

一。本地存储

本地存储分为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网址

http://jqueryui.com/

 

三。移动端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