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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端

JavaScript基础学习--05自定义属性、索引值

一、自定义属性      1、读写操作 <input abc="123" type="button" value="按钮" /> ==============...

2027
来自专栏性能与架构

JS中控制好this关键字的指向

javascript中的 this 的指向不太好控制,理解不好的话很容易错误 下面几个示例可以加深对this指向的理解 (1)内联事件 <a href="...

28411
来自专栏DT乱“码”

jQuery.data() 的实现方式

jQuery.data() 的实现方式     jQuery.data() 的作用是为普通对象或 DOM Element 附加(及获取)数据。      ...

2637
来自专栏电光石火

mybatis在xml文件中处理大于号小于号的方法

用了转义字符把>和<替换掉,然后就没有问题了。

26310
来自专栏行者常至

005.golang 控制语句

1023
来自专栏Young Dreamer

setInterval(code, time)中code传递参数办法

1.使用setInterval的场景 有时我们需要隔一定的时间执行一个方法,这时就会用到setInterval,但是由于这个方法是浏览器模拟出的Timer线程,...

1849
来自专栏xingoo, 一个梦想做发明家的程序员

快速排序

快速排序时间复杂度为O(nlogn),由于是在原数组上面利用替换来实现,因此不需要额外的存储空间。 算法思想:   通过设置一个岗哨,每次跟这个岗哨进行比较,比...

21310
来自专栏彭湖湾的编程世界

谈谈出入React框架踩过的坑

1 在JSX的元素中写入内联样式,例如<div style={"color:blue"}></div> 报错:warning:Style prop value ...

3246
来自专栏coder修行路

Python爬虫从入门到放弃(十四)之 Scrapy框架中选择器的用法

Scrapy提取数据有自己的一套机制,被称作选择器(selectors),通过特定的Xpath或者CSS表达式来选择HTML文件的某个部分 Xpath是专门在X...

2018
来自专栏积累沉淀

JavaScript DOM基础2

DOM自身存在很多类型,比如Element类型:表示的是元素节点,再比如Text类型:表示的是文本节点。DOM也提供了一些扩展功能。 一.DOM类型 DOM基础...

1928

扫码关注云+社区

领取腾讯云代金券