HTML5 基础学习

• <= ie8 的浏览器不支持 html5，css3 的使用。

// 解决办法，引入 html5shiv.min.js 文件：
<script src="html5shiv.min.js"></script>

<!-- 条件注释，只有IE能够识别 -->
<!--[if lte ie 8]>
  <script src="html5shiv.min.js"></script>
<![endif]-->

<!-- 
  lte 意义: 
  l: less 更小
  t: then 比
  e: equal 等于
  g: great 更大
-->

• html5shiv.js 和 respond.min.js

• DOM扩展 - 获取标签 document 文档对象。 当在浏览器中打开一个页面后，浏览器首先会来解析我们的网页，把解析出来的数据，存放到一个DOM对象中； 然后获取指定标签需要这样写：

// js:
document.getElmentById('box');

// jquery :
\$('.box');
\$('#box');
\$('div.box');
\$('div p');

// h5 js:
// 只会获取符合条件的第一个元素，返回元素
document.querySelector('.box');
// 获取所有符合条件的元素, 返回数组元素
document.querySelectorAll('.box');

• DOM扩展 - 类名操作

// js:
box.className="active";

// jquery :
box.addClass();
box.removeClass();
box.hasClass(); // 是否包含类名
box.toggleClass(); // 切换类名

// h5 js:
box.classList.add('active');
box.classList.remove('active');
box.classList.contains('active'); // 是否包含类名
box.classList.toggle('active'); // 切换类名

• 标签自定义属性

<!-- 标签里面自定义属性 必须以 data- 开头 -->
<div class="box" title="dzm" data-name="dzm" data-my-name="dzm-xyq" data-content="xyq"></div>

<script>

  var box = document.querySelector('.box');
  // js 里面自定义属性
  box.index = 100;

  // 输出
  console.log(box.className);
  console.log(box.title);
  console.log(box.index);

  // 输出标签上通过 data- 自定义的属性，需要通过 dataset[] 方式来获取
  console.log(box.dataset['name']);
  console.log(box.dataset['content']);

  // data-my-name="dzm-xyq" 这种方式的自定义属性，获取时需要通过驼峰命名来获取
  console.log(box.dataset['myName']);
  
  // 修改自定时属性值
  box.dataset['content'] = 'temp';

</script>