在firebug中，如果console.log不能在控制台使用，禁用firebug，直接用自带的就可以了。
--------------------------------------------
注意:
1.设置类名的时候，应该用className
2.设置lable下的for属性的时候，应该用htmlFor
--------------------------------------------
标准浏览器不支持在行间的自定义属性，通过JS在<script>标签中自定义的属性所有浏览器都支持。
--------------------------------------------
两个数求余数的时候第一个数是负数的时候余数为负，第一个为正的时候余数为正
--------------------------------------------
获取/设置元素浮动的兼容写法：
oDiv.style.styleFloat = 'right'; // IE
oDiv.style.cssFloat = 'left'; // 非IE
--------------------------------------------
//toFixed()中的参数就是需要取的小数位数，0表示不留小数点
var num=3.1415926
console.log(num.toFixed(2)); //输出3.14
--------------------------------------------
样式优先级：
*<标签<class<ID<行间
如果使用JS修改了style的话，就不要在为它添加className，因为行间样式的优先级更高。
--------------------------------------------
return后面的代码不会执行
--------------------------------------------
栈使用的是一级缓存， 他们通常都是被调用时处于存储空间中，调用完毕立即释放。
堆则是存放在二级缓存中，生命周期由虚拟机的垃圾回收算法来决定（并不是一旦成为孤儿对象就能被回收）。所以调用这些对象的速度要相对来得低一些。
堆存取数据的方式，则与书架与书非常相似。
栈中存取数据的方式和乒乓球的存放方式相似。
--------------------------------------------
设置定时器时可以把它赋给 要设置定时器的物体的自定义属性，这样便于封装函数
oDiv.timer = setInterval ( function () { ...... } ,1000 );
clearInterval = （oDiv.timer）
--------------------------------------------
var EndTime= new Date('2017/04/04 00:00:00');
var EndTime= new Date(2017,3,4);
new Date(2017,3,4) == new Date('2017/04/04 00:00:00')；
--------------------------------------------
++运算符和其他运算符结合在一起使用的时候（++放在变量后面）先赋值 后自增。
++运算符和其他运算符结合在一起使用的时候（++放在变量前面）先自增 后赋值。
var a=10;
var b=a++; // b-->10 a-->11
var b=++a; // b-->11 a-->11
alert(a);
alert(b);
--------------------------------------------
null表示"没有对象"，即该处不应该有值，转为数值时为0。典型用法是：
（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。
Object.getPrototypeOf(Object.prototype)
// null
undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义，转为数值时为NaN。典型用法是：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
--------------------------------------------
事件委托中的事件源：不管在那个事件中，当前操作的那个元素就是事件源
//ie : window.event.srcElement 标准下 ：event.target
//nodeName : 找到当前元素的标签名【返回值都是大写的，需转一下】
oUl.onmouseover = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = 'red';
}
};
--------------------------------------------
onmouseover onmouseout 不论鼠标指针穿过被选元素或其子元素时都会触发
onmouseenter onmouseleave 只有在鼠标指针穿过被选元素时才会触发
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
js中的DOM操作汇总
一、DOM创建
var oDiv = document.createElement('div');
var oTxt = document.createTextNode('hello world!');
var oFrag = document.createDocumentFragment();
--------------------------------------------
二、DOM查询
【获取元素】
var el = document.getElementById('xxx');
var els = document.getElementsByClassName('highlight');
var els = document.getElementsByTagName('td');
var els = document.getElementsByName('age');
// 返回当前文档中第一个类名为 "myclass" 的元素
var el = document.querySelector(".myclass");
// 返回一个文档中所有的class为"note"或者 "alert"的div元素
var els = document.querySelectorAll("div.note, div.alert");
//getElementById 只能由document来调用。
var a = document.getElementById('box');
var b = aDiv.getElementsByTagName('input');
--------------------------------------------
【获取父元素、父节点】
ele.parentNode;
ele.offsetParent;
//只读，找到最近的有定位的父节点。没有定位父级时，默认是body;但在IE7以下，如果当前元素没有定位属性，返回body，如果有，返回HTML;如果当前元素某个父级触发了haslayout，则返回触发了haslayout这个元素。
--------------------------------------------
【获取子节点，子节点可以是任何一种节点，可以通过nodeType来判断】
//标准下、非标准下都只含元素类型
var nodes = ele.children;
//非标准下：只包含元素类型。
//标准下：包含元素和文本类型。
var nodes = ele.childNodes;
--------------------------------------------
【获取元素属性列表】
var attr = ele.attributes;
【获取子元素】
var els = ele.getElementsByTagName('td');
var els = ele.getElementsByClassName('highlight');
【获取指定元素的第一个/最后一个子节点】
var ele = ele.firstElementChild || ele.firstChild;
var ele = ele.lastElementChild || ele.lastChild;
【获取指定元素的上/下一个兄弟节点】
var el = ele.nextElementSibling || ele.nextSibling ;
var el = ele.previousElementSibling || ele.previousSibling ;
--------------------------------------------
三、DOM更改
【添加、删除子元素】
//父级.appendChild(要添加的元素) 方法 *先把元素从原有的父级上删除;再添加到新的父级*
oUl.appendChild( oLi );
//父级.removeChild(节点) *删除一个节点*
oUl.removeChild( oLi );
【替换子元素】
//父级.replaceChild(新节点，被替换节点) *替换子节点*
oDiv.replaceChild(oP,oStrong);
【插入子元素】
//insertBefore(节点, 原有节点) *在已有元素前插入*
oUl.insertBefore( oLi, oUl.children[0] );
【克隆元素】
ele.cloneNode(true)
//该参数指示被复制的节点是否包括原节点的所有属性和子节点
--------------------------------------------
四、属性操作
// 获取一个 {key,value} 的数组
var attrs = el.attributes;
//元素.removeAttribute(属性名称); *移除指定的元素的指定的属性*
oText.removeAttribute( 'value' );
//元素.setAttribute(属性名称，属性值); *给指定元素指定的属性设置值*
oText.setAttribute( 'value', 'hello' );
//元素.getAttribute(属性名称，属性值); *获取指定元素的属性值*
oText.getAttribute( 'value' );
// 是否有属性设置
el.hasAttributes('class');
--------------------------------------------
表格的简写：
getElementsByTagName('tbody')[0] --> tBodies[0]
getElementsByTagName('tr')[1] --> .rows[1]
getElementsByTagName('td')[1] --> .cells[1]
--------------------------------------------
arguments: 是一个对象,存在于每个函数里面,代表是函数实参的集合
==============2017-5-2==============
1、目前学过的获取元素的方式有哪些？区别？
document.getElementById('id名');
父级一定是document，获取出来的是一个
父级.getELementsByTagName('标签名');
父级可以随便，获取出来的是一组，哪怕是一个也是一组
父级.getELementsByClassName('class名');
高级浏览器
父级.getELementsByName('name名');
在IE中IE9（包括）只能获取表单元素
父级.querySelector('选择器');
获取的是一个元素,兼容性iE8以下
父级.querySelectorAll('选择器');
获取的是一组元素 ,兼容性iE8以下
父级.children
获取的是第一层的所有子级
父级.childNode (扩展)
获取的是包含文本节点
子级.parentNode
获取的结构父级 最高级是document 在往上是null
子级.offsetParent
获取定位的父级 最高级是body 再网上是null
上一个兄弟节点
obj.previousElementSibling 高级浏览器
obj.previousSibling IE低版本
obj.previousElementSibling || obj.previousSibling
下一个兄弟节点
obj.nextElementSibling 高级浏览器
obj.nextSibling IE低版本
第一个子元素
obj.firstChild
obj.firstELementChild
最后一个子节点
obj.lastChild
obj.lastELementChild
2、Js里面操作属性的方式有哪些？分别有什么特点？
. []
操作的是已有的属性
attribute
可以操作自定义属性【data-set】
注：别混着用
3、Js中常见的变量的类型有哪些？
string
number
NaN
boolean
undefined
function
object
null
基本数据类型
不可拆分
复合数据类型
4、字符串如何转化成数字？并写出几种转化的区别
显示类型转换
parseInt 从左往右开始查看，如果遇到不是数字的就跳出（终止），并且不认.
1 ---- 1
0.1 --- 0
0.1a--- 0
a0.1--- NaN
parseFloat
1 --- 1
0.1 --- 0.1
0.1a--- 0.1
a0.1--- NaN
Number 只要有一个不是数字就跳出
1 --- 1
0.1 --- 0.1
0.1a--- NaN
a0.1--- NaN
隐式类型转换
- / % *
5、写一个获取非行间样式的函数？
getStyle(obj,name)
function getStyle(obj,name){
return (obj.currentStyle || getComputedStyle(obj,false))[name];
}
6、封装一个n,m的一个随机数函数？ 前包后不包
function rnd(n,m){
return Math.floor(Math.random()*(m-n)+n);
}
7、什么是真？什么是假？
0 false NaN null 空字符串 undefined
8、把时间调到今年的五一，写出实现代码？
var oDate=new Date();
oDate.setMonth(4,1);
oDate.setHours(0,0,0,0);
8、设置日期为上一个月的最后一天：
var d = new Date();
d.setMonth(d.getMonth(),0);
9、封装一个求和的函数？用法如下：eg: sum(1,2,3,4,5)
function sum(){
var res=0;
for(var i=0;i<arguments.length;i++){
res+=arguments[i]
}
return res;
}
10、截取扩展名的代码实现？eg:a.b.c.txt- txt
var str='a.b.c.txt';
str.substring(str.lastIndexOf('.')+1);
var arr=str.split('.')
arr[arr.length-1];
11、字符串转数组，以及数组转字符串如何实现？
str.split() 字符串转数组
arr.join() 数组转字符串
12、如何实现一个字符串翻转？ eg:‘Welcome to ZhiNengShe!’->‘ZhiNengShe to Welcome’
var str='Welcome to ZhiNengShe!';
var arr=str.split(' ');
arr.reverse();
var res=arr.join(' ');
13、如何判断一个浏览器是不是IE6？
navigator.userAgent.indexOf('MSIE 6.0');
14、如何清空一个数组？(至少两种办法)；
a) arr.length=0;
b) for(var i=0;i<arr.length;i++){
arr.pop();
i--
}
c)while(arr.length>0){
arr.pop()
}
15、获取本月的第一天是周几？本月有多少天？请写出代码实现。
1）var oDate=new Date();
oDate.setDate(1);
oDate.getDay();
2）var d = new Date();
var curMonthDays = new Date(d.getFullYear(), (d.getMonth()+1), 0).getDate();
alert("本月共有 "+ curMonthDays +" 天");
//d.getMonth()+1代表下个月，月份索引从0开始，即当前月为6月时，getMonth()返回值为5，创建日期时同理
//此处构造的日期为下个月的第0天，天数索引从1开始，第0天即代表上个月的最后一天
16、实现 welcome to zhinengshe 字符串首字母大写？
var str='welcome to zhinengshe';
var arr=str.split(' ');
var res='';
for(var i=0;i<arr.length;i++){
var str1=arr[i].charAt(0).toUpperCase()+arr[i].substring(1);
res+=str1+' ';
}
17、描述下事件，事件对象，事件冒泡，事件绑定，事件委托，事件捕获的含义？
1、事件：用户的操作
2、事件对象：描述事件详细信息的内容
3、事件冒泡：事件流的一种，子级触发事件后，此事件会继续向上传递，如果父级有相同事件则触发，没有继续向上，直到document
4、事件绑定：添加事件的一种方法，主要解决同一个元素加相同事件的冲突问题
5、事件委托：把事件委托给父级（不一定是直接父级），原理是事件冒泡，解决给未来元素加事件的问题
6、事件捕获：又叫事件下沉，也是事件流的一种，子级触发事件后，先从documen开始，如果发现子级有相同事件则触发，没有向下传递，直到事件源本身触发事件
18、事件绑定兼容的写法？以及解除事件绑定的写法？
addEvent(obj,事件,fn)
removeEvent(obj,事件,fn)
function addEvent(obj,type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn,false);
}else{
obj.attachEvent('on'+type,fn);
}
}
function removeEvent(obj,type,fn){
if(obj.removeEventListener){
obj.removeEventListener(type,fn,false);
}else{
obj.detachEvent('on'+type,fn);
}
}
19. 事件委托的实现方式
事件加给父元素
var oSrc=ev.srcElement || ev.target;
if(oSrc.tagName='LI'){ //tagName获取出来的是大写
。。。。
}
20、this出现问题的情况有哪些？至少列出3种？
1、只要在函数里多包一层，this就指向window
2、定时器里，也是类似多包一层 this就指向window
3、事件绑定attachEvent() this就指向window
21、滚轮事件的写法，以及如何区分滚动的方向？
onmousewheel 非火狐
DOMMousrScroll 狐火
if (navigator.userAgent.indexOf('Firefox') != -1) {
addEvent(oImg,'DOMMouseScroll',fn);
} else {
oImg.onmousewheel = fn;
}
fn(ev){
if (oEvent.wheelDelta) {
if (oEvent.wheelDelta > 0) { //chrome
up = true; //向上滚
} else {
up = false; //向下滚
}
} else {
if (oEvent.detail > 0) { // Firefox
up = false; //向下
} else {
up = true; //向上
}
}
})
24. 如何创建，添加，删除,克隆节点？
document.createElement('元素名');
父级.appendChild(子级)
父级.insertBefore(把谁，插入到谁之前);
父级.removeChild(子级)
obj.cloneNode()
深度克隆obj.cloneNode(true)
25. 如何获取按键的键码，以及ctrl，alt，shift键的写法？
obj.onkeyup=function(ev){
var oEvent=ev||event;
oEvent.keyCode
}
a 65
1 49
回车 13
删除（到退） 8
空格 32
左上右下 37 38 39 40
注：组合键不能用，想要用组合键要配合oEvent.shiftKey,oEvent.ctrlKey,oEvent.altKey
27. js的由哪些部分构成？并解释每一部分的含义？
ECMAScript 核心解释器 解释语法
DOM 文档对象模型 操作页面
BOM 浏览器对象模型 操作浏览器
30. 如何获取当前url的地址？ 并且修改成百度的网址
window.location.href;
window.location.href='http://www.baidu.com'
跳转网页:
a链接
window.location.href=XXX
31. 封装一个函数，求出物体的绝对位置？
function getPos(obj){
var l=0;
var t=0;
while(obj){
l+=obj.offsetLeft;
t+=obj.offsetTop;
obj=obj.offsetParent;
}
return {left:l,top:t}
}
getPos(oDiv).left
32. 获取可视区的宽、高的写法？滚动条纵向的距离，以及横向的距离？
docuement.documentElement.clientHeight
docuement.documentElement.scrollTop || document.body.scrollTop;
33. 物体的信息：获取宽度，高度，距离左边的距离，距离上面的距离？
offsetWidth
offsetHeight
offsetLeft
offsetTop
scrollHeight
scrollWidth
--------------
插件
swiper
专门做轮播图的插件
echarts
专门做图表统计图
ueditor
专门做富文本编辑器
iscroll/fullpage
专门做滚动
有两层，外层相对定位，给宽高。
内层绝对定位
layer
专门做弹框
hammer
专门做手势
zepto
移动端的jquery，但是比他小（很多功能需要下载）
-----------------------
1、 (funtion(){
....
})()
2、事件绑定
3、命名空间
var XM={};
XM.index={};
XM.list={};
XM.common={};
XM.common.rnd=function(){
var a=123;
}
XM.common.getStyle=function(){
var a=123;
}
XM.common.getStyle()
======================================
原生获取样式：
.style
获取行间
有px
是string
display：none 的时候可以获取
getStyle
都可以
有px
是string
display：none 的时候可以获取
offset
都可以
没用px
是number
display：none 的时候不可以获取
获取的是盒子模型的宽度
====================================