1.js 中 NaN === NaN 值为false;
2.parseInt("abc") === NaN;（不是数字）
3.tab 纯js 实现。可以给当前循环的元素添加.index 属性。当前序号。
4.操作元素时，不要混合操作 style 或者className,交替操纵容易出现费预知情况，因为js 操作改变的是行内样式，优先级高。
5.对象操作属性 可以用点操作符号 ，也可以用中括号操作。 obj.name === obj['name']; 数组和对象中括号 区别是，对象括号里是字面量（字符串）数组的是序号索引，数字类型。 json 对象也可以通过中括号操作。
6.不固定参数求和；通过arguments 参数 ，循环该参数，求和，返回。
7.取反效果if( true ){ } else{ }
8.js 可以更改任何属性。style.属性 跟标签里一致，除了class外 tagObj.style.className = 'winyh';
9.js 定义一个函数，获取/设置css样式。通过传参。obj(操作对象) name(属性名称) value （属性值）；通过arguments 参数length 属性来判断是 获取还是设置。style 只能操作行间样式，非行间样式需要通过 currentStyle 【getComputedStyle】来获取 obj.currentStyle.width (获取元素宽度) || getComputedStyle(oDiv, null).width oDiv是需要操作的对象。null 第二个参数随意。（浏览器兼容写法：直接判断 oDiv.currentStyle 是不是为真，即浏览器是否支持 ）
function getStyle(obj,name){ if( obj.currentStyle ){ return obj.currentStyle[name] } else { return getComputedStyle(obj,null)[name] } }
//无法获取符合样式，如 background 必须传入 backgroundColor
10.两个相同长度的数组，只需要循环一次。通过 arr[i] arrOther[i] 分别获取当前索引下的值。
11.复合样式 background (background-image background-color ) border 单一样式 width.
12.数组的length 既可以获取也可以设置。如清空数组的值 arr.length = 0; arr = [1,2] arr.push(3,4);
12.split()将指定字符串分割成数组。
13.splice()方法向/从数组中添加/删除项目,然后返回被删除的项目。可以实现删除，添加 和替换功能。操作会改变原数组。
1、删除功能，第一个参数为第一项位置，第二个参数为要删除几个。array.splice(index,num) 。返回值为删除内容（数组）。
2，插入功能，第一个参数（插入位置），第二个参数（0），第三个参数（插入的项）array.splice(index,0,insertValue) 返回值为空数组。
var arr = [1,2,3,4,5]; console.log(arr.splice(1,0,8,9,8), arr); // [1, 8, 9, 8, 2, 3, 4, 5]
3，替换功能，第一个参数（起始位置），第二个参数（删除的项数），第三个参数（插入任意数量的项）array.splice(index,num,insertValue) 返回值为删除内容（数组）
14.数组连接 arr1.concat(arr2)
15.join 数组转字符串，指定字符。
var arr = [1,2,3,4,5]; var str = arr.join(","); console.log(str); // 1,2,3,4,5 字符串
16.数组的sort()方法 ：*只认识字符串。需要对比数字时需要传入回调函数和参数。
arr.sort(function(n1,n2){
/*if(n1<n2){
return -1;
} else if(n1>n2){
return 1;
} else{
return 0;
}*/
return n1 - n2;
});
17.定时器（定时，延时）停止 ( 定时器返回值是;
返回值是一个数字,代表当前是第几个定时器
)
setTimeout(fn, 1000) 延时
setInterval(fn , 1000 ) 每隔多久执行，无限执行。
clearTimeout() clearInterval() 清除定时器。
18.时钟原理。
如果设置的频率是1s 则 定时器会隔一秒后才开始执行，需要立即执行的情况可以把回调函数封装，在定时器后直接执行一次。
function addZero(n){ if(n<10){ return '0'+n; }else{ return ''+n; } } var time = new Date(); minute = time.getMinutes(); addZero(minute);
把当前时间拼接成字符串，（6位）循环页面的六个图片，然后通过 字符串下标操作字符串。str[i] （ie低版本不兼容 换成 str.charAt(i) ） 。更改 oImg[i].src 属性。
var time = new Date(); 获取年 time.getFullYear(); 获取月 time.getMonth()+1; 获取日 time.getDate(); 获取星期几 time.getDay(); 获取时 time.getHours(); 获取分 time.getMinutes(); 获取秒 time.getSeconds();
19.延时提示框效果。多次移入移出时需要清除定时器效果，重置开始定时器。
20.无缝滚动
元素 offsetLeft 属性【对象的直接属性，不在style对象里】 左偏移量。距离浏览器边框，非父元素的偏移量。
1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。
2.offsetWidth属性仅是可读属性，而style.width是可读写的。
3.offsetWidth属性返回值是整数，而style.width的返回值是字符串，并且带有单位。
4.style.width仅能返回以style方式定义的内部样式表的width属性值。
（元素里再获取 oDiv.getElementById("id1“)）
改变元素位置需要先把元素设置成脱离标准文档流。然后通过更改left 属性来改变元素位置。
DOM操作
1.获取所有子节点 obj.childNodes (包含了空的文本节点 文本节点没有style属性) || children 属性 获取所有子节点。但是不包含文本节点。子节点只会取到第一层。
2.nodeType 获取节点类型。nodeType == 1 元素节点 nodeType == 3 是文本节点。
3.parentNode 获取父节点。offsetParent 获取元素第一个有定位的父级。
4.firstChild 第一子节点。 lastChild 最后一个子节点。 firstElementChild firstElementChild 可解决兼容性问题。
5.nextSinling 下一个兄弟（同级）元素 previousSibling 上一个兄弟元素。
操作元素属性方法：点操作，中括号操作，以下方法。
设置元素属性 setAttribute（"class", "winyh"）
获取元素属性 getAttribute("value", ''dfjasfkas");
移除元素属性 removeAttribute("value");
<input value="123" id="btn" />
var btn = document.getElementById('btn');
btn.value = 456;
btn['value'] = 456;
btn.setAttribute('value', 456);
//三种操作属性的方式
6.通过 class 获取元素
document.getElementsByClassName("test");// 返回数组
if (arr[i].className = "test") { ... }
封装函数通过class 获取元素集合。
DOM操作应用
1.创建dom元素 document.createELement("input"); 创建的元素可以给它赋值属性 nInput.value = "123";
2.appendChild();给父元素追加子节点 parent.appendChild(ele);
3.insertBefore();给父节点插入元素。 parent.insertBefore(待插入元素, 在谁之前)；两个参数。
4.removeChild();在父元素里删除子元素。parent.removeChild(childele);
5.文档碎片 var frag = document.createDoumentFragment(); parent.appendChild(frag)// 低浏览器可以提高性能。
DOM操作应用高级
表格快捷操作 tboies() rows() cells() .innerHTML
新增的li 元素。需要先计算基础数据，然后在基础上++自增；
表格搜索：循环，当前元素满足条件时，标记元素，当不满足时，清空标记。
忽略大小写 可以把比对的两个元素都转换成大写或者小写。
模糊搜索：字符串的search()函数
多关键字搜索，切割搜索的字符串，然后循环。
li排序 把元素类数组对象 循环存入 创建的 Array数组。appendChild()会把子元素先从原来的元素里删除，再插入新父元素中。
图片或者logo 效果淡入淡出效果是：更改图片透明度。opacity:0.3; /*兼容IEde 写法*/filter:Alpha(opacity=50)；定时器修改opacity值完成渐变效果。
像素 如果有小数，浏览器渲染时直接取整数，没有四舍五入的过程。Math 向上取整和向下取值整不会考虑四舍五入。直接向上或者向下取整。
JS运动
分享到动画功能：
缓冲动画：动画速度和目标距离是成正比的。不要忘了速度取整。速度需要除以一个缓冲系数。
匀速运动：当剩余距离小于运动速度时，默认为到达了。Math.abs()，最后让left值等于目标值;
重复点击速度加快的问题：因为开启了多个定时器，点击时需要清除定时器，保持每次只有一个定时器在运行。
多物体运动时：让每个运动对象都有定时器。清除时清除对应的定时器。不要公用相关变量。
逐渐显示：从上到下显示，可以初始给高度值为0；然后缓冲增加到指定高度。
opaticy style赋值时 0.3 给 30
链式运动：
scrollTop scrollLeft 滚动条的距离
JS事件对象
e.clientX e.clientY 可视区里鼠标坐标 （绝对坐标需要 + scrollTop + scrollLeft） e.keyCode 按键码
防止拖出可视区：方法
oncontextmenu 事件（鼠标右键）
document.oncontextmenu = function(){ return false;//阻止默认事件，避免右键弹出 }
阻止默认时间来实现输入值只可以输入数字（监听keydown事件，判断keyCode 码是否是数字键所属的码，以及删除功能的码 ，如果不是return false 阻止默认事件，阻止输入，按键无效）
拖拽
1.计算拖拽边缘限制运动范围 ::距离不变
2.不能拖出某个对象原理
3.磁性吸附 （判断距离给一个差值）
4.setCapture() 事件捕获。
5.带框的拖拽虚框
6.自定义滚动条 控制div宽高
window.onload = function(){ var oDiv = document.querySelector(".container"); var disX = disY =null; oDiv.onmousedown = function (ev) { e = ev || event; disX = e.clientX - oDiv.offsetLeft; disY = e.clientY - oDiv.offsetTop; document.onmousemove = function (e){ var l = e.clientX - disX;//物体位置 var t = e.clientY - disY;//物体位置 if(l<0){ l = 0; } else if(l>document.documentElement.clientWidth - oDiv.offsetWidth){ l = document.documentElement.clientWidth - oDiv.offsetWidth } if(t<0){ t = 0; } else if(t>document.documentElement.clientHeight - oDiv.offsetHeight){ t = document.documentElement.clientHeight - oDiv.offsetHeight; } oDiv.style.left = l + 'px'; oDiv.style.top = t + 'px'; console.log(e.clientX, e.clientY); } document.onmouseup = function (e){ document.onmousemove = null; document.onmouseup = null; } } }
事件绑定：attachEvent()---带on onclick addEventListener()
if( oBtn.attachEvent ){ ... }
自定义滚动条
BOM应用
1.window.open(url)；window.close();只能关闭open方法打开的窗口。用户打开的关闭会有兼容问题
2.document.write()会先清空后写入
3.每一个新打开的窗口都有window对象
4.window.location 当前页面地址。
5.window.navigator.agent (对象包含有关访问者浏览器的信息);
6.可视区 （窗口改变时 可视区尺寸会变化 window.document.clientHeight/Width） 可视区离文档顶部距离（scrollTop 也是滚动距离 document.cocumentElement.scrollTop || document.body.scrollTop）快速回到顶部功能就是让scrollTop属性赋值为0
7.document.cookie 大小限制 4k 时间过期之前一直存在。同一个网站共享同一套cookie. 给cookie 赋值多次不会覆盖，而是添加。
设置过期时间：计算14天后星期几
var odate = new Date(); oDate.steDate(oDate.getDate+14); document.cookie = "user=winyh;expires="+oDate
获取cookie 字符串通过 split(“；”)分割；删除cookie 可以直接给过期时间 -1天。
用cookie记住用户名： 提交用户名时 先设置cookie 然后在 页面加载时获取cookie ，赋值给表单输入框。
Ajax
window.onload = function(){ //1.创建ajax 对象 if( window.XMLHttpRequest ){ var oAjax = new XMLHttpRequest(); } else { var oAjax = new ActiveXObject("Microsoft.XMLHTTP"); } //2.链接服务器 //open(方法, 文件地址 , 同异步(布尔值)) oAjax.open("get", "url" , true); //3.发送请求 oAjax.send(); //4.接受返回 oAjax.onreadystatechange = function(){ // readyState 与服务器交互到哪一步了 if( oAjax.readyState == 4 ){ //状态码 请求成功还是失败 if(oAjax.status == 200){ console.log(oAjax.resposeText); } else { console.log(oAjax.status); } } } }
// 可以封装函数，将成功和失败的语句封装成成功的函数，失败的函数。将状态或者数据的当作参数传入 封装的处理 函数。
function sentAjax(url, success, fail){ if( window.XMLHttpRequest ){ var oAjax = new XMLHttpRequest(); } else { var oAjax = new ActiveXObject("Microsoft.XMLHTTP"); } oAjax.open("get", url , true); oAjax.send(); oAjax.onreadystatechange = function(){ if( oAjax.readyState == 4 ){ if(oAjax.status == 200){ success(oAjax.resposeText); } else { //当传入失败的回调函数时才执行 if(fail){ fail(oAjax.status); } } } } }
面向对象
抽象
封装
继承
属性和方法
this 指向当前事件发生的对象，当前方法属于谁。
尽量避免在系统对象上定义方法和属性。否则会覆盖、
构造函数 首字母大写，函数内部变量赋值一个 new Object() 然后在对象上添加属性和方法。最后返回 定义的对象。（工厂方式）非设计模式--函数重复，新建很多对象后资源浪费，
var oDiv = document.querySelector(".container"); var disX = disY =null; oDiv.onmousedown = function (ev) { e = ev || event; disX = e.clientX - oDiv.offsetLeft; disY = e.clientY - oDiv.offsetTop; document.onmousemove = function (e){ oDiv.style.left = e.clientX - disX + 'px'; oDiv.style.top = e.clientY - disY + 'px'; console.log(e.clientX, e.clientY); } document.onmouseup = function (e){ document.onmousemove = null; document.onmouseup = null; } }
鼠标跟随效果：
引用没有定义的变量---报错
引用没有定义的属性---underfind
body元素没有内部元素时撑不起来
正则
使用 console.time() 和 console.timeEnd() 来标记循环耗时
console.time('Timer1');
var items = [];
for(var i = 0; i < 100000; i++){
items.push({index: i});
}
console.timeEnd('Timer1');
//这个对象是一个函数 function fn() { return 20; } console.log(fn + 10); console.log(fn + 'hello'); fn.toString = function() { return 10; } console.log(fn + 10); console.log(fn + 'hello'); fn.valueOf = function() { return 5; } console.log(fn + 10); console.log(fn + 'hello'); // 输出结果分别是多少？ function fn() { return 20; }10 function fn() { return 20; }hello 20 10hello 15 5hello
当函数fn用+连接一个字符串或者是数字的时候，如果我们没有重新定义valueOf和toString，其隐式转换会调用默认的toString()方法，将函数本身内容作为字符串返回；
如果我们自己重新定义toString/valueOf方法，那么其转换会按照我们的定义来，其中valueOf比toString优先级更高