H5的新特性

 

 

H5的新特性

文档类型设定

• document

  • HTML:

  • XHTML:

  • HTML5

字符设定

• <meta http-equiv="charset" content="utf-8">：HTML与XHTML中建议这样去写

• <meta charset="utf-8">：HTML5的标签中建议这样去写

常用新标签

• header：定义文档的页眉

• nav：定义导航链接的部分

• footer：定义文档或节的页脚

• article：标签规定独立的自包含内容

• section：定义文档中的节（section、区段）

• aside：定义其所处内容之外的内容

常用新属性

属性****	用法****	含义****
placeholder****	<input type="text" placeholder="请输入用户名">	占位符提供可描述输入字段预期值的提示信息
autofocus****	<input type="text" autofocus>	规定当页面加载时 input 元素应该自动获得焦点
multiple****	<input type="file" multiple>	多文件上传
autocomplete****	<input type="text" autocomplete="off">	规定表单是否应该启用自动完成功能
required****	<input type="text" required>	必填项
accesskey****	<input type="text" accesskey="s">	规定激活（使元素获得焦点）元素的快捷键

 

新增的type属性值：

类型****	使用示例****	含义****
email****	<input type="email">	输入邮箱格式
tel****	<input type="tel">	输入手机号码格式
url****	<input type="url">	输入url格式
number****	<input type="number">	输入数字格式
search****	<input type="search">	搜索框（体现语义化）
range****	<input type="range">	自由拖动滑块
time****	<input type="time">
date****	<input type="date">
datetime****	<input type="datetime">
month****	<input type="month">
week****	<input type="week">

 

获取dom的方式

H5 api

querySelect() 谷歌,ie iege 火狐等都支持 (推荐)

getElementById() iege不支持

 

1. querySelector() 获取符合选择器的第一个元素

2. querySelectorAll() 获取符合选择器的所有元素

 

类操作

1. jquery操作类的方法：addClass() removeClass() toggleClass() hasClass()

2. h5也有类似的api 基于一个对象classList的方法 add() remove() toggle() contains() (推荐)

 <script>
         document.querySelector("ul").onclick = function(e){
             //获取选中的当前元素
             var currenLi = e.target;
             //判断选中的元素是否有select, 如果有就返回false
             if(currenLi.classList.contains("select")) return false;
             //如果没有就将原来选中的删除
             document.querySelector(".select").classList.remove("select");
             //当前选中的元素添加
             currenLi.classList.add("select");
         }
     </script>

 

 

自定义属性

 <!--
 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';
 ​
 ​
 </script>

jquery的data 和 H5的dataset的区别

1. jquery的data() 操作内存, 页面数据还是那个值,

2. H5的dataset 操作dom, 页面数据随操作改变

 

案例

 <ul class="nav">
         <!-- data-contentId 浏览器在编译的时候, 会将Id编译为id. 所以写大写在编译的时候会报错 -->
         <li data-content-id="content1">菜单1</li>
         <li data-content-id="content2" class="active">菜单2</li>
         <li data-content-id="content3">菜单3</li>
         <li data-content-id="content4">菜单4</li>
     </ul>
     <ul class="content">
         <li id="content1" >内容1</li>
         <li id="content2" class="show">内容2</li>
         <li id="content3">内容3</li>
         <li id="content4">内容4</li>
     </ul>
 ​
     <script>
         document.querySelector(".nav").onclick = function (e) {
             var current = e.target;
             //判断当前元素中是否有active, 如果有返回false
             if (current.classList.contains("active")) return false;
             //如果没有该类名, 就将原来的去掉,
             var olElement = document.querySelector(".nav li.active");
             olElement.classList.remove("active");
             // 给该元素加上
             current.classList.add("active");
 ​
             document.getElementById(olElement.dataset.contentId).classList.remove("show");
             document.getElementById(current.dataset.contentId).classList.add("show");
         };
     </script>
 ​