HTML5

1.js拖拽效果的原理及实现

电脑上想实现拖拽的效果，采用的是 鼠标事件/Mouse event 中的 鼠标按下/mousedown 和 鼠标松开/mouseup，还有在移动过程中的 鼠标移动/mousemove。
要想完成拖拽效果，需给目标采用 绝对定位/position：absolute,这样在拖拽时改变left和top值才有效。
当鼠标按下鼠标移动的时候，记录移动中的x、y值，那么这个被拖拽的dom的top和left值就是：
top=鼠标按下时记录的dom的top值+（移动中的y值 - 鼠标按下时的y值）
left=鼠标按下时记录的dom的left值+（移动中的x值 - 鼠标按下时的x值）;

2.js常用内置对象及方法

1.Array数组对象
unshift( ) 数组开头增加
shift( ) 数组开头删除一项
push( ) 数组末尾增加
pop( ) 数组末尾删除一项
concat( ) 数组的拼接
splice( ) 数组的增、删、改
slice( ) 数组的截取
reverse( ) 数组翻转
sort( ) 数组排序
toString( ) 数组转字符串
join( ) 拼接
indexOf( ) 查找
forEach( ) 遍历
map( ) 遍历

2.string字符串

charAT（index） 通过索引找字符
charCodeAt（index） 通过索引找到字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。
indexOf（） 从前往后找，找到返回内容的索引，找不到返回-1；
lastIndexOf（） 从后往前找，找到返回内容的索引，找不到返回-1；
slice（n，m） 从索引n 查找到索引m 但不包括m，slice可以取负值
substring（n，m） 从索引n 查找到索引m，但不包括m，不可以取负值
substr（n，m） 从索引n开始截取m 个
split（切割形式） 把一个字符串分割成字符串数组。
toUpperCase（） 转大写字母
toLowerCase（） 转小写字母

3.Math对象

Math.floor（） 向下取整
Math.ceil（） 向上取整
Math.random（） 取0-1之间的随机小数
Math.round（） 四舍五入
Math.abs（） 取绝对值
Math.pow（x，y） x的y次幂
Math.sqrt（） 开平方
Math.max（） 取最大值
Math.min（） 取最小值

4.Date日期对象

new Date（） 创建一个日期对象
getFullYear（） 返回年份
getMonth（） 返回月份数（0-11），想要得到几月，需要加一
getDay（） 返回一周的第几天（0-6）,想要得到星期几，需要加一
getDate（） 返回日
getHours（） 返回时
getMinutes（） 返回分
getSeconds（） 返回秒
getTime（） 返回从1970年1月1日00：00到现在的毫秒数（格林尼治时间），也就是时间戳
setYear(yearInt) 设置年份.2位数或4位数
setFullYear(yearInt) 设置年份.4位数
setMonth(monthInt) 设置月份(0-11)
setDate(dateInt) 设置日(1-31)
setHours(hourInt) 设置小时数(0-23)
setMinutes(minInt) 设置分钟数(0-59)
setSeconds(secInt) 设置秒数(0-59)
setMilliseconds(milliInt) 设置毫秒(0-999)

3.JS获取HTML DOM元素的方法

通过ID获取（getElementById）
通过name属性（getElementsByName）
通过标签名（getElementsByTagName）
通过类名（getElementsByClassName）
获取html的方法（document.documentElement）
获取body的方法（document.body）
通过选择器获取一个元素（querySelector）
通过选择器获取一组元素（querySelectorAll）

4. JS中的位置和宽度：clientWidth、offsetWidth、scrollWidth，clientTop和clientLeft等区别

clientHeight ：
无滚动条：width+padding 数据为宽+padding
有滚动条：width+padding-17 （17为滚动条宽高），数据为宽+padding-滚动条的宽

offsetWidth：
无滚动条：width+padding+border 数据为 宽+padding+边框
有滚动条：width+padding+border 数据为 宽+padding+边框

scrollHeight：
无滚动条：width+padding 数据为 宽+padding
有滚动条：因为目标的内容宽度不同，数据为 实际内容宽度+padding

clientLeft / clientTop：
无定位：数据为 自身边框的宽度
有定位：数据为 自身边框的宽度

offsetLeft / offsetTop：
无定位：数据为 相对页面的左上顶角位置
有定位：数据为 相对父容器左上角位置 和css中left，top相同

scrollLeft / scrollTop：
用法为返回或设置匹配元素的滚动条的垂直位置：元素的scrollHeight-元素的clientHeight

5.js事件监听详解

一、DOM.addEventListener(事件类型，事件回调函数)

给DOM元素添加一个事件监听，只能收到对应事件类型的消息，收到这个消息时，执行事件回调函数
function 事件回调函数（e）{

}
1、事件回调函数有且仅有一个参数e;
2、e是一个事件对象，侦听事件收到消息时获得的事件对象；
3、事件函数不能写return返回值，但是可以用return跳出；

二、事件的侦听和抛发（自定义事件需要向document抛发）

    document.addEventListener("天王盖地虎",anhaoHandler);
     // new Event()指创建一个事件对象
    var  evt=new Event("天王盖地虎");

三、事件传递

    var obj2={
        c:function(){
            obj1.b(10);
        },
        d:function(s){
            console.log(s);
        }
    }
    var obj1={
        a:function(){
            obj2.d(5);
        },
        b:function(sum){
            console.log(sum)
        }
    }

四、事件的三个阶段（捕获，目标，冒泡）

div.addEventListener(事件类型，事件回调函数，是否捕获时执行)
e.stopPtopagation() 停止冒泡；
e.cancelBubble=true; IE8及以下的停止冒泡；

1事件类型：必须是字符串，可以设为任意字符串，但部分字符串是系统事件类型；
2、事件回调函数：指向一个函数，当收到事件时执行函数，若没有收到，则不执行，写侦听事件时不执行；
3、是否捕获时执行：默认值是false，在冒泡时执行，捕获时不执行，若将false设为true，在捕获时执行；

五、事件监听和删除；
div.removeEventListener(“事件类型”，事件的回调函数)；
IE8及以下，div.detachEvent(on+事件类型，事件的回调函数)

六、事件侦听的区别

1、addEventListener: IE8以上支持，事件类型是type，有捕获，冒泡阶段选项；

2、attachEvent: 仅支持IE8及以下，事件类型是on+type,无捕获，冒泡阶段选项；

3、οnclick=函数，任何浏览器都支持，

缺点：同一个事件不能执行多个函数，没有捕获冒泡阶段选项，仅是冒泡阶段，使用的匿名函数，也会造成多个事件不能执行同一个函数；

6. js事件委托详解

将子元素的侦听事件全部委托给最外层的父元素,这种情况叫做事件委托

7.BOM操作常用方法

location.href ：跳转页面，还可以获取当前页面的网址，有历史记录
location.assign() ：跳转页面，有历史记录
location.replace() ：跳转页面，没有历史记录
location.hash ：获取地址栏中#后面的内容，也就是锚点标记名
location.search ：获取地址栏中？后面的内容，？号后面一般是访问地址的参数

history.back() ：历史回退
history.forward() ：前进历史
history.go(1);//跳转到第几个负数是回退，正式是前进，0是刷新页面

console.log(navigator.userAgent) ：获取浏览器信息