一 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);
}