HTML5 第二部分 2018-03-31

2018-04-02 本文已影响0人多佳小昕

一、markdown

用普通文本描述富文本
扩展名md

http://wowubuntu.com/markdown/
我们要写一个应用程序，需要用到什么东西，这些东西可能是js或者jq提供给我们的一些方法，这些东西就叫API。

二、基础IAPI提升

新选择器
提供类似于jQuery中选择器的API

通过类名查找元素
document.getElementById('section1'); √
document.getElementsByTagName('div'); √
document.getElementsByClassName('section'); 这是新的，查找class类名
通过CSS语法查找元素
document.querySelectorAll('ul'); 取一个元素类型是dom类型的数组
document.querySelectorAll('.container');
document.querySelector('div.container > .inner'); 取一个的dom对象，这是jq的写法，h5也可以用了
但是$(".container") 返回的是一个jq对象。（dom元素的数组）
本质上都是获取dom数组，只不过jq多一些其他成员
dom数组的成员的注册事件不能像jq一样直接注册，要遍历挨个注册！

var items = document.querySelectorAll('ul > .item');
      console.log(items);
      for (var i = 0; i < items.length; i++) {
        items[i].addEventListener('click', function(e) {
          console.log(1111);
        });
      }

H5就是将我们经常用的操作又包装一层。

Element.classList
提供类似于jQuery中CSS操作的API

add添加类、remove移除类

 (function() {
      // 1.获取所有li元素
      var lis =  document.querySelectorAll('.nav > li');
      for(var i = 0; i<lis.length; i++){
        var item = lis[i];
      //2.遍历，给所有的元素注册click事件
        item.addEventListener('mouseover',function(e){
      //3. 要重置一下其他的active样式
          for(var i = 0; i<lis.length;i++){
            lis[i].classList.remove('active');
          }
      // 4.把正在执行的元素active
          this.classList.add('active');
          console.log(this.classList);
          e.preventDefault();
        })}
    })();

contains包含、toggle切换

 link.addEventListener('click',function(e){
      var exist = this.classList.contains('active');
      // toggle函数的第二个参数为true是添加，false是删除
      this.classList.toggle('active',!exist);
      e.preventDefault();
    })

访问历史api
在此之前我们可以通过history对象实现前进（forward）、后退（back）和刷新（go）之类的操作
H5中开放了更多的API：历史状态操作
我们可以通过window.history去操作历史状态，让一个页面可以有多个历史状态
HTML5 history API包括：

history.pushState()方法：新增状态
history.replaceState()方法：替换状态
window.onpopstate事件：得到状态

默认样式是有必要的，并不是把它清除掉，而是为了给所有的浏览器设置默认样式，统一化；
不推荐用*去设置默认样式效率低

(function() {
     var listElement = document.querySelector("#list");
     for(var title in data) {
      var liElement = document.createElement("li");
      liElement.innerHTML  = title;
      liElement.setAttribute('data-title',title);
      listElement.appendChild(liElement);
     }
     var lisElement = document.querySelectorAll("#list>li");
     var content = document.querySelector("#content");
     for(var i = 0; i < lisElement.length; i++){
      lisElement[i].addEventListener('click',function(){
        var title = this.dataset['title'];
        content.innerHTML = data[title];
        if(window.history && history.pushState){
          history.pushState(title,"title没有任何浏览器支持","?t="+title);
          // 添加一个新的历史记录
        }
        else{
            console.log("不支持");
          }
      });
     }
     // 当我们在伪造的访问历史中前进后退时，会执行popstate事件：push里面的元素
     window.addEventListener("popstate",function(e){
      content.innerHTML = data[e.state];
     });
     var title = window.location.search.split('=')[1];
     if(title){
      console.log(decodeURI(title));
      content.innerHTML = data[decodeURI(title)];
     }
    })();

js操作不会被浏览器记住，不会回到之前的状态
new Date() 一个时间对象
toLocalTimeString()转换成我们能认识的时间字符串
toLocalDateString()日期字符串

全屏api（很少用到）
点击某处使页面全屏：

   var elem = 需要全屏的元素;
     if (elem.webkitRequestFullScreen) {
       elem.webkitRequestFullScreen();
     } else if (elem.mozRequestFullScreen) {
       elem.mozRequestFullScreen();
     } else if (elem.requestFullScreen){
       elem.requestFullScreen ();
     }

三、网页存储

Application Cache
就是让网页可以离线访问的技术
<html manifest="cache.manifest">

CACHE MANIFEST
# version 1.0.7

CACHE:
  cache.css
  cache.js
  05-application-cache.html
  toy.png

NETWORK:
  *

satckedit就可以离线markdown

web storage
localStorage：永久保存
&
sessionStorage：关闭浏览器就过期

var btnSet = document.querySelector('#btn_set');
var btnGet = document.querySelector('#btn_get');
var txtValue = document.querySelector('#txt_value');
btnGet.addEventListener('click', function() {
  // txtValue.value = localStorage.getItem('key1');
  //若果不存在这个值，会返回空，而下面这个方法会返回undefined
  txtValue.value = localStorage['key1'];
});
btnSet.addEventListener('click', function() {
  // localStorage.setItem('key1', txtValue.value);
  localStorage['key1'] = txtValue.value;
});

文件系统（提供客户端本地操作文件的可能）

fileAPI
对于表单里的input，可以通过name属性直接找到
document.forms[0].input_file

<input id="input_1" class="form-control" name="input_1" type="file">
// script
var input = document.querySelector('#input_1');
// 获取文件域中选择的文件
// var file = input.files[0];
var file = input.files.item(0);

FileReader
用来读取本地文件的对象

var reader = new FileReader();
reader.addEventListener('load', function () {
  this.result; // 读取出来的结果
});
reader.readAsText(file); // 以文本的形式读取
reader.readAsDataURL(file); // 以DataURI的形式读取
// 以下（后台工程师用，前端不会用到）
reader.readAsBinaryString(file); // 二进制格式
reader.readAsArrayBuffer(file); // 字节数组

拖拽操作小案例：
思路：
先获取目标框，进行拖入拖出事件的注册，然后中间要进行阻止默认事件。
拽入框内后：先获取到文件，遍历文件并添加小li，给li添加内容（关于文件的信息）
如果是文字，获取文字内容并赋值，如果是图片，添加一个img元素并把地址赋进去。

    (function() {
      // 找到目标位置框框
      var target = document.querySelector('#target');
      var fileList = document.querySelector('#result');
      // 注册拖拽进入
      target.addEventListener('dragenter', function() {
        this.classList.add('actived');
      });
      // 离开
      target.addEventListener('dragleave', function() {
        this.classList.remove('actived');
      });

      // 如果想要捕获drop事件 就一定得在该事件中阻止默认事件
      target.addEventListener('dragover', function(e) {
        e.preventDefault();
        e.stopPropagation();
      });

      // 当元素放到该对象上
      target.addEventListener('drop', function(e) {

        if (e.dataTransfer.files.length) {
          var files = e.dataTransfer.files;
          for (var i = 0; i < files.length; i++) {
            var li = document.createElement('li');
            li.setAttribute('class', 'list-group-item');
            // 创建信息的子节点
            li.innerHTML = '<h5 class="list-group-item-heading">' + files[i].name + '</h5><p class="list-group-item-text">' + files[i].lastModifiedDate.toLocaleDateString() + ' ' + files[i].lastModifiedDate.toLocaleTimeString() + ' ' + (files[i].size / 1024).toFixed(2) + 'KB</p>';
            fileList.appendChild(li);
          }
        } else {
          // 短路运算
          // var data = e.dataTransfer.getData('text/plain') || e.dataTransfer.getData('text/uri-list');
          var data = e.dataTransfer.getData('text/plain');
          if (data) {
            // 拖入的是文本
            target.innerHTML = data;
          } else {
            var img = document.createElement('img');
            img.src = e.dataTransfer.getData('text/uri-list');
            target.appendChild(img);
          }
        }

        this.classList.remove('actived');

        e.preventDefault();
        e.stopPropagation();
      });

    })();

HTML5 第二部分 2018-03-31

一、markdown

二、基础IAPI提升

三、网页存储

猜你喜欢

热点阅读