js 技巧（智能社教程温故）

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优先级更高