html5 新特性

1.querySelector 返回文档中匹配指定css选择器的一个元素.
　　　　注意：uerySelector() 方法仅仅返回匹配指定选择器的第一个元素
　　　　　　　　如果你需要返回所有的元素，请使用 querySelectorAll()

　　　　语法：document.querySelector(CSS selectors)
2.getElementsByClassName() 方法返回文档中所有指定类名的元素集合
　　　　语法：document.getElementsByClassName(classname)
3.classList
　　　　classList 属性返回元素的类名，作为 DOMTokenList 对象。
　　　　　　该属性用于在元素中添加，移除及切换 CSS 类。
　　　　　　classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。

　　　　语法： element.classList
　　　　属性： length 返回类的数量，只读。
　　　　方法：
　　　　　　1. add(class,class2..) 在元素中添加一个或多个类名
　　　　　　2.contains(class) 返回布尔值，判断指定的类名是否存在 可能值：
　　　　　　　　　　true - 元素包已经包含了该类名
　　　　　　　　　　false - 元素中不存在该类名
　　　　　　3.item(index) 返回类名在元素中的索引值。索引值从 0 开始。
　　　　　　　　如果索引值在区间范围外则返回 null
　　　　　　4.remove(class1,class2,...) 移除元素中一个或多个类名
　　　　　　5.toggle(class,true| false) 在元素中切换类名
　　　　　　　　第一个参数为要在元素中移除的类名，并返回 false。
　　　　　　　　　　如果该类名不存在则会在元素中添加类名，并返回 true。
　　　　　　　　第二个是可选参数，是个布尔值用于设置元素是否强制添加
　　　　　　　　　　或移除类，不管该类名是否存在
4.eval()
　　　　　　eval() 函数计算JavaScript 字符串,并把它作为脚本代码来执行
　　　　　　　　　　如果参数是一个表达式，eval() 函数将执行表达式
　　　　　　　　语法：eval(string)
　　　　　　　　参数： string 必须。要计算的字符串，其中含有要计算的 JavaScript 表达式或要执行的语句
5.parse()
　　　　方法用于将JSON 字符串转换为对象。
　　　　　　语法： Json.parse(text[,reviver])
　　　　　　参数： text必须，一个有效的JSON 字符串。
　　　　　　　　reviver 可选一个转换结果的函数， 将为对象的每个成员调用此函数
　　　　　　返回给定JSON 字符串转换后的对象。
6.stringify
　　　　用于将 JavaScript 值转换为 JSON 字符串。
　　　　语法: JSON.stringify(value[, replacer[,span]])
　　　　 value:
　　　　　　必需， 一个有效的 JSON 字符串。
　　　　replacer:
　　　　　　可选。用于转换结果的函数或数组。
　　　　　　如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，

　　　　　　　　则排除成员。根对象的键是一个空字符串：""。
　　　　　　如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，

　　　　　　　　将忽略 replacer 数组。
　　　　　　space:
　　　　　　　　可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，

　　　　　　　　则文本缩进 10 个空格。space 有可以使用非数字，如：\t。

　　　　　　　　返回值:返回包含 JSON 文本的字符串。
7.自定义对象属性：
　　　　html5中可以通过data- 前缀就成为data 属性，
　　　　　　也可以应用CSS属性选择器进行样式设置。数量不受限制，在控制和渲染数据的时候提供了非常强大的控制
　　　　dataset 获取属性值：
　　　　　　<div id="day2-meal-expense" data-drink="coffee" data-food="sushi" data- meal="lunch">¥20.12</div>
　　　　　　<button id="button">点击我</button>

　　　　　　var expenseday2 = document.getElementById("day2-meal-expense");
　　　　　　var typeOfDrink = expenseday2.dataset && expenseday2.dataset.drink;
　　　　　　document.getElementById("button").onclick = function() {
　　　　　　　　　　alert("饮料是：" + typeOfDrink);
　　　　　　};

　　　　　　　　得到的饮料的 coffee

8.html5 <script> async 属性
　　　　defer : 延迟加载，会按顺序执行，在onload执行前被触发
　　　　语法： <script async="async">
　　　　实例：脚本一步执行
　　　　<script type="text/javascript" src="demo_async.js" async="async"></script>
　　　　定义和用法：
　　　　　　async 属性规定一旦脚本可用，则会异步执行。
　　　　　　async 属性仅适用于外部脚本（只有在使用 src 属性时）。

　　　　　　如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
　　　　　　如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
　　　　　　如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

 

9.拖放事件
　　　　draggable
　　　　　　设置为true，元素就可以拖拽了
　　　　　　拖拽元素事件 : 事件对象为被拖拽元素
　　　　dragstart , 拖拽前触发
　　　　drag ,拖拽前、拖拽结束之间，连续触发
　　　　dragend , 拖拽结束触发
　　　　　　目标元素事件 : 事件对象为目标元素
　　　　dragenter , 进入目标元素触发，相当于mouseover
　　　　dragover ,进入目标、离开目标之间，连续触发
　　　　dragleave , 离开目标元素触发，相当于mouseout
　　　　drop , 在目标元素上释放鼠标触发

　　　　　　事件的执行顺序 ：drop不触发的时候
　　　　dragstart > drag > dragenter > dragover > dragleave > dragend
　　　　　　事件的执行顺序 ：drop触发的时候(dragover的时候阻止默认事件)
　　　　dragstart > drag > dragenter > dragover > drop > dragend
　　　　　　不能释放的光标和能释放的光标不一样
　　　　effectAllowed
　　　　effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
　　　　setDragImage
　　　　　　三个参数：指定的元素，坐标X，坐标Y
　　　　files
　　　　　　获取外部拖拽的文件，返回一个filesList列表
　　　　filesList下有个type属性，返回文件的类型

　　　　dataTransfer对象
　　　　setData() : 设置数据 key和value(必须是字符串)
　　　　getData() : 获取数据，根据key值，获取对应的value

 　　　　　　demo 下载https://github.com/ningmengxs/html5.git

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有