JavaScript

一 JS基础

1、 JS渲染到页面的方法有两种：外部引入（head）、内嵌（body）；
2、JS的关键字只有一个：var，在JS中严格区分大小写；
function 常规定义方式：function 函数名称(){ }
常规函数也会声明提前；
使用传递的参数： arguments 参数列表对象；

 method4(1,2,3);
    function method4(){
        console.log(arguments[0]);
        console.log(arguments[1]);
        console.log(arguments[2]);
        console.log(arguments.length);
    }

执行结果为：1,2,3,3
3、匿名函数：不带名称，不能提前声明；
自执行函数：匿名，自动执行；
4、JS变量的数据类型：number string boolean null undefined object
5、使用变量之前先赋值—初始化，且变量提前声明（在JS中变量声明提前）；
6、检测变量的数据类型用：typeof；
如：
var a=10;
var b=“a”;
var c=null;
var d=true;
var e=undefined;
var f={};
var g=function(){
var nn=2;
}
用typeof检测出来的结果分别为：number、string、object、boolean 、 undefined 、 object、function。
7、全局变量与局部变量的区别在于：作用域；
8、变量的闭包：调用其他函数的局部变量。
闭包的变量会存在内存中，应尽量避免使用闭包，会导致内存泄露；
9、JS的 运算符
数学运算符：+ - * / 加减乘除
++ – 前置：(先++ --在运算) 后置 ：（先运算在++ --）；
双等于号：值一样， 类型不定
三等于号：值和类型必须一致；
逻辑运算符：&& || ！ 与 或 非；
比较运算符： > 、< 、 >=、 <=、 !=；
10、JS的语句
（1）if语句
if(){} else{}或者 else if()
在if语句中，0表示false，非0表示true；

 if (0) {
         console.log(1);
         }
         if (-1) {
         console.log(2);
         }

执行结果为：2；
（2）switch语句

var type="";
         switch (type) {
             case "":
         break;
            case "":
         break;
            case "":
         break;
            default :
         break;
         }

若前三个case都不满足，执行default;
（3）while do while----不常用
do while：先执行，后判断，至少执行一次；

        while(true){
            //执行代码
        }

        var n=0;
        do{
            n++;
            console.log(n);
        }while(n<=10);

11、for循环
break：跳出当前for循环；
continue：执行后续；
12、逻辑运算符----三元运算符 条件？true：false

1==1?console.log("a"):console.log("b");

1是否等于1，若等于，输出a;否则输出b;
13、dom元素的获取方案共有8种。
（1）4种动态获取：

var dom1=document.getElementsByTagName("button");
console.log(dom1);//htmlcollection  集合类型   [index]  获取元素
var dom2=document.getElementsByClassName("btn");
console.log(dom2);//htmlcollection  集合类型   [index]  获取元素
var dom3=document.getElementsByName("but");
console.log(dom3);//NodeList  集合  [index]  获取元素
var dom4=document.getElementById("btn_1");
console.log(dom4);//object  单个对象

（2）2种固定获取：初始化页面有几个元素就获取几个，后期动态添加的元素不能直接获取；

var querybtn=document.querySelector(".btn");
console.log(querybtn);//object  单个对象
var queryall=document.querySelectorAll(".btn");
console.log(queryall);//nodelist集合  [index]  获取元素

（3）2个固定元素的获取：

console.log(document.body);//body
console.log(document.documentElement);//html

二 dom元素的事件

1、dom元素的事件，有这几类：
（1）鼠标事件：mousedown 、 mouseup、 mouseover 、mousemove 、 mouseleave、 mouseout 、 mouseenter；
（2）键盘事件：keydown 、keyup 、keypress；
（3）表单事件：blur 、focus、 change；
（4）浏览器事件：load、error 、resize；
（5）触屏事件：touchstart 、touchmove、 touchend；
JS事件在使用时都必须加on
2、dom元素绑定事件的方式：
（1）dom元素直接绑定事件，在元素行内直接添加事件，行内同类型事件只能绑定一次；

<button onclick="msg()">按钮</button>

（2）直接动态绑定事件：（获取dom 再绑定事件）；

var regest=document.querySelector("#btn");
regest.onclick=reg1;
function reg1(){
   console.log("注册");
}

移除事件：regest.onclick=null;
（3）监听事件：事件类型不带on

regest.addEventListener("click",method1);
function method1(){
   console.log("回调函数");
}

移除监听事件：regest.removeEventListener("click",method);

3、dom后期添加事件：var aaa=document.createElement(“要添加的事件的标签名称”)；
document.body.appendChild(aaa);//将创建的事件添加到body中；
4、捕获和冒泡：addEventListener的第三个参数，默认false是冒泡事件,true是捕获事件。捕获和冒泡相反，事件冒泡是由里向外，捕获则相反。
e event:事件的执行参数；
e.stopPropagation(); 阻止事件冒泡；
e.preventDefault(); 阻止事件的默认行为；
5、 事件的执行参数 ： e -----event
（1）鼠标事件

var event_ele=document.getElementById("btnevent");
    event_ele.onclick=function(e){
        console.log(e);
}

（2）键盘事件

document.body.onkeydown=function(){
    var e =window.event;
    console.log(e);
}