tips

• js闭包（以下条件缺一不可）

外层函数返回一个内层函数，内层函数引用了外层函数中定义的一个或多个变量，就形成了闭包。

function test() {
             var name = 'zhangsan';
             var print = function() {
                 alert(name);
             }

             return print;
         }

         var func = test();

• input监听事件总结

1.onfocus 当input 获取到焦点时触发

2.onblur 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候会触发相应的js

3.onchange 当input失去焦点并且它的value值发生变化时触发

4.onkeydown 在 input中有键按住的时候执行一些代码

5.onkeyup 在input中有键抬起的时候触发的事件，在此事件触发之前一定触发了onkeydown事件

6.onclick 主要是用于 input type=button，当被点击时触发此事件

7.onselect 当input里的内容文本被选中后执行一段，只要选择了就会触发，不是非得全部选中

8.oninput 当input的value值发生变化时就会触发，不用等到失去焦点（与onchange的区别）

• 获得计算后的样式

obj.style.XXXX    //只能获取html元素的行内样式
getComputedStyle(obj).XXX   //获得html元素计算后的样式，内部样式

• css盒子旋转

transform: Rotate(x deg);

• for 循环

for( var pro in obj){}//循环出对象的属性
for(var item of map){}//循环map中的每个item

• DOM元素属性双向绑定

let input = document.getElementById('demo');
function oninputCallback() {
                console.log('oninput event ');
            }
function onchangeCallback() {
                console.log('onchange event');
            }
Object.defineProperty(input, '_value', {
                configurable: true,
                set: function(value) {
                    this.value = value;
                    oninputCallback();
                    onchangeCallback();
                },
                get: function() {
                    return this.value;
                }
            });
input._value = ....;   //这句话会调用set方法
var a = input._value; // 这句话会调用get方法

• queryselector CSS样式选择器选择DOM元素

document.queryselector('#id'); 
document.queryselector('.class');  //获取第一个class为class的元素 返回Node
document.queryselectorAll('.class');  //获取所有class为class的元素 返回NodeList[]

• 获取css样式里的浮动距离

document.queryselector('#id').offsetleft  //获取左浮动距离
document.queryselector('#id').offsetright  //获取右浮动距离
document.queryselector('#id').offsettop  //获取上浮动距离
document.queryselector('#id').offsetbottom //获取底浮动距离

• js 控制滚动条

scrollBy(xnum,ynum);

• 点击a标签不做任何事情

  // 如果有滚动条，点击则会返回页面最顶层
  //点击不做任何事情
  //同上

• confirm()

var res = confirm('确定取消吗') // 弹出一个确定、取消的窗口，点击确定则返回true，否则false

• js控制地址跳转

window.location.href = 'http://......' //在地址栏写网址

• js在select标签里增加options

var option = new Option();
option.innText = ...;
select.appendChild(option);

• js数组清空的灵活方式

arr = [1,2,3,4];
arr.length = 1;

//[1]