码迷,mamicode.com
首页 > Web开发 > 详细

HTML5 JSDOM

时间:2018-11-01 17:03:40      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:输入   exp   max   hasclass   循环播放   tom   invalid   class   off   

1,HTML5 新语义化标签

- nav -- 表示导航
- header -- 表示页眉 -- 头部
- section -- 表示区块 -- 类似于div
- main -- 文档主要内容
- article -- 文章
- aside -- 主体内容之外
- footer -- 表示页脚 -- 底部

 

2,HTML5 新type属性 

- 邮  箱    : `email`
- 电  话    : `tel` --
- 网  址    : `url`
- 数  量    : `number`
- shop名称  : `search` --
- 范  围    : `range`
- 颜  色    : `color`
- 时  间    : `time`
- 日  期    : `data`
- date时间  : `datatime-local`
- 月  份    : `month`
- 星  期    : `week`

 

3,HTML5 其他重要属性 

- placeholder -- 占位符
- contenteditable="true" -- 盒子可编辑
- autofocus  自动获取焦点
- autocomplete 能够记录用户的输入,并且给予提示,on:打开, off关闭
    * 必须成功提交了,提交了才有记录
    * 当前添加autocomplete的元素有name属性
- required 必须输入,如果没有输入的话,阻止当前数据的提交
- pattern 正则表达式验证
    * 属性值是正则
- multiple: 选择多个值
    * 如果想要在某个input标签中选择多个值,可以使用该属性
- input -- text   list="id号"
datalist id="id号" - option - option - label for="id号" input -- text id="id号"

 

4,HTML5 新增事件 (非重要)

- oninput:监听当前指定元素内容的改变,只要内容改变(添加内容,删除内容)就会触发这个事件
- onkeyup:键盘弹起的时候触发,每一个键的弹起都会触发一次
- oninvalid : 当验证不通过的时候触发
        - setCustomValidity :设置默认的提示信息
              + 默认的提示不友好,自定义提示信息,更准确的提示给用户

 

5,HTML5 新增表单元素

- progress
    * `<progress max="100" value="60"></progress>`
- meter
    * `<meter max="100" min="0" high="80" low="40" value="30"></meter>`
        * high 规定较高的值
        * low  规定较低的值
        * max  最大值
        * min  最小值
        * value 当前度量值
audio

src //mp3, ogg, wav

controls{控制面板}, autoplay{自动播放}, loop{循环播放}

video

src //mp4, flv, mov

controls{控制面板}, autoplay{自动播放}, loop{循环播放}

poster{封面照片}, width, height

不支持avi

 

 

6,HTML5 新增DOM选择和操作样式 

  • querySelector
    
    获取单个元素,如果获取的元素不止一个,那么只会返回满足条件的第一个元素
    
    querySelectorAll
    
    获取满足条件的所有元素--数组
    
    参数要求:如果是类选择器,必须添加. 如果是id选择器, 必须添加# ,否则当成标签处理
    
    + IE8+ 都支持,IE8只支持 CSS2 选择器,工作中大量使用 +
    
    classList:当前元素的所有元素类名列表-数组
    
    add:为元素添加指定名称的样式.一次只能添加一个样式
    
    remove:为元素移除指定名称的样式(不是移除class属性),一次也只能移除一个
    
    toggle:切换元素的样式:如果元素之前没有指定名称的样式则添加。如果有则移除
    
    contains:判断元素是否包含指定名称的样式,返回true/false
    
    data- : 自定义属性
    
    dataset[""]:访问元素的属性, 驼峰命名法
    
     
    
    DOM原生操作类名 obj.className = "cur list"
    
    可以设置多个, 缺点是会将之前的都覆盖掉
    
    jQuery操作类名 ?(obj).removeClass("cur") ?(obj).hasClass("cur")
    
    操作简单, 缺点是必须要引包才能使用
    
    H5新属性操作类名 obj.classList.add("list") obj.classList.remove("cur") obj.classList.toggle("list") obj.classList.contains("cur") obj.classList.item(2)
    
    功能强大, 缺点是需要写中间方法, 并且一次只能增删一个
    
    DOM操作元素属性 obj.removeAttribute("class"); obj.setAttribute("") obj.getAttribute("")
    
    操作方便, 缺点是只映射到标签上
    
    jQuery操作元素属性 ?(obj).attr("class")
    
    方法简单, 缺点是需要引包

     

 

 

 

 

 

 

 

 

 

 

 

HTML5 JSDOM

标签:输入   exp   max   hasclass   循环播放   tom   invalid   class   off   

原文地址:https://www.cnblogs.com/gaoguowen/p/9889987.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!