本地存储和移动端js框架

文章目录

本地存储和移动端js框架
- 一、本地存储
- - 1.cookie
  - 2.localStorage
  - 3.sessionStorage
- 二、jquery UI
- 三、移动端js事件
- - 1.触摸事件包含4个接口。
  - 2.事件类型：
  - 3.事件属性：
  - 4.触摸事件跟鼠标事件的触发先后顺序：
- 四、Zepto
- 五swiper
- 六、bootstrap
- - 1.bootstrap 容器
  - 2.bootstrap响应式查询区间：
  - 3.bootstrap 栅格系统
  - 4.列偏移
  - 5.bootstrap 按钮
  - 6.bootstrap 表单
  - 7.bootstrap 图片
  - 8.bootstrap 字体图标
  - 9.bootstrap 导航条
  - 10.路径导航
  - 11.bootstrap 模态框
  - 12.bootstrap 下拉菜单
  - 13.bootstrap 隐藏类

一、本地存储

1.cookie

定义：
存储在本地，容量最大4k，在同源的http请求时携带传递，损耗带宽；
可设置访问路径，只有此路径及此路径的子路径才能访问此cookie，存在有效的时间。
注意点：
cookie的访问需要服务器环境，直接在本地文件访问无效；
cookie的访问和设置需要导入jquery.cookie.js文件；
浏览器对每一个访问的地址下可添加的cookie是有限制的；同时每个浏览器可添加的cookie个数也存在限制。
作用：
储存用户的痕迹信息，如用户名，ID号，密码等，是服务器脚本发送给浏览器的加密数据，便于下次访问时用户可以直接登录等；

运用代码

//访问cookie，mycolor代表键
var $cook = $.cookie("mycolor");//设置cookie
$.cookie("mycolor", "red"});
$.cookie("mycolor", "red", { expires: 7, path: '/' });//增加了有效时间和访问路径//删除cookie,传递null值
$.cookie("mycolor", null});

说明：

'mycolor'参数相当于cookie存储数据的键，即数据的名字，通过名字访问；
cookie的设置有三个参数，第一为设置数据的键，第二个为设置数据的值，第三个expires表示有效时间，单位为天，path为访问路径，"/"表示当前文件路径，在网站中表示根目录。
注意：如果不设置路径，默认情况下只有设置cookie的网页才可以访问此cookie；如果想网站的网页可以共享cookie，将路径设为根目录。
注意：cookie就相当于一个能存储数据的微型本地数据库，"mycolor"相当于每条数据的key。

2.localStorage

定义：一个本地的小型数据文件
存储在本地，容量为5M或者更大，不会在请求时候携带传递；
数据在所有同源窗口中共享，一直有效，除非人为删除，可作为长期数据。
注意点：
localStorage数据不需要依赖服务器环境访问，可以直接在本地文件访问；不需要额外的文件支持。
同源窗口指的是同一个域名下或者是index.html所在的文件夹下的文件路径。

代码运用

//设置：
localStorage.setItem("mycolor", "456");
localStorage.mycolor= '456';//获取：
var $color = localStorage.getItem("mycolor");
var $color = localStorage.mycolorvar $color = localStorage.key(0);//获取第一个键，按角标获取
var $color = localStorage.key("");//获取最后一个键var $length = localStorage.length;//获取数据的长度//删除
localStorage.removeItem("mycolor");//清空
localStorage.clear();//将所有保存的数据删除

说明：
设置数据格式类似键值对，"mycolor"代表key,"456"代表值。
数据是有排序的，后加入的角标靠前，最后加入的角标为0.
注意：localStorage相当于将数据保存在磁盘，是永久的，但是其针对的是固定的域名下的文件，打开其他的域名下的网页，localStorage不会显示。

3.sessionStorage

定义：一个本地的小型数据库
存储在本地，容量为5M或者更大;
不会在请求时候携带传递，在同源的当前窗口关闭前有效。
注意点：
sessionStorage同样不需要再服务器的环境下运行；
不需要额外的文件支持；
sessionStorage数据设置后即使页面进行重载也不会清除；但当该窗口关闭后，里面的数据就会清除，再打开没有数据。相当于将数据保存在内存中。

代码运用

//设置：
sessionStorage.setItem("mycolor", "456");
sessionStorage.mycolor= '456';//获取：
var $color = sessionStorage.getItem("mycolor");
var $color = sessionStorage.mycolorvar $color = sessionStorage.key(0);//获取第一个键，按角标获取
var $color = sessionStorage.key("");//获取最后一个键var $length = sessionStorage.length;//获取数据的长度//删除
sessionStorage.removeItem("mycolor");//清空
sessionStorage.clear();//将所有保存的数据删除

说明：
sessionStorage的使用方法和localStorage一样。
数据是有排序的，后加入的角标靠前，最后加入的角标为0.

二、jquery UI

jQuery UI是以 jQuery 为基础的代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。

jqueryUI 网址

设置数值的滑动条

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>drag</title><script type="text/javascript" src="js/jquery-1.12.4.min.js"></script><script type="text/javascript" src="js/jquery-ui.min.js"></script><script type="text/javascript">$(function(){$('.dragbar').draggable({axis:'x',containment:'parent',//containment:[0,0,600,0]//设置拖动时候的透明度opacity:0.6,drag:function(ev,ui){//console.log(ui.position.left);//获取拖动的距离                 var nowleft = ui.position.left;$('.progress').css({width:nowleft});$('.slide_count').val(parseInt(nowleft*100/570));}});})</script><style type="text/css">.slidebar_con{width:650px;height:32px;margin:50px auto 0;}.slidebar{width:600px;height:30px;border:1px solid #ccc;            float:left;position:relative;}.slidebar .dragbar{width:30px;height:30px;background-color:gold;cursor:pointer;position:absolute;left:0;top:0;}.slidebar .progress{width:0px;height:30px;background-color:#f0f0f0;position:absolute;left:0;top:0;}.slide_count{padding:0;float:right;width:40px;height:30px;border:1px solid #ccc;text-align:center;font-size:16px;}</style>
</head>
<body><div class="slidebar_con"><div class="slidebar"><div class="progress"></div><div class="dragbar"></div></div><input type="text" name="" value="0" class="slide_count"></div>
</body>
</html>

自定义滚动条

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>自定义滚动条</title><script type="text/javascript" src="js/jquery-1.12.4.min.js"></script><script type="text/javascript" src="js/jquery-ui.min.js"></script><script type="text/javascript">$(function(){var h = $('.paragraph').outerHeight();//整体文本的高度减去外面容器的高度var hide = h-500;$('.scroll_bar').draggable({axis:'y',containment:'parent',opacity:0.6,drag:function(ev,ui){var nowtop = ui.position.top;var nowscroll = parseInt(nowtop/290*hide);$('.paragraph').css({top:-nowscroll});}});})</script><style type="text/css">.scroll_con{width:400px;height:500px;border:1px solid #ccc;margin:50px auto 0;position:relative;overflow:hidden;}.paragraph{width:360px;position:absolute;left:0;top:0;padding:10px 20px;font-size:14px;font-family:'Microsoft Yahei';line-height:32px;text-indent:2em;}.scroll_bar_con{width:10px;height:490px;position:absolute;right:5px;top:5px;}.scroll_bar{width:10px;height:200px;background-color:#ccc;position:absolute;left:0;top:0;cursor:pointer;border-radius:5px;}
</style>
</head>
<body><div class="scroll_con"><div class="paragraph">2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。掌握HTML是网页的核心，是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。因此，它是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言，学好HTML是成为Web开发人员的基本条件。
学好CSS是网页外观的重要一点，CSS可以帮助把网页外观做得更加美观。
学习JavaScript的基本语法，以及如何使用JavaScript编程将会提高开发人员的个人技能。
了解Unix和Linux的基本知识虽然这两点很基础，但是开发人员了解Unix和Linux的基本知识是有益无害的。
了解Web服务器当你对Apache的基本配置，htaccess配置技巧有一些掌握的话，将来必定受益，而且这方面的知识学起来也相对容易。</div><div class="scroll_bar_con"><div class="scroll_bar"></div></div></div>
</body>
</html>

三、移动端js事件

1.触摸事件包含4个接口。

TouchEvent

代表当触摸行为在平面上变化的时候发生的事件.

Touch

代表用户手指与触摸平面间的一个接触点.

TouchList

代表一系列的Touch; 一般在用户多个手指同时接触触控平面时使用这个接口.

DocumentTouch

包含了一些创建 Touch对象与TouchList对象的便捷方法.

TouchEvent接口可以响应基本触摸事件（如单个手指点击），它包含了一些具体的事件，

2.事件类型：

touchstart : 触摸开始（手指放在触摸屏上）touchmove : 拖动（手指在触摸屏上移动）touchend : 触摸结束（手指从触摸屏上移开）touchenter ：移动的手指进入一个dom元素。touchleave ：移动的手指离开一个dom元素。还有一个touchcancel，是在拖动中断时候触发。

3.事件属性：

altKey : 该属性返回一个布尔值，表示在指定的事件发生时，Alt 键是否处于按下状态， event.altKey=true|false|1|0type : 触摸时触发的事件类型，比如touchstart

每个触摸事件都包括了三个触摸属性列表：

touches：当前位于屏幕上的所有手指触摸点的一个列表。
targetTouches：当前元素对象上所有触摸点的列表。
changedTouches：涉及当前事件的触摸点的列表。

它们都是一个数组，每个元素代表一个触摸点。

每个触摸点对应的Touch都有三对重要的属性，clientX/clientY、pageX/pageY、screenX/screenY。

其中screenX/screenY代表事件发生的位置对于屏幕的偏移量
clientX/clienYt和pageX/pageY都代表事件发生位置对应对象的偏移量
区别是clientX/clientY不包括对象滚动而隐藏的偏移量，而pageX/pageY包括对象滚动而隐藏的偏移量。
移开屏幕的那个触摸点，只会包含在changedTouches列表中，而不会包含在touches 和targetTouches 列表中，所以changedTouches在项目当中会比较常用。

示例：

<body onload="start();">
<style type="text/css">
#dom {width:500px;height:500px;background:black;
}
</style>
<div id="dom"></div>
<script type="text/javascript">
function onTouchStart(e){console.log(e);
}
function start(){var dom = document.getElementById('dom');dom.addEventListener('touchstart', onTouchStart, false);
}
</script>
</body>

4.触摸事件跟鼠标事件的触发先后顺序：

Touchstart > toucheend > mousemove > mousedown > mouseup > click

很多情况下触摸事件跟鼠标事件会同时触发（目的是为了让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作），如果使用了触摸事件，可以调用event.preventDefault()来阻止鼠标事件被触发。
而手指在屏幕上移动touchmove则不会触发鼠标事件和单击事件,在touchmove事件中加入preventDefault, 可以禁止浏览器滚动屏幕，也不会影响单击事件的触发。
以上事件，都系统内置的，可以直接使用，通过这些内置事件，可以组合成很多非原生的多点触摸手势touch手势。

四、Zepto

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库，它与jquery有着类似的api。如果你会用jquery，那么你也会用zepto。Zepto的一些可选功能是专门针对移动端浏览器的；它的最初目标是在移动端提供一个精简的类似jquery的js库。

zepto官网：zepto官网
zepto中文api：zepto中文api
zepto包含很多模块，默认下载版本包含的模块有Core, Ajax, Event, Form, IE模块，如果还需要其他的模块，可以自定义构建。
zepto自定义构建地址：zepto自定义构建地址
Zepto.js API 中文版 (1.2.0)Zepto.js API 中文版 (1.2.0)

五swiper

swiper.js是一款成熟稳定的应用于PC端和移动端的滑动效果插件，一般用来触屏焦点图、触屏整屏滚动等效果。 swiper分为2.x版本和3.x版本，2.x版本支持低版本浏览器(IE7)，3.x放弃支持低版本浏览器，适合应用在移动端。

2.x版本中文网址：2.x版本中文网址
3.x版本中文网地址：3.x版本中文网地址

swiper使用方法：

<!--如果页面引用了jquery或者zepto，就引用 swiper.jquery.min.js,它的容量比swiper.min.js<script src="path/to/swiper.jquery.min.js"></script>
-->......<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
......<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide">slider1</div><div class="swiper-slide">slider2</div><div class="swiper-slide">slider3</div></div><div class="swiper-pagination"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div>
</div><script>
var swiper = new Swiper('.swiper-container', {pagination: '.swiper-pagination',prevButton: '.swiper-button-prev',nextButton: '.swiper-button-next',initialSlide :1,paginationClickable: true,loop: true,autoplay:3000,autoplayDisableOnInteraction:false
});
</script>

swiper使用参数：

1、initialSlide：初始索引值，从0开始
2、direction：滑动方向 horizontal | vertical
3、speed：滑动速度，单位ms
4、autoplay：设置自动播放及播放时间
5、autoplayDisableOnInteraction：用户操作swipe后是否还自动播放，默认是true，不再自动播放
6、pagination：分页圆点
7、paginationClickable：分页圆点是否点击
8、prevButton：上一页箭头
9、nextButton：下一页箭头
10、loop：是否首尾衔接

六、bootstrap

简单、直观、强悍的前端开发框架，让web开发更迅速、简单。来自Twitter，是目前很受欢迎的前端框架之一。 Bootrstrap是基于HTML、CSS、JavaScript的，让书写代码更容易。移动优先，响应式布局开发。

bootstrap中文网址：bootstrap中文网址

1.bootstrap 容器

container-fluid 流体
container
1170
970
750
100%

<div class="container-fluid">流体容器</div>
<div class="container">响应式固定容器</div>

2.bootstrap响应式查询区间：

1、大于等于768
2、大于等于992
3、大于等于1200

3.bootstrap 栅格系统

bootstrap将页面横向分为12等分，按照12等分定义了适应不同宽度等分的样式类，这些样式类组成了一套响应式、移动设备优先的流式栅格系统：

1、col-lg- 大于1200排成一行，小于1200分别占一行
2、col-md- 大于992排成一行，小于992分别占一行
3、col-sm- 大于768排成一行，小于768分别占一行
4、col-xs- 始终排列成一行

<style type="text/css">div[class*='col-']{background-color:cyan;border:1px solid #ddd;height:50px;}
</style>......<div class="container"><div class="row"><div class="col-lg-3">col-lg-3</div><div class="col-lg-3">col-lg-3</div><div class="col-lg-5">col-lg-5</div><div class="col-lg-1">col-lg-1</div></div><br><br><div class="row"><div class="col-md-3">col-md-3</div><div class="col-md-3">col-md-3</div><div class="col-md-3">col-md-3</div><div class="col-md-3">col-md-3</div></div><br><br><div class="row"><div class="col-sm-3">col-sm-3</div><div class="col-sm-3">col-sm-3</div><div class="col-sm-3">col-sm-3</div><div class="col-sm-3">col-sm-3</div></div><br><br><div class="row"><div class="col-xs-3">col-xs-3</div><div class="col-xs-3">col-xs-3</div><div class="col-xs-3">col-xs-3</div><div class="col-xs-3">col-xs-3</div></div>
</div>

4.列偏移

1、col-lg-offset-
2、col-md-offset-
3、col-sm-offset-
4、col-xs-offset-

5.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 定义按钮组

<!-- 一般按钮组 -->
<div class="btn-group"><input type="button" name="" value="按钮一" class="btn btn-primary"><input type="button" name="" value="按钮二" class="btn btn-warning"><input type="button" name="" value="按钮三" class="btn btn-danger">
</div><!-- 通栏按钮组 如果用input标签做按钮，需要将它用 btn-group的容器包起来
-->
<div class="btn-group btn-group-justified"><div class="btn-group"><input type="button" name="" value="按钮一" class="btn btn-primary"></div><div class="btn-group"><input type="button" name="" value="按钮二" class="btn btn-warning"></div><div class="btn-group"><input type="button" name="" value="按钮三" class="btn btn-danger"></div>
</div><!-- 通栏按钮组，如果用a标签做按钮，就不用上面的结构，直接写
-->
<div class="btn-group btn-group-justified"><a href="#" class="btn btn-primary">按钮一</a><a href="#" class="btn btn-default">按钮二</a><a href="#" class="btn btn-default">按钮三</a>
</div>

6.bootstrap 表单

1、form 声明一个表单域
2、form-inline 内联表单域
3、form-horizontal 水平排列表单域
4、form-group 表单组、包括表单文字和表单控件
5、form-control 文本输入框、下拉列表控件样式
6、checkbox checkbox-inline 多选框样式
7、radio radio-inline 单选框样式
8、input-group 表单控件组
9、input-group-addon 表单控件组物件样式
10、input-group-btn 表单控件组物件为按钮的样式
11、form-group-lg 大尺寸表单
12、form-group-sm 小尺寸表单

<!--  表单  -->
<form role="form"><div class="form-group form-group-lg"><label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"></div><div class="form-group"><label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"></div><div class="form-group"><label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile"><p class="help-block">Example block-level help text here.</p></div><div class="checkbox"><label><input type="checkbox"> Check me out</label></div><button type="submit" class="btn btn-default">Submit</button>
</form><!--  表单控件组  -->
<div class="input-group"><input type="text" class="form-control"><span class="input-group-addon">@</span>
</div><!--  表单控件组  -->
<div class="input-group"><input type="text" class="form-control"><span class="input-group-btn"><button class="btn btn-default" type="button">Go!</button></span>
</div>

7.bootstrap 图片

img-responsive 声明响应式图片

8.bootstrap 字体图标

通过字体代替图标，font文件夹需要和css文件夹在同一目录

9.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等固定内容的样式
11、nav navbar-nav 定义导航条中的菜单
12、navbar-form 定义导航条中的表单
13、navbar-btn 定义导航条中的按钮
14、navbar-text 定义导航条中的文本
15、navbar-left 菜单靠左
16、navbar-right 菜单靠右

<!-- 可伸缩菜单 data-target="#.." 需要加#  -->
<div class="navbar navbar-inverse navbar-static-top "><div class="container"><div class="navbar-header"><button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="#" class="navbar-brand">LOGO</a></div><div class="collapse navbar-collapse" id="mymenu"><ul class="nav navbar-nav"><li class="active"><a href="#">首页</a></li><li><a href="#">公司新闻</a></li><li><a href="#">行业动态</a></li></ul><form class="navbar-form navbar-right"><div class="form-group"><div class="input-group"><input type="text" class="form-control"><span class="input-group-btn"><button class="btn btn-default" type="button">Go!</button></span></div>    </div></form></div></div>
</div>

10.路径导航

<ol class="breadcrumb"><li><a href="#">Home</a></li><li><a href="#">Library</a></li><li class="active">Data</li>
</ol>
巨幕
<div class="jumbotron"><div class="container">...</div>
</div>

11.bootstrap 模态框

1、modal 声明一个模态框
2、modal-dialog 定义模态框尺寸
3、modal-lg 定义大尺寸模态框
4、modal-sm 定义小尺寸模态框
5、modal-header
6、modal-body
7、modal-footer

<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal">大弹出框按钮</button><div class="modal fade" id="mymodal"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header">大尺寸弹出框</div><div class="modal-body">模态框主体</div><div class="modal-footer"><button type="button" class="btn btn-default"  data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div>
</div>

12.bootstrap 下拉菜单

1、dropdown-toggle
2、dropdown-menu

<div class="row">            <div class="dropdown"><div class="btn btn-primary  dropdown-toggle" data-toggle="dropdown">下拉菜单<span class="caret"></span></div><ul class="dropdown-menu"><li><a href="#">菜单一</a></li><li><a href="#">菜单二</a></li><li><a href="#">菜单三</a></li></ul></div>
</div>

13.bootstrap 隐藏类

1、hidden-xs
2、hidden-sm
3、hidden-md
4、hidden-lg