01计时器的使用
js中计时器重要使用window.setInterval()方法和window.setTimeout()方法，
其中setInterval()方法的作用是每隔一段时间执行一次方法，而window.setTimeout()在一段时间内调用函数。
setTimeout()方法一般通过调用自身迭代的方式实现计时器。与这两个方法对应的，还有清除这两个函数效果的
两个方法，分别是window.clearInterval()和window.clearTimeout()。
1.setInterval()和clearInterval() (window可以省略)
(1)setInterval()方法常用的语法如下：
setInterval(function,interval)；
其中function是将要在间隔时间内执行的函数，interval是间隔的时间，单位是毫秒。
(2)clearInterval()方法的常用语法如下：
timer = setInterval(function,interval)；
clearInterval(timer);
02cookie创建
JavaScript Cookie
Cookie 用于存储 web 页面的用户信息。
什么是 Cookie？
Cookie 是一些数据, 存储于你电脑上的文本文件中。
当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:
当用户访问 web 页面时，他的名字可以记录在 cookie 中。
在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。
Cookie 以名/值对形式存储，如下所示:
username=John Doe
当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。
使用 JavaScript 创建Cookie
JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。
JavaScript 中，创建 cookie 如下所示：
document.cookie=“username=John Doe”;
您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：
document.cookie=“username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT”;
您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。
document.cookie=“username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/”;
使用 JavaScript 读取 Cookie
在 JavaScript 中, 可以使用以下代码来读取 cookie：
var x = document.cookie;
使用 JavaScript 修改 Cookie
在 JavaScript 中，修改 cookie 类似于创建 cookie，如下所示：
document.cookie=“username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/”;
旧的 cookie 将被覆盖。
使用 JavaScript 删除 Cookie
删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:
document.cookie = “username=; expires=Thu, 01 Jan 1970 00:00:00 GMT”;
注意，当您删除时不必指定 cookie 的值。
Cookie 字符串
document.cookie 属性看起来像一个普通的文本字符串，其实它不是。
即使您在 document.cookie 中写入一个完整的 cookie 字符串, 当您重新读取该 cookie 信息时，cookie 信息是以名/值对的形式展示的。
如果您设置了新的 cookie，旧的 cookie 不会被覆盖。 新 cookie 将添加到 document.cookie 中，所以如果您重新读取document.cookie，您将获得如下所示的数据：
cookie1=value; cookie2=value;
03cookie获取
获取 cookie 值的函数
然后，我们创建一个函数用户返回指定 cookie 的值：
function getCookie(cname){
var name = cname + “=”;
var ca = document.cookie.split(’;’);
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return “”;}
函数解析：
cookie 名的参数为 cname。
创建一个文本变量用于检索指定 cookie :cname + “=”。
使用分号来分割 document.cookie 字符串，并将分割后的字符串数组赋值给 ca (ca = document.cookie.split(’;’))。
循环 ca 数组 (i=0;i<ca.length;i++)，然后读取数组中的每个值，并去除前后空格 (c=ca[i].trim())。
如果找到 cookie(c.indexOf(name) == 0)，返回 cookie 的值 (c.substring(name.length,c.length)。
如果没有找到 cookie, 返回 “”。
获取cookie：
/**
* 获取对应名称的cookie
* @param name cookie的名称
* @returns {null} 不存在时，返回null
/
var getCookie = function (name) {
var arr;
var reg = new RegExp("(^| )" + name + "=([^;])(;|KaTeX parse error: Expected 'EOF', got '}' at position 119: …turn null; }̲; cookie获取正则解析：…)" (^| )匹配cookie开头或空格（cookie键值对之间用分号空格隔开），也就是cookie键值对的开始。接着是cookie的名称name，（[^;]*）匹配除分号以外的任意字符，也就是cookie键值对的值。最后(;|$)匹配分号或整个cookie的结尾，也就是cooke键值对的结尾。
04cookie截取
indexOf和lastIndexOf方法
indexOf方法——返回某个指定的字符串值在字符串中首次出现的位置
lastIndexOf方法——返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索
说明：js中没有java中字符串的contains方法，其类似的方法为indexOf、lastIndexOf
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
substring() 方法返回的子串包括 start 处的字符，但不包括 stop 处的字符。
如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。
var date = new Date();
//通过date.getTime()获取当前的毫秒数，再次基础上加上超时的时间
date.setTime(date.getTime()+10000);
document.cookie="[email protected];expires="+date.toGMTString();
console.log(document.cookie);
var test = document.cookie;
//substring()方法用于提取字符串中介于两个指定下标之间的字符。
var value = test.substring(test.indexOf("=")+1,test.length);
console.log(value);
// cookie 用于存储 web 页面的用户的信息；
05处理多个cookie
split() 方法用于把一个字符串分割成字符串数组。
语法
stringObject.split(separator,howmany)
返回值
一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 stringObject 分割成子串创建的。返回的数组中的字串不包括 separator 自身。
但是，如果 separator 是包含子表达式的正则表达式，那么返回的数组中包括与这些子表达式匹配的字串（但不包括与整个正则表达式匹配的文本）。
提示和注释
注释：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。
注释：String.split() 执行的操作与 Array.join 执行的操作是相反的。
06使用第三方的cookie
导入第三方已经封装好的cookie07sessionStorage
sessionStorage 是HTML5新增的一个会话存储对象，用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。本篇主要介绍 sessionStorage(会话存储)的使用方式。包括添加、修改、删除等操作。
存储数据
采用setItem()方法存储
sessionStorage.setItem(‘testKey’,‘这是一个测试的value值’); // 存入一个值
通过属性方式存储
sessionStorage[‘testKey’] = ‘这是一个测试的value值’;
读取数据
通过getItem()方法取值
sessionStorage.getItem(‘testKey’); // => 返回testKey对应的值
通过属性方式取值
sessionStorage[‘testKey’]; // => 这是一个测试的value值
存储Json对象
sessionStorage也可存储Json对象：存储时，通过JSON.stringify()将对象转换为文本格式；读取时，通过JSON.parse()将文本转换回对象。
var userEntity = {
name: ‘tom’,
age: 22
};
// 存储值：将对象转换为Json字符串
sessionStorage.setItem(‘user’, JSON.stringify(userEntity));
// 取值时：把获取到的Json字符串转换回对象
var userJsonStr = sessionStorage.getItem(‘user’);
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom
08localStorage
在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。
localStorage的优势
1、localStorage拓展了cookie的4K限制
2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的
localStorage的局限
1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
5、localStorage不能被爬虫抓取到
localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空
cookie 、sessionStorage与localStorage的区别
09断点续播
断点续播放 就是在你上次断开的那个点再开始播放。
10video事件
提示和注释
提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。
属性
属性 值 描述
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 “autoplay”，则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。
pause() 方法停止（暂停）当前播放的音频或视频。
提示：该方法通常与 play() 方法一起使用。
play() 方法开始播放当前的音频或视频。
提示：该方法通常与 pause() 方法一起使用。
load() 方法从服务器加载数据，并把返回的数据放置到指定的元素中。
提示：使用 controls 属性来显示视频控件 (如：播放，暂停，查找，音量等)。
播放
暂停
重载
11爱奇艺播放列表
12dom节点选择器扩展
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
getXXXByXXX 获取的是动态集合，querySelector获取的是静态集合。
简单的说就是，动态就是选出的元素会随文档改变，静态的不会，取出来之后就和文档的改变无关了。
如果只要一次查找就可得到元素时，首选getXXXByXXX ；
如果需要经过多级查找，才能得到元素时，首选querySelector；
获取元素DOM对象有很多种方法，以前一直在用getElementById和getElementsByTagName等，现在对这些方法和querySelector做一个总结．
常见的获取元素的方法有3种，分别是通过元素ID、通过标签名字和通过类名字来获取。
DOM提供了一个名为getElementById的方法，这个方法将返回一个与之对应id属性的节点对象，它是document对象特有的函数，只能通过其来调用该方法，使用方法如下:document.getElementById(‘idName’);
getElementsByTagName方法返回一个对象数组（准确的说是HTMLCollection集合）,返回元素的顺序是它们在文档中的顺序,传递给 getElementsByTagName() 方法的字符串可以不区分大小写,使用方法如下:document.getElementsByTagName(tagName);
DOM还提供了getElementsByClassName方法来获取指定class名的元素,该方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始), 所以有时使用时要指定下标，使用方法如下:document.getElementsByClassName(‘className’);
querySelector() 方法返回匹配指定 CSS 选择器元素的第一个子元素 。 该方法只返回匹配指定选择器的第一个元素。如果要返回所有匹配元素，需要使用 querySelectorAll() 方法替代．
由于querySelector是按css规范来实现的，所以它传入的字符串中第一个字符不能是数字.
最后再根据查询的资料总结一下：
query选择符选出来的元素及元素数组是静态的，而getElement这种方法选出的元素是动态的。静态的就是说选出的所有元素的数组，不会随着文档操作而改变．
在使用的时候getElement这种方法性能比较好，query选择符则比较方便．
13HTML5DOM组合选择器
①可以通过id获取DOM对象，例如 $("#adom");
②可以通过tagName获取DOM对象，例如 $(“a”);
③可以通过样式名称获取DOM对象，例如 $(".classa");
④可以通过attribute匹配获取DOM对象，例如
("[data-time=2015]");
⑤可以通过层叠组合获取DOM对象，例如 $("#adom .classa");
14data自定义属性
data-* 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。
data-* 属性包括两部分：
属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符
属性值可以是任意字符串
注释：用户代理会完全忽略前缀为 “data-” 的自定义属性。
在jQuery的attr与prop提到过在IE9之前版本中如果使用property不当会造成内存泄露问题，而且关于Attribute和Property的区别也让人十分头痛，在HTML5中添加了data-*的方式来自定义属性，所谓data-*实际上上就是data-前缀加上自定义的属性名，使用这样的结构可以进行数据存放。使用data-可以解决自定义属性混乱无管理的现状。
getAttribute：取得属性；
setAttribute：设置属性；
自定义属性可以通过DOM里面的Element 对象的getAttribute()来获取
获取到对应的节点后，可以通过dataset这个来得到data自定义属性内容,当自定义属性的名称是分割的两个单词用”-”来表示时,获取的时候就按照峰鸵命名法获取。
data-,还可以用来获取节点
15data节点获取
使用querySelector获取节点的方式：
<input data-index=“100”data-index-alie=“123”>
var input1 = document.querySelector(“input[data-index]")
或者具体值
var input1 =
document.querySelector(“input[data-index=‘100’]”)；
使用querySelectorAll去定位的时候，可以获得相同自定义属性的NodeList集合
16data节点获取2
window.function(){
//data选择属性
var li3 =document.querySelectorAll("[data-type] li")
// for(var i=0;i<li3.length;i++){
// console.log(li3[i].innerText);
// }
//混合型
var li2 = document.querySelectorAll(".p12[data-type] li")
for(var i=0;i<li2.length;i++){
console.log(li2[i].innerText);
}
}
17data属性删除
删除自定义属性：
delete input1.dataset.index;//表示删除index这个自定义属性
或者 input1.dataset.index = null
18爱奇艺增强版
19拖放
20自定义拖放