H5C3第五节

<!-- 现象: IE8 以下版本不支持 html5 语义化标签 -->
<header>我是header标签， 我应该独占一整行</header>

<script src="html5shiv.js"></script>

lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。

<!--[if lte IE 8]>
    <script>
      alert("呵呵, 小于等于IE8都会执行这段话");
    </script>
    <script src="html5shiv.js"></script>
<![endif]-->

<!--[if gt IE 8]>
   <script>
      alert("只有IE9才执行这句话");
   </script>
<![endif]-->

四个操作样式类的方法, 很简单, 需要熟记
1. 添加类: dom.classList.add  
2. 移除类: dom.classList.remove
3. 判断类: dom.classList.contains
4. 切换类: dom.classList.toggle

html5 提供了一种更简单存取数据的方式 dataset

// 用法:
1. 存的时候, 在属性名前面加上 data-,
   <div class="pp" data-uage="18" data-uname="鹏鹏" data-sex="男"></div>
  
2. 取的时候, 通过 dataset.属性名取,
   例如: box.dataset.uage 或者 box.dataset["uage"]
  
3. 修改添加, 直接通过对象属性操作方式操作即可
   例如: box.dataset.uage=12

navigator.onLine返回用户当前的网络状况，是一个布尔值
1. 如果浏览器连不上网(包括局域网)，就是离线状态，也就是脱机状态，会返回false
2. 否则就是在线状态，返回true

//网络连接时会被调用
window.addEventListener("online", function () {
    alert("online");
});
//网络断开时会被调用
window.addEventListener("offline", function () {
    alert("offline");
});

//successCallback:获取成功后会调用,并返回一个position对象，里面包含了地理位置信息
//获取失败了会调用，并返回error对象，里面包含了错误信息。
//获取当前的地理位置信息
navigator.geolocation.getCurrentPosition(successCallback, errorCallback)
//重复的获取当前的地理位置信息
navigator.geolocation.watchPosition(successCallback, errorCallback)

navigator.geolocation.getCurrentPosition(function(position){
    // 定位成功会调用该方法
    // position.coords.latitude 纬度
    // position.coords.longitude 经度
    // position.coords.accuracy 精度
    // position.coords.altitude 海拔高度
}, function(error){
    // 定位失败会调用该方法
    // error 是错误信息
});

1. 在开发中，找到javascript API
2. 直接查看示例demo
3. 复制相应的代码，替换掉秘钥就行，秘钥只需创建一个新的应用就可以了。

//存储在内存中，会被释放
var str = "hello world";
console.log(str);

//存储在硬盘上，不会被释放
localStorage.setItem("name", "张三");
console.log(localStorage.getItem("name"));

document.cookie = "name=zhangsan";
document.cookie = "age=18";
document.cookie = "sex=23";

//读取cookie
var result = document.cookie;
console.log(result);

//设置cookie
$.cookie("name", "zs");
//获取cookie
console.log($.cookie("name"));
//删除cookie
$.removeCookie("name");

1. 声明周期为关闭浏览器窗口
2. 不能在多个窗口下共享数据。
3. 大小为5M

1. 永久生效，除非手动删除
2. 可以多个窗口共享
3. 大小为5M

setItem(key, value) //设置存储内容
getItem(key) //读取存储内容
removeItem(key) //删除键值为key的存储内容
clear() //清空所有存储内容

video.requestFullScreen()

currentTime:当前时间
duration：总长时间
timeupdate:播放进度更改时触发
volume：控制音量

//创建一个fileReader对象
var fr = new FileReader;
//读取文件的两个方法
readAsText() 以文本的方式读取文件
readAsDataURL() 以DataURL形式读取文件
//文件读取完成事件：
fr.onload = function(){}
//当文件读取完成，可以通过result属性获取结果
fr.result

var file = document.getElementById("file");
    var box = document.getElementById("box");

    file.addEventListener("change", function () {
        console.dir(file);
        
        //files:里面存储了所有上传的文件
        //这个data就是我们上传的那个文件
        var data = file.files[0]
      
        //1. 创建一个文件读取器
        var fr = new FileReader();

        //2. 让文件读取器读取整个文件
        fr.readAsDataURL(data);

        //3. 等待文件读取完
        //onload：文件读取完成后，就会触发
        fr.onload = function () {
            var img = document.createElement("img");
            img.src = fr.result;
            box.innerHTML = "";
            box.appendChild(img);
        }
    });

ondragover应用于目标元素，当停留在目标元素上时调用
ondrop应用于目标元素，当在目标元素上松开鼠标时调用(浏览器默认不让拖拽，需要组织dragover的默认行为。)