Web前端学习笔记——HTML5与CSS3之H5-DOM扩展、H5新增API

H5-dom扩展

获取元素

document.getElementsByClassName ('class'); 
//通过类名获取元素，以伪数组形式存在。

document.querySelector('selector');
//通过CSS选择器获取元素，符合匹配条件的第1个元素。

document.querySelectorAll('selector'); 
//通过CSS选择器获取元素，以伪数组形式存在。

类名操作

Node.classList.add('class'); 
//添加class

Node.classList.remove('class'); 
//移除class

Node.classList.toggle('class'); 
//切换class，有则移除，无则添加

Node.classList.contains('class'); 
//检测是否存在class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            list-style: none;
        }

        li {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #fff;
            background: green;
            float: left;
            cursor: pointer;
        }

        li.active {
            background: red;
        }
    </style>
</head>
<body>
<ul>
    <li>菜单1</li>
    <li class="active">菜单2</li>
    <li>菜单3</li>
    <li>菜单4</li>
</ul>
<!--<button>切换类</button>-->
<!--
1. jquery操作类的方法：addClass() removeClass() toggleClass() hasClass()
2. h5也有类似的api 基于一个对象classList的方法 add() remove() toggle() contains()
-->
<!--<script>
    var dom = document.querySelector('li:nth-child(2)');
    /*1.获取类*/
    console.log(dom.classList);
    /* DOM.classList  获取的是这个DOM元素上的所有class */
    /*2.操作类*/
    dom.classList.add('blue');
    dom.classList.remove('red');

    document.querySelector('button').onclick = function () {
        dom.classList.toggle('toggle');
        console.log(dom.classList.contains('red'));
    }
</script>-->
<script>
    window.onload = function () {
        /*切换当前样式的效果*/
        document.querySelector('ul').onclick = function (e) {
            /*当前的LI*/
            var currentLi = e.target;
            /*如果已经选中 程序停止*/
            if(currentLi.classList.contains('active')) return false;
            /*如果没有选中*/
            /*之前的去除*/
            document.querySelector('li.active').classList.remove('active');
            /*在给当前的加上*/
            currentLi.classList.add('active');
        }
    }
</script>
</body>
</html>

自定义属性

在HTML5中我们可以自定义属性，其格式如下data-*=""


<div id="demo" data-my-name="itcast" data-age="10">
<script>
/*
  Node.dataset是以对象形式存在的，当我们为同一个DOM节点指定了多个自定义属性时，
  Node.dataset则存储了所有的自定义属性的值。
  */
var demo = document.querySelector(反馈);
//获取
//注：当我们如下格式设置时，则需要以驼峰格式才能正确获取
var name = demo.dataset['myName'];
var age = demo.dataset['age'];
//设置
demo.dataset['name'] = 'web developer';
<script/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
1.自定义属性  data-* 自定义属性
2.获取元素的自定义属性  jquery获取方式  $('div').data('自定义属性的名称)
3.自定义属性的名称是什么？ data-user==>user data-user-name==>userName
4.命名规则 遵循驼峰命名法
5.获取元素的自定义属性 h5的方式  dataset  自定义属性的集合
-->
<div data-user="wl" data-user-age="18"></div>
<script src="../3d切割轮播图/jquery.min.js"></script>
<script>
    var div = document.querySelector('div');
    /*获取所有  $('div').data() */
    var set = div.dataset;
    /*获取单个自定义属性  $('div').data('user')*/
    /*var user = set.user;
    var user = set['user'];*/

    /*设置单个属性  $('div').data('user','gg')*/
    set.user = 'gg';

    /*jquery的data() 操作内存*/
    /*H5的dataset     操作dom*/

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul:first-child {
            list-style: none;
        }

        ul:first-child li {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #fff;
            background: green;
            float: left;
            cursor: pointer;
        }

        ul:first-child li.active {
            background: red;
        }

        .box li{
            width: 400px;
            height: 400px;
            background: pink;
            display: none;
        }
        .box li.show{
            display: block;
        }
    </style>
</head>
<body>
<ul class="nav">
    <!--在渲染的时候  大小的属性会转换成小写 -->
    <li data-content-id="content01">菜单1</li>
    <li data-content-id="content02" class="active">菜单2</li>
    <li data-content-id="content03">菜单3</li>
    <li data-content-id="content04">菜单4</li>
</ul>
<ul class="box">
    <li id="content01">内容1</li>
    <li id="content03">内容3</li>
    <li id="content04">内容4</li>
    <li id="content02" class="show">内容2</li>
</ul>
<!-- css序号选择器伪类选择器  E:first-child-->
<!-- 查找顺序：
通过E确定父元素
通过父元素找到所有的子元素
再去找第一个子元素
找到第一个子元素之后再去匹配类型是不是E  不是：无效选择器
ul:last-child
-->
<script>
    /*tab切换*/
    window.onload = function () {
        document.querySelector('.nav').onclick = function (e) {
            var currentLi = e.target;
            /*已经选中 停止操作*/
            if(currentLi.classList.contains('active')) return false;

            var oldLi = document.querySelector('.nav li.active');
            /*1.更改样式*/
            oldLi.classList.remove('active');
            currentLi.classList.add('active');
            /*2.根据选中的页签去显示对应的内容*/
            /*隐藏之前的*/
            var oldContent = document.querySelector('#'+oldLi.dataset.contentId);
            oldContent.classList.remove('show');
            /*显示当前的*/
            var currentContent = document.querySelector('#'+currentLi.dataset.contentId);
            currentContent.classList.add('show');
        }
    }
</script>
</body>
</html>

3D切割轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 560px;
            height: 300px;
            margin: 100px auto 0;
            border: 1px solid #ccc;
            position: relative;
        }

        .box .imageBox {
            list-style: none;
            width: 100%;
            height: 100%;
            /*overflow: hidden;*/
            /*视距：呈现近大远小效果 */
            /*perspective: 500px;*/
            /*3d呈现*/
            transform-style: preserve-3d;
        }

        .box .imageBox li {
           /* width: 100%;
            height: 100%;
            float: left;*/
            width: 112px;
            height: 100%;
            float: left;
            position: relative;
            /*视距：呈现近大远小效果 */
            /*perspective: 500px;*/
            /*3d呈现*/
            transform-style: preserve-3d;
            /*加过渡*/
            transition:all 1s;
        }
        .box .imageBox li span{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: url("images/1.jpg") no-repeat;
        }

        /*拼接立体容器*/
        /*1.立体容器旋转中心要在电脑平面上*/
        /*2.立体容器每一个面的图片正面朝外*/
        .box .imageBox li span:nth-child(1){
            background-image: url("images/1.jpg");
            transform: translateZ(150px);
        }
        .box .imageBox li span:nth-child(2){
            background-image: url("images/2.jpg");
            /*旋转过后轴也会旋转：：：：：：*/
            transform: rotateX(90deg) translateZ(150px);
        }
        .box .imageBox li span:nth-child(3){
            background-image: url("images/3.jpg");
            transform: rotateX(180deg) translateZ(150px);
        }
        .box .imageBox li span:nth-child(4){
            background-image: url("images/4.jpg");
            transform: rotateX(270deg) translateZ(150px);
        }

        /*拼接背景*/
        .box .imageBox li:nth-child(1) span{
            background-position: 0 0;
        }
        .box .imageBox li:nth-child(2) span{
            background-position: -112px 0;
        }
        .box .imageBox li:nth-child(3) span{
            background-position: -224px 0;
        }
        .box .imageBox li:nth-child(4) span{
            background-position: -336px 0;
        }
        .box .imageBox li:nth-child(5) span{
            background-position: -448px 0;
        }
        /*.box .imageBox li img{
            display: block;
            width: 100%;
            height: 100%;
        }*/
        .box .left,
        .box .right{
            position: absolute;
            width: 50px;
            height: 70px;
            background: rgba(0,0,0,.2);
            top:115px;
            text-align: center;
            line-height: 70px;
            font-size: 20px;
            color: #fff;
            text-decoration: none;
            font-weight: bold;
        }
        .box .right{
            right: 0;
        }
    </style>
</head>
<body>
<!--1.完成这个例子要用到什么知识-->
<!--2.回顾一下3d转换-->
<!--3.轴的正方向，translate rotate 3d转换属性-->
<!--4.rotateX rotateY rotateZ 旋转方向  方法方式套路-->
<!--4.1 顺着轴的正方向看  顺时针旋转是负角度  逆时针旋转是正角度-->
<!--5.过渡完成动画-->
<!--6.通过jquery辅助操作-->
<div class="box">
    <ul class="imageBox">
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
    </ul>
    <!-- 转义符 \  实体 &lt; -->
    <a class="left" href="javascript:;">&lt;</a>
    <a class="right" href="javascript:;">&gt;</a>
</div>
<script src="jquery.min.js"></script>
<script>
    $(function () {
        /*1.点击切换图片*/
        /*定义一个索引*/
        /*看第2张图 -90deg  看第4张图 90deg */
        var index = 0;
        /*开关*/
        var flag = true;
        /*2.点击左边的按钮 上一张*/
        $('.left').on('click',function () {

            if(!flag) return false;
            flag = false;

            index --;
            console.log(index);
            var angle = - index * 90;
            $('li').css('transform','rotateX('+angle+'deg)').each(function (i,item) {
                /*设置不同的延时*/
                $(this).css('transition-delay',i*0.25+'s');
            });
        });
        /*3.点击右边的按钮 下一张*/
        $('.right').on('click',function () {

            if(!flag) return false;
            flag = false;

            index ++;
            console.log(index);
            var angle = - index * 90;
            $('li').css('transform','rotateX('+angle+'deg)').each(function (i,item) {
                /*设置不同的延时*/
                $(this).css('transition-delay',i*0.25+'s');
            });
        });
        /*4.优化 重复点击的时候动画会层叠的执行  节流阀 */
        $('li:last').on('transitionend',function () {
            /*最后一部分张图片旋转完毕*/
            flag = true;
        });

    });
</script>
</body>
</html>

H5-新增API

全屏方法

HTML5规范允许用户自定义网页上任一元素全屏显示。

Node.requestFullScreen() 开启全屏显示
Node.cancelFullScreen() 关闭全屏显示
由于其兼容性原因，不同浏览器需要添加前缀如：
webkit内核浏览器：webkitRequestFullScreen、webkitCancelFullScreen，如chrome浏览器。
Gecko内核浏览器：mozRequestFullScreen、mozCancelFullScreen，如火狐浏览器。
document.fullScreen检测当前是否处于全屏
不同浏览器需要添加前缀
document.webkitIsFullScreen、document.mozFullScreen

多媒体

自定义播放器

方法

方法	描述
addTextTrack()	向音频/视频添加新的文本轨道
canPlayType()	检测浏览器是否能播放指定的音频/视频类型
load()	重新加载音频/视频元素
play()	开始播放音频/视频
pause()	暂停当前播放的音频/视频

属性

属性	描述
audioTracks	返回表示可用音轨的 AudioTrackList 对象
autoplay	设置或返回是否在加载完成后随即播放音频/视频
buffered	返回表示音频/视频已缓冲部分的 TimeRanges 对象
controller	返回表示音频/视频当前媒体控制器的 MediaController 对象
controls	设置或返回音频/视频是否显示控件（比如播放/暂停等）
crossOrigin	设置或返回音频/视频的 CORS 设置
currentSrc	返回当前音频/视频的 URL
currentTime	设置或返回音频/视频中的当前播放位置（以秒计）
defaultMuted	设置或返回音频/视频默认是否静音
defaultPlaybackRate	设置或返回音频/视频的默认播放速度
duration	返回当前音频/视频的长度（以秒计）
ended	返回音频/视频的播放是否已结束
error	返回表示音频/视频错误状态的 MediaError 对象
loop	设置或返回音频/视频是否应在结束时重新播放
mediaGroup	设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）
muted	设置或返回音频/视频是否静音
networkState	返回音频/视频的当前网络状态
paused	设置或返回音频/视频是否暂停
playbackRate	设置或返回音频/视频播放的速度
played	返回表示音频/视频已播放部分的 TimeRanges 对象
preload	设置或返回音频/视频是否应该在页面加载后进行加载
readyState	返回音频/视频当前的就绪状态
seekable	返回表示音频/视频可寻址部分的 TimeRanges 对象
seeking	返回用户是否正在音频/视频中进行查找
src	设置或返回音频/视频元素的当前来源
startDate	返回表示当前时间偏移的 Date 对象
textTracks	返回表示可用文本轨道的 TextTrackList 对象
videoTracks	返回表示可用视频轨道的 VideoTrackList 对象
volume	设置或返回音频/视频的音量

事件

事件	描述
abort	当音频/视频的加载已放弃时
canplay	当浏览器可以播放音频/视频时
canplaythrough	当浏览器可在不因缓冲而停顿的情况下进行播放时
durationchange	当音频/视频的时长已更改时
emptied	当目前的播放列表为空时
ended	当目前的播放列表已结束时
error	当在音频/视频加载期间发生错误时
loadeddata	当浏览器已加载音频/视频的当前帧时
loadedmetadata	当浏览器已加载音频/视频的元数据时
loadstart	当浏览器开始查找音频/视频时
pause	当音频/视频已暂停时
play	当音频/视频已开始或不再暂停时
playing	当音频/视频在已因缓冲而暂停或停止后已就绪时
progress	当浏览器正在下载音频/视频时
ratechange	当音频/视频的播放速度已更改时
seeked	当用户已移动/跳跃到音频/视频中的新位置时
seeking	当用户开始移动/跳跃到音频/视频中的新位置时
stalled	当浏览器尝试获取媒体数据，但数据不可用时
suspend	当浏览器刻意不获取媒体数据时
timeupdate	当目前的播放位置已更改时
volumechange	当音量已更改时
waiting	当视频由于需要缓冲下一帧而停止

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>视频播放</title>
    <!--字体图标库-->
    <link rel="stylesheet" href="css/font-awesome.css"/>
    <link rel="stylesheet" href="css/player.css"/>
</head>
<body>
<figure>
    <figcaption>视频播放器</figcaption>
    <div class="player">
        <video src="./video/fun.mp4"></video>
        <div class="controls">
            <!--播放/暂停-->
            <a href="javascript:;" class="switch fa fa-play"></a>
            <!--播放进度-->
            <div class="progress">
                <div class="line"></div>
                <div class="bar"></div>
            </div>
            <!--当前播放时间/播放总时长-->
            <div class="timer">
                <span class="current">00:00:00</span> / <span class="total">00:00:00</span>
            </div>
            <!--全屏/取消全屏-->
            <a href="javascript:;" class="expand fa fa-arrows-alt"></a>
        </div>
    </div>
</figure>
<script src="./js/jquery.min.js"></script>
<script>
    $(function () {
        /*获取需要操作的元素*/
        var $video = $('video');
        /*因为api是属于原生的dom元素的*/
        var video = $video.get(0);

        /*播放和暂停*/
        var $switch = $('.switch');
        /*总时长*/
        var $total = $('.total');
        /*进度条*/
        var $line = $('.line');
        /*当前播放时间*/
        var $current = $('.current');
        /*全屏按钮*/
        var $expand = $('.expand');
        /*灰色进度条*/
        var $bar = $('.bar');

        var formatTime = function (time) {
            /*00:00:00*/
            var h = Math.floor(time/3600);
            var m = Math.floor(time%3600/60);
            var s = Math.floor(time%60);
            return (h<10?'0'+h:h)+':'+(m<10?'0'+m:m)+':'+(s<10?'0'+s:s)
        }

        /*1. 需要在加载是时候  显示加载状态*/
        /*当前视频加载到可以播放了就可以隐藏这个状态*/
        video.oncanplay = function () {
            $video.show();
            /*显示总时间*/
            var timeStr = formatTime(video.duration);
            /*6. 总时间显示*/
            $total.html(timeStr);
        }

        /*2. 播放*//*3. 暂停*/
        $switch.on('click',function () {
            if($switch.hasClass('fa-play')){
                video.play();
                $switch.removeClass('fa-play').addClass('fa-pause');
            }else{
                video.pause();
                $switch.removeClass('fa-pause').addClass('fa-play');
            }
        });

        /*4. 进度条显示*/
        video.ontimeupdate = function () {
            //console.log('当前播放时间：'+video.currentTime);
            /*计算  进度条的宽度根据  当前播放时间/总时间  */
            var p = video.currentTime/video.duration*100+'%';
            $line.css('width',p);
            /*5. 播放时间显示*/
            $current.html(formatTime(video.currentTime));
        }
        /*7. 全屏操作*/
        $expand.on('click',function () {
            if($(this).hasClass('fa-arrows-alt')){
                video.webkitRequestFullScreen();
                $(this).removeClass('fa-arrows-alt').addClass('fa-compress');
            }else{
                document.webkitCancelFullScreen();
                $(this).addClass('fa-arrows-alt').removeClass('fa-compress');
            }

        })
        /*8. 视频播放完成重置播放*/
        video.onended = function () {
            video.currentTime = 0;
            $switch.removeClass('fa-pause').addClass('fa-play');
        }
        /*9. 跃进功能*/
        $bar.on('click',function (e) {
            /*获取点击的位置距离进度条左侧的距离*/
            var p = e.offsetX/$bar.width();
            var goTime = p * video.duration;
            video.currentTime = goTime;
        })
    });
</script>
</body>
</html>

player.css

body {
    padding: 0;
    margin: 0;
    font-family: 'microsoft yahei', 'Helvetica', simhei, simsun, sans-serif;
    background-color: #F7F7F7;
}
a {
    text-decoration: none;
}
figcaption {
    font-size: 24px;
    text-align: center;
    margin: 20px;
}
.player {
    width: 720px;
    height: 360px;
    margin: 0 auto;
    border-radius: 4px;
    background: #000 url(../images/loading.gif) center/300px no-repeat;
    position: relative;
    text-align: center;
}
video {
    display: none;
    height: 100%;
    margin: 0 auto;
}
/*全屏操作后  自带的控制栏会显示  在显示的时候隐藏*/
video::-webkit-media-controls {
    display: none !important;
}
.controls {
    width: 700px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    position: absolute;
    left: 50%;
    margin-left: -350px;
    bottom: 5px;
    /*比全屏的状态下的视频元素高*/
    z-index: 100000000000;
    opacity: 1;
}
.player:hover .controls {
    opacity: 1;
}
/*播放/暂停*/
.controls .switch {
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: #FFF;
    position: absolute;
    top: 11px;
    left: 11px;
}
/*全屏按钮*/
.controls .expand {
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: #FFF;
    position: absolute;
    right: 11px;
    top: 11px;
}
/*进度条*/
.progress {
    width: 430px;
    height: 10px;
    border-radius: 3px;
    overflow: hidden;
    background-color: #555;
    cursor: pointer;
    position: absolute;
    top: 16px;
    left: 45px;
}
/*下载进度*/
.progress .loaded {
    width: 0;
    height: 100%;
    background-color: #999;
}
/*播放进度*/
.progress .line {
    width: 0;
    height: 100%;
    background-color: #FFF;
    position: absolute;
    top: 0;
    left: 0;
}
.progress .bar {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
/*时间*/
.timer {
    height: 20px;
    line-height: 20px;
    position: absolute;
    left: 490px;
    top: 11px;
    color: #FFF;
    font-size: 14px;
}

地理定位

在HTML规范中，增加了获取用户地理信息的API，
这样使得我们可以基于用户位置开发互联网应用，
即基于位置服务 (Location Base Service)

获取当前地理信息

navigator.geolocation.getCurrentPosition(successCallback, errorCallback)

重复获取当前地理信息

navigator. geolocation.watchPosition(successCallback, errorCallback)

当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。
position.coords.latitude纬度
position.coords.longitude经度
position.coords.accuracy精度
position.coords.altitude海拔高度
当获取地理信息失败后，会调用errorCallback，并返回错误信息error
在现实开发中，通过调用第三方API（如百度地图）来实现地理定位信息，这些API都是基于用户当前位置的，并将用位置位置（经/纬度）当做参数传递，就可以实现相应的功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Geolocation</title>
    <style type="text/css">
        html,body {
            height: 100%
        }
        body {
            margin: 0;
            padding: 0;
        }
        #container {
            height: 100%
        }
    </style>
</head>
<body>
<div id="container"></div>
<!-- 引入百度javascript版 API -->
<script src="http://api.map.baidu.com/api?v=2.0&ak=	0A5bc3c4fb543c8f9bc54b77bc155724"></script>
<script>

    /*h5  geolocation */
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(function (position) {
            /*获取定位成功回调函数*/
            /*定位数据*/
            console.log(position);
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;

            // 这些都是写死
            var map = new BMap.Map("container"); // container表示显示哪个容器
            // 把经度纬度传给百度
            /*40.1691162668,116.6348530780*/
            var point = new BMap.Point(longitude, latitude);
            //默认的比例
            map.centerAndZoom(point, 20);
            //添加鼠标滚动缩放
            map.enableScrollWheelZoom();
            // 只写上面三行就可出现地图了，并且会定位
            // 定义好了一个图片标记
            var myIcon = new BMap.Icon("1.png", new BMap.Size(128, 128));
            // 创建标注
            var marker = new BMap.Marker(point, {icon: myIcon});
            map.addOverlay(marker);
            //点击地图，获取经纬度坐标
            map.addEventListener("click",function(e){
                console.log("经度坐标："+e.point.lng+" 纬度坐标："+e.point.lat);
            });
        }, function (error) {
            /*获取定位失败回调函数*/
            /*失败原因*/
            console.log(error)
        });
    }

    // 这些都是写死
    var map = new BMap.Map("container"); // container表示显示哪个容器
    // 把经度纬度传给百度
    /*40.1691162668,116.6348530780*/
    var point = new BMap.Point(116.6348530780, 40.1691162668);
    //默认的比例
    map.centerAndZoom(point, 20);
    //添加鼠标滚动缩放
    map.enableScrollWheelZoom();
    // 只写上面三行就可出现地图了，并且会定位
    // 定义好了一个图片标记
    var myIcon = new BMap.Icon("1.png", new BMap.Size(128, 128));
    // 创建标注
    var marker = new BMap.Marker(point, {icon: myIcon});
    map.addOverlay(marker);
    //点击地图，获取经纬度坐标
    map.addEventListener("click",function(e){
        console.log("经度坐标："+e.point.lng+" 纬度坐标："+e.point.lat);
    });

</script>
</body>
</html>

本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，
同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，
HTML5规范提出了相关解决方案。

特性
- 设置、读取方便
- 容量较大，sessionStorage约5M、localStorage约20M
- 只能存储字符串，可以将对象JSON.stringify() 编码后存储
window.sessionStorage
- 生命周期为关闭浏览器窗口
- 在同一个窗口(页面)下数据可以共享
window.localStorage
- 永久生效，除非手动删除（服务器方式访问然后清除缓存）
- 可以多窗口（页面）共享
方法
- setItem(key, value) 设置存储内容
- getItem(key) 读取存储内容
- removeItem(key) 删除键值为key的存储内容
- clear() 清空所有存储内容

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            margin-left: 300px;
        }
        ul{
            list-style: none;
        }
        ul li,div{
            width: 250px;
            padding: 10px 0;
            margin-left: 10px;
            border-bottom: 1px dashed #ccc;
            height: 20px;
        }
        a{
            float: right;
        }
        input{
            padding: 5px;
            margin: 10px;
        }
    </style>
</head>
<body>
<input type="search" placeholder="输入搜索关键字"/>
<input type="button" value="搜索"/>
<div><a href="javascript:;">清空搜索记录</a></div>
<ul>
    <li>没有搜索记录</li>
    <li><span>手机</span><a href="javascript:;">删除</a></li>
    <li><span>手机</span><a href="javascript:;">删除</a></li>
    <li><span>手机</span><a href="javascript:;">删除</a></li>
    <li><span>手机</span><a href="javascript:;">删除</a></li>
    <li><span>手机</span><a href="javascript:;">删除</a></li>
</ul>
<script src="jquery.min.js"></script>
<script>
    $(function () {
        /*1.使用json数据存储搜索历史记录*/
        /*2.预设一个key   historyList */
        /*3.数据格式列表 存的是json格式的数组*/
        /*4. [电脑，手机，。。。。]*/

        /*1.默认根据历史记录渲染历史列表*/
        var historyListJson = localStorage.getItem('historyList') || '[]';
        var historyListArr = JSON.parse(historyListJson);
        /*获取到了数组格式的数据*/
        var render = function () {
            /*$.each(function(i,item){}) for() for in */
            /* forEach 遍历函数  只能数组调用  回到函数（所有对应的值，索引）*/
            var html = '';
            historyListArr.forEach(function (item,i) {
                html += '<li><span>'+item+'</span><a data-index="'+i+'" href="javascript:;">删除</a></li>';
            });
            html = html || '<li>没有搜索记录</li>';
            $('ul').html(html);
        }
        render();

        /*2.点击搜索的时候更新历史记录渲染列表*/
        $('[type="button"]').on('click',function () {
            var key = $.trim($('[type=search]').val());
            if(!key){
                alert('请输入搜索关键字');
                return false;
            }
            /*追加一条历史*/
            historyListArr.push(key);
            /*保存*/
            localStorage.setItem('historyList',JSON.stringify(historyListArr));
            /*渲染一次*/
            render();
            $('[type=search]').val('');
        });

        /*3.点击删除的时候删除对应的历史记录渲染列表*/
        $('ul').on('click','a',function () {
            var index = $(this).data('index');
            /*删除*/
            historyListArr.splice(index,1);
            /*保存*/
            localStorage.setItem('historyList',JSON.stringify(historyListArr));
            /*渲染一次*/
            render();
        });

        /*4.点击清空的时候清空历史记录渲染列表*/
        $('div a').on('click',function () {
            /*清空*/
            historyListArr = [];
            /*慎用  清空网上的所有本地存储*/
            //localStorage.clear();
            //localStorage.removeItem('historyList');
            localStorage.setItem('historyList','');
            render();
        });
    });
</script>
</body>
</html>

历史管理

提供window.history，对象我们可以管理历史记录，
可用于单页面应用，Single Page Application，可以无刷新改变网页内容。

pushState(data, title, url) 追加一条历史记录
- data用于存储自定义数据，通常设为null
  + title网页标题，基本上没有被支持，一般设为空
  + url 以当前域为基础增加一条历史记录，不可跨域设置
replaceState(data, title, url) 与pushState()基本相同，
不同之处在于replaceState()，只是替换当前url，不会增加/减少历史记录。
onpopstate事件，当前进或后退时则触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
历史相关api
history
history.back()  去上一条历史
history.forward() 去下一条历史
history.go() 相对当前  跳多少条记录   正 前走  负 后退
-->
<!--
H5新增一些
history.pushState();
history.replaceState();
window.onpopstate = function(){}
实现网页中常见的开发模式   单页面应用程序  single page application  SPA
什么单页面应用程序：在一个页面上实现网站的大部分功能
实现的方案：1：哈希 hash (路由)  2: 历史追加   特点：改变地址栏是不会跳转的
-->
<!--
ajax渲染
优点：性能更好，提高用户体验
缺点：不利于seo,搜索引擎收录的网页源码

解决方案：同时会去更改地址栏 （地址栏在服务端一定有对应的页面）
-->
<button class="btn1">追加历史</button>
<button class="btn2">替换当前历史</button>
<script>
    document.querySelector('.btn1').onclick = function () {
        /*1.存数据  null*/
        /*2.存标题  null*/
        /*3.追叫的历史记录的地址*/
        history.pushState(null,null,'test.html');
    }
    document.querySelector('.btn2').onclick = function () {
        /*1.存数据  null*/
        /*2.存标题  null*/
        /*3.替换的历史记录的地址*/
        history.replaceState(null,null,'test.html');
    }

    window.onpopstate = function(){
        /*监听历史切换事件*/
        /*当前地址 没有包括域名*/
        console.log(location.pathname);
    }
</script>
</body>
</html>

离线应用

HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件。

优势
- 1、可配置需要缓存的资源
- 2、网络无连接应用仍可用
- 3、本地读取缓存资源，提升访问速度，增强用户体验
- 4、减少请求，缓解服务器负担
缓存清单
- 一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，推荐使用.appcache为后缀名
- 例如我们创建了一个名为demo.appcache的文件，然后在需要应用缓存在页面的根元素(html)添加属性manifest=“demo.appcache”，路径要保证正确。
manifest文件格式
- 1、顶行写CACHE MANIFEST
- 2、CACHE: 换行指定我们需要缓存的静态资源，如.css、image、js等
- 3、NETWORK: 换行指定需要在线访问的资源，可使用通配符
- 4、FALLBACK: 换行当被缓存的文件找不到时的备用资源
其它
- 1、CACHE: 可以省略，这种情况下将需要缓存的资源写在CACHE MANIFEST
- 2、可以指定多个CACHE: NETWORK: FALLBACK:，无顺序限制
- 3、#表示注释，只有当demo.appcache文件内容发生改变时或者手动清除缓存后，才会重新缓存。
- 4、chrome 可以通过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存

CACHE MANIFEST

CACHE:

#此部分写需要缓存的资源 （#是注释的意思）

./images/img1.jpg
./images/img2.jpg
./images/img3.jpg
./images/img4.jpg


NETWORK:

#此部分要写需要有网络才可访问的资源，无网络刚不访问

./js/main.js

*

FALLBACK:

#当访问不到某个资源的情况下，自动由另一个资源替换

./css/online.css ./css/offline.css

./online.html ./offline.html

文件读取

HTML5新增内建对象，可以读取本地文件内容。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文件读取</title>
</head>
<body>
	<input type="file" class="file" multiple>
	<!--<select name="" id="">
		<option value=""></option>
	</select>-->
	<img src="" alt="" id="img">
	<script>
		/*获取到了文件表单元素*/
		var file = document.querySelector('.file');
		/*选择文件后触发*/
		file.onchange = function () {
			/*初始化了一个文件读取对象*/
			var reader = new FileReader();
			/*读取文件数据  this.files[0] 文件表单元素选择的第一个文件 */
			reader.readAsDataURL(this.files[0]);
			/*读取的过程就相当于 加载过程 */
			/*读取完毕  预览 */
			reader.onload = function () {
			    /*读取完毕 base64位数据  表示图片*/
			    console.log(this.result);
				document.querySelector('#img').src = this.result;

			}
		}
	</script>
</body>
</html>

网络状态

我们可以通过window.onLine来检测，用户当前的网络状况，返回一个布尔值
- window.online用户网络连接时被调用
- window.offline用户网络断开时被调用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>onLine</title>
	<style>
		body {
			padding: 0;
			margin: 0;
			background-color: #F7F7F7;
		}

		p {
			width: 200px;
			height: 40px;
			text-align: center;
			line-height: 40px;
			margin: 100px auto;
			color: #FFF;
			font-size: 24px;
			background-color: #000;
			display: none;
		}
	</style>
</head>
<body>
	<p class="tips"></p>
	<p>事件绑定方法</p>
	<script src="jquery.min.js"></script>
	<script>
		// 通过window.navigator.onLine可以返回当前的网络状态
		alert(window.navigator.onLine);

		window.addEventListener('online', function () {
			//alert('online');
			$('.tips').text('网络已连接').fadeIn(500).delay(1000).fadeOut();
		});

		window.addEventListener('offline', function () {
			//alert('offline');
			$('.tips').text('网络已断开').fadeIn(500).delay(1000).fadeOut();
		});
	</script>
</body>
</html>

border-image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 400px;
            height: 150px;
            border: 20px solid #ccc;
            margin-bottom: 30px;
        }

        .box:first-child{
            /*border-image: url("images/border01.jpg") 167/20px round;*/
            /*1.在内容变化的容器可以使用，边框自动填充*/
            /*2.用法：*/
            /*2.1 图片资源*/
            border-image-source: url("images/border01.jpg");
            /*2.2 切割的尺寸 默认的单位px 而且不能使用小数*/
            /*2.2.1 切割的位置距离对应的边的距离  切了四刀   4个切割的尺寸*/
            border-image-slice: 167;/*167 167 167 167*/
            /*2.3 边框的宽度*/
            border-image-width: 20px;
            /*2.4 平铺的方式  三种平铺方式 round stretch repeat*/
            /*round 环绕 完整的自适应（等比缩放）平铺在边框内*/
            /*stretch 拉伸 拉伸显示在边框内容 变形的*/
            /*repeat 平铺 从边框的中间向两侧平铺 自适应平铺但是不是完整的*/
            border-image-repeat: round;

        }
        .box:nth-child(2){
            border-image: url("images/border01.jpg") 167/20px stretch;
        }
        .box:last-child{
            border-image: url("images/border01.jpg") 167/20px repeat;
        }


    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

拖拽

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>拖拽</title>
	<style>
		body {
			padding: 0;
			margin: 0;
			background-color: #F7F7F7;
			position: relative;
		}

		.box {
			width: 150px;
			height: 150px;
			background-color: yellow;
			position: absolute;
			top: 100px;
			left: 50px;
		}

		.container {
			width: 300px;
			height: 300px;
			background-color: green;
			position: absolute;
			top: 100px;
			left: 50%;
			margin-left: -150px;
		}
	</style>
</head>
<body>
	<div class="box" draggable="true"></div>
	<div class="container"></div>

	<script>
		var box = document.querySelector('.box');
		var container = document.querySelector('.container');

		// 整个拖拽都会执行
		box.addEventListener('drag', function (e) {
			console.log('drag');
		});

        // 拖拽的点离开当前盒子
		box.addEventListener('dragleave', function () {
			console.log('dragleave');
		});

		// 拖拽开始
		box.addEventListener('dragstart', function () {
			this.style.backgroundColor = 'red';
			console.log('dragstart')
		});

		// 拖拽结束
		box.addEventListener('dragend', function (ev) {
			this.style.backgroundColor = '';
			console.log('dragend');
		});


		//在目标元素上移动
		container.addEventListener('dragover', function (e) {
			this.style.backgroundColor = 'yellow';
            console.log('目标dragover');
			e.preventDefault();
		});

		//在目标元素松开
		container.addEventListener('drop', function (e) {
			this.style.backgroundColor = 'black';
			console.log('目标drop');
			e.preventDefault();
		});
        //在目标元素离开
        container.addEventListener('dragleave', function (e) {
            this.style.backgroundColor = '';
            console.log('目标dragleave');
            e.preventDefault();
        });
	</script>
</body>
</html>