w一：rem布局公式
document.documentElement.style.fontSize=20*document.documentElement.clientWidth/30
二：WEB标准
结构 表现 行为分离
三：样式层级排序
！important>id>class>标签>*
四：网页解析顺序
html css js
五：改变定时器中this全局变量的指向：
箭头函数(this指向是固定的,普通函数this应该指向全局对象window，但是，箭头函数导致this总是指向函数定义生效时所在的对象)
六：js批量修改样式
1：setStyle(element, {width: '200px', background: 'red'});
2:element.style.cssText="width: 200px; height:300px; background:yellow"
3：with(element.style)
{
width='300px';
height='500px';
background='yellow';
}
七：获取非行间样式
1：获取非行间css样式
function getStyle(obj,attr){ //获取非行间样式，obj是对象，attr是值
if(obj.currentStyle){ //针对ie获取非行间样式
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr]; //针对非ie
};
};
2：为对象写入css样式
function css(obj,attr,value){ //对象，样式，值。传2个参数的时候为获取样式，3个是设置样式
if(arguments.length == 2){ //arguments参数数组，当参数数组长度为2时表示获取css样式
returngetStyle(obj,attr); //返回对象的非行间样式用上面的getStyle函数
}
else{
if(arguments.length == 3){ //当传三个参数的时候为设置对象的某个值
obj.style[attr] = value;
};
};
};
八：math()中常用方法
1：math.ceil() 向上取整
2：math.floor() 向下取整
3：math.round() 四舍五入为最接近的数
4：math.random() 0-1之间的随机数
5：math.abs() 返回绝对值
6：math.parseInt() 保留整数部分
7：math.sqrt() 返回平方根
8：math.max(x,y) 返回最大值
9：math.min(x,y) 返回最小值
10：toSource() 返回对象的源代码
11：valueOf() 返回对象的原始值
12：log(x) 返回数的自然对数
13：pow(x,y) x的y次幂
九：字符串常用方法
1：charAt() 返回指定位置的字符
2：concat() 合并字符串
3：substr(a,length) 截取包含a之后的length个长度的字符串
4：indexof() 返回某个值在字符串中首次出现的位置 没有出现返回-1
5：lastIndexof() 返回某个值在字符串中最后一出现的位置
6：tolowercase() 字符串转化为小写
7：touppercase() 字符串转化为大写
8：split() 字符串转化为数组
9：length() 返回字符串的长度
10：equals() 比较两个字符串是否相等
11：replace("被替换的"，"替换的") 替换字符串中的值
12：trim() 去掉字符串收尾空格
十：数组中常用方法
1：push() 尾部添加-----pop() 尾部删除
2：unshift() 头部添加----shift() 头部删除
3：reverse() 颠倒顺序
4：concat() 合并数组
5：join() 数组转字符串
6：sort() 按照字母表顺序排序
传入函数按数值大小排序：arr.sort(function(a,b){return a-b})
7：slice(a,b) 从包括下标a截取到不包括下标b
slice(index) index后面全部截取
8： splice(a,b) 从a开始截取b个
splice(a,b,c) 从下标a开始删除b个 把c加进去
splice(index) index后面全部截取
十一：js中分号用法
事件函数结束要加分号
十二：关于return
1：事件中调用函数时用return返回值实际上是对window.event.returnvalue进行设置。
2:：该值决定了当前操作是否继续。
当返回的是true时，将继续操作。
当返回是false时，将中断操作。
3：return 主要是用来封装函数
4：如果函数没有返回值 则返回undefined
5：return false---- 可以阻止事件冒泡和默认事件 阻止回调函数并立即返回
十三：计时器
1.倒计定时器：timename=setTimeout("function();",delaytime);
2.循环定时器：timename=setInterval("function();",delaytime);
3：倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件（模拟循环），两者的区别在于：前者只是作用一次，而后者则不停地作用。
4：clearTimeout(计时器名) 清除已设置的setTimeout对象
clearInterval(计时器名) 清除已设置的setInterval对象
十四：switch语句中break和continue用法
1：break用于跳出循环
2：continue用于跳过循环中的一个迭代继续执行后面
3：switch语句适用于离散式值 if else()适用于区间式判断
十五：循环语句
1：for (var i=开始值;i<=结束值;i++) {}
2：while()
3：forEach()与map()类似
constdata=[1,2,3,4,5,6];
data.map(function(value,index,arr) {
console.log(value); //1,2,3,4,5,6
})
在循环中，有时候我们急需跳出整个循环或某一次的循环语句不进行执行，这时我们需要用到break语句和continue语句。这两个语句都存在于循环语句中，前者终止整个循环，后者阻止某次循环的执行
十六：三目运算
b?x:y 如果b条件成立 执行x 否则执行y
十七：js中什么是真什么是假
1：哪些地方会进行真假判断
if() else if() switch() while() for() && || 等
2：真（true）
非零数字 非空字符串 函数 能找到的元素（空数组[]和空json{}也为真）
3：假（false）
0 NAN 空字符串 null 未定义 找不到的元素
十八：ES6之前的数据类型
number string object function null undefined symbol
十九：检测数据类型方法
typeof():返回数据类型的字符串
a isinstanceof (b) :深度检测 a是不是b的实例对象
二十：undefined出现的情况
1：函数没有返回值
2：访问一个不存在的属性’
3：声明未赋值
4：函数传参无值
二十一：undefined not defined null
1:undefined未定义
2：not defined ：压根没有这个元素
3：null 空指针
二十二：隐式转换
1：字符串和数字相加 数字转字符串
2：数字字符串相减，字符串转成数字。如果字符串不是纯数字就会转成NaN。两个字符串相减也先转成数字。
3：==也会发生隐式转换
.undefined==null true
.字符串和数字比较时，字符串转数字
.数字为布尔比较时，布尔转数字
.字符串和布尔比较时，两者转数字
二十三：严格模式（"use strict"）
好处：
-消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
- 消除代码运行的一些不安全之处，保证代码运行的安全；
- 提高编译器效率，增加运行速度；
- 为未来新版本的Javascript做好铺垫。
二十四：js预解析
1：js预解析是什么：在当前作用域下 js运行之前会把带有var function关键字的事先声明 从上到下执行js代码
2：js会对什么进行预解析
var后面的变量 函数 函数传参的变量
3：通过var关键字定义的变量进行预解析的时候,都是声明(declear),不管它有没有赋值,此时都会赋值为undefined 凡是传参 直接赋值传参
4：function进行预解析的时候,声明且定义了,但他存储的数据的那个空间是代码即字符串
5：预解析中想实现立即执行的函数,放把这段函数到()里面自执行
6：js在什么情况下会进行预解析
遇到script标签对时
遇到函数时:因为变量是有作用域的
二十五：this问题
1：计时器中不可以用this 此时this指向window
---解决办法：1-在定时器外给this存储在一个变量中 定时器内指向变量
2-箭头函数（改变this指向）
2：行间不能嵌套this
3：事件中嵌套一层函数不能用this
4：attachEvent()事件中不能用
二十六：i的问题
1：循环中加事件 事件中不能用i
2：循环中加计时器 计时器中不能i
解决办法--：1-自定义属性（低级浏览器不能用 因为第一次加载时会把自定义属性过掉）
2-封闭空间 （自执行函数）
二十七：select中option的增删改查
1：添加一个选项
var obj=document.getElementById('mySelect');
obj.add(new Option("文本","值")); //这个只能在IE中有效
obj.options.add(new Option("text","value")); //这个兼容IE与firefox
}
2：删除一个选项
index,要删除选项的序号，这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}
3：获取
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index].text;
4：修改
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index]=new Option("新文本","新值");
二十八：将json字符串解析成json数据格式方法
1：var dataObj=eval("("+data+")");
2;data =(new Function("","return "+json))();
二十九：js DOM事件
onscroll onresize ondbclick onmousemove onmouseover onmouseout onmouseenter onmouseleave onkeyup onkeydown onkeypress onchange onfocus onerror onload oncontextmenu onmousewheel
三十：onmousemove out和onmouseenter leave区别
前一组支持时间冒泡 后一组不支持事件冒泡
fromElement :对于mouseover和mouseout事件 引用移出鼠标的元素
toElement:对于mouseover和mouseout事件 引用移入鼠标的元素
三十一：事件中兼容性写法
var event=event||window.event
1：事件绑定移除
高级浏览器：element.addEventListner(type callback false) removeEvent()
IE8一下:element.attachEvent("on"+type,callback)
detachEvent()
2:事件源(兼容火狐)
vartarget=event.target||event.srcElement;
3：阻止事件冒泡
IE8下：event.cancelBubble=true
高级浏览器：event.stopprogration()
4:阻止默认事件
IE8下：event.returnValue=false
高级：event.preventDefault()
三十二：事件捕获
setCapture 可以捕获到 移动到浏览器外的鼠标事件。
IE:
obj.SetCapture()
obj.releaseCapture()
如果要兼容ff :
window.captureEvents(Event.mousemove|Event.mouseuop);
window.releaseEvents(Event.mousemoveE|Event.mouseup);
三十三：js原生中事件委托
通过找到事件源 判断事件源的nodeName.toLowerCase()是不是想让他发生事件的元素 是的话执行
oUl.onmouseover =function(ev)
{var ev = ev ||window.event;
var target = ev.target||ev.srcElement;
if(target.nodeName.toLowerCase() =="li")
{target.style.background ="red";}
三十四：判断浏览器信息（userAgent）
function myBrowser(){
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1;
if (isOpera) {
return "Opera"
}; //判断是否Opera浏览器
if (userAgent.indexOf("Firefox") > -1) {
return "FF";
} //判断是否Firefox浏览器
if (userAgent.indexOf("Chrome") > -1){
return "Chrome";
}
if (userAgent.indexOf("Safari") > -1) {
return "Safari";
} //判断是否Safari浏览器
if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
return "IE";
}; //判断是否IE浏览器
}
三十五：存储方式（见简书前面章节）
三十六：性能优化方法（见简书前面章节）
三十七：异步加载js
1:script标签对中 async=true
2::script标签对中 defer属性
三十八：滚轮事件
1：包括IE6 谷歌在内的浏览器是使用onmousewheel，而FireFox浏览器一个人使用DOMMouseScroll
2：事件绑定：
document.body.onmousewheel= function(event)
{ event = event || window.event; };
document.body.addEventListener("DOMMouseScroll", function(event)
{ event = event || window.event;); //必须写在事件绑定内
3：绑定滚轮方向
IE 谷歌：if(event.wheelDelta>0/<0){}
Firefox：if(event.detail>0/<0){}
三十九：距离的获取：
1、在文档（document）对象里面用：
scrollWidth/Height:获取对象的滚动宽度(滚动条可以滚动的宽度，相当于整个页面的总宽度的样子--网页正文全宽)
scrollLeft/Top:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离（页面利用滚动条滚动到右边时，隐藏在滚动条左边的页面宽度---页面被卷去左边）
2、在节点对象里面用：
offsetLeft/Top:获取对象相对于版面（css里面没有进行定位，则offsetParent取值为根元素进行计算）或由 offsetParent 属性指定的父坐标的计算左侧位置（当有css定位时，当前对象相对与offsetParent元素的距离）
offsetWidth/Height (width+padding+border)
获取当前对象的宽度。
style.width也是当前对象的宽度(width+padding+border)。
区别：1)style.width返回值除了数字外还带有单位px；
2)如对象的宽度设定值为百分比宽度,则无论页面变大还是变小，style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值；
3)如果没有给 HTML 元素指定过 width样式，则 style.width 返回的是空字符串；
offsetLeft :
当前对象到其上级层左边的距离。
不能对其进行赋值.设置对象到其上级层左边的距离请用style.left属性。
style.left当前对象到其上级层左边的距离。
区别：1)style.left返回值除了数字外还带有单位px；
2)如对象到其上级层左边的距离设定值为百分比，style.left返回此百分比,而offsetLeft则返回到其上级层左边的距离的值；
3)如果没有给 HTML 元素指定过 left样式，则 style.left返回的是空字符串；
注意：如果上级层为body，由于IE、FF对padding、margin的解释不一样所以要明确规定处理不是下列的区别就不成立了。
IE 1)如果Div的上级层是body，而div与body之间有个div，如body->div->divo；divo的offsetTop=div的padding+margin+boder；
2）如果Div的上级层是body，如body>divo；divo的offsetTop=div的padding+margin+boder；
这divo的offsetTop=divo的margin >body.padding则为divo的margin，否则为body.padding谁大是谁？
FF 上述两种情况：offsetTop=margin+padding ;
(IE与FF中的body默认padding为10)在IE6.0 FF3.6.13
clientWidth/Height:
获取对象可见内容的宽度，不包括滚动条，不包括边框；
clientLeft/Top:
获取对象的border宽度
3、事件里面用的：
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
4、屏幕的：
window.screenTop 网页正文部分上
window.screenLfet 网页正文部分左
window.screen.height 屏幕分辨律的高
window.screen.left 屏幕分辨律的宽
window.screen.availHeight 屏幕可用工作区的高度
window.screen.availWidth 屏幕可用工作区的宽度
document.documentElement.scrollTop 垂直方向滚动的值
网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;
getBoundingClientRect()
这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。
alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离
alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离
alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离
alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离
四十：内置对象（本地对象）和宿主对象
1：内置对象
Global 和 Math （它们也是本地对象，根据定义，每个内置对象都是本地对象
2：所有非本地对象都是宿主对象，所有的BOM和DOM对象都是宿主对象，ECMAScript官方未定义的对象都属于宿主对象，因为其未定义的对象大多数是自己通过ECMAScript程序创建的对象。
四十一：补零函数
functionpadLeft(str,lenght){
if(str.length >= lenght)
returnstr;
else
returnpadLeft("0"+str,lenght);
}
functionpadRight(str,lenght){
if(str.length >= lenght)
returnstr;
else
returnpadRight(str+"0",lenght);
}
