Html5 01(data-attributes、form-types【只在移动端使用】、svg)

data-attributes

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>data属性</title>
</head>

<body>
  <ul id="list">
    <!-- <li data-age="18">zhangsan1</li> -->
  </ul>
  <div id="info"></div>
  <script>
    // 键是ID 值是信息
    var data = {
      01: {
        name: "张三1",
        age: 18
      },
      02: {
        name: "张三2",
        age: 19
      },
      03: {
        name: "张三3",
        age: 20
      }
    };
    // jQuery操作一定要做变量本地化
    var list = document.getElementById('list');
    for (var id in data) {
      var item = data[id];
      var liElement = document.createElement('li');
      // liElement.innerHTML = item.name;
      liElement.appendChild(document.createTextNode(item.name));
      liElement.setAttribute('data-age', item.age);
      liElement.setAttribute('data-id', item.id);
      list.appendChild(liElement); // 变量本地化
      // 此处才将元素加到界面上
      liElement.addEventListener('click', function() {
        // alert(this.name);
        // this 是当前点击的元素
        // alert(this.getAttribute('data-age'));
        console.log(this.dataset['age']);
      });
    }
  </script>
</body>

form-types【只在移动端使用】

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>新的表单类型（只在移动端使用）</title>
</head>

<body>
  <form action="#" method="">
    <input type="text">
    <input type="image" src="toy.png">
    <input type="submit">
    <!-- file text password radio checkbox button image submit reset select button -->
    <input type="date">
    <input type="color">
    <input type="range" min="0" max="10" step="5" value="5">
    <hr>
    <input type="text" required>
    <input type="email" value="some@email.com">
    <input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14">
    <input type="range" min="0" max="50" value="10">
    <input type="search" results="10" placeholder="Search...">
    <input type="tel" placeholder="(555) 555-5555" pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$">
    <input type="color" placeholder="e.g. #bbbbbb">
    <input type="number" step="1" min="-5" max="10" value="0">
  </form>
</body>

</html>

svg

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    polygon {
      fill: red;
    }
  </style>
</head>

<body>
  <!-- <iframe src="demo.svg" frameborder="0"></iframe> -->
  <!-- <object data="demo.svg" type=""></object> -->
  <!-- <embed src="demo.svg" type=""> -->
  <svg data-src="demo.svg"></svg>
  <script src="jquery.js"></script>
  <script>
    window.addEventListener('load', function() {
      var svgs = document.getElementsByTagName('svg');
      for (var i = 0; i < svgs.length; i++) {
        // ???
        // console.log(svgs[i].dataset);
        var src = $(svgs[i]).data('src');
        // 向服务器发送请求 得到svg
        $.get(src, function(data) {

          var el = data.documentElement;
          $(document.body).append($(el));
        });
      }
    });
  </script>
</body>

</html>

 

posted @ 2017-04-01 10:19  每天学习一点点...  阅读(126)  评论(0)  编辑  收藏  举报