一、基础概念
1、简介
JS是一种轻量级的脚本语言。它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的”脚本“。
JS是一种嵌入式语言。它本身提供的核心语法不算多。
2、语句、标识符
JS程序的单位是行(line)，也就是一行一行执行。一般情况下，每一行就是一个语句。语句以分号结尾，一个分号就表示一个语句结束。
标识符指的是用来识别各种值的合法名称。最常见的标识符就是变量名。
标识符是由：字母、美元符号($)、下划线(_)和数字组成，其中数字不能开头。
<script>
var num=10;
</script>3、变量
语法： 定义变量：var 变量名=值；
重新赋值：变量名=新值；
变量提升： JS引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行的运行。这样导致的结果就是所有的变量声明语句，都会被提升到代码头部，这就叫做变量提升(hoisting)。
例子：下列代码不会报错。会打印undefined
<script>
console.log(num);
var num=10;
</script>
4、JS引入到文件
引入方式：HTML文件内嵌、引入本地独立js文件、引入网络来源文件。
HTML文件内嵌：
<body>
<script>
console.log(num);
var num=10;
</script>
</body>独立js文件：
<script type="text/javascript" src="文件路径"></script>网络来源文件：
<script src="网络路径"></script>5、注释
单行注释：//
多行注释：/* 。。。。*/
HTML中的注释：<!-- 注释 -->
6、输出方式
对话框：alert(“内容”);
控制台：console.log("内容");
页面中：document.write("内容");
二、数据
1、数据分类
数值、字符串、布尔、undefined、null、对象。(ES6增加：Symbol、BigInt)
2、基本数据
数值、字符、布尔
<script>
//数值
var num =11;
//字符
var varchars="字符";
//布尔
var bol=true;
</script>3、合成类型
var usr={
name:"名字",
age:22
}4、typeof运算符
作用：判断数据类型(基本数据类型判断)
<script>
//数值
var num =11;
//字符
var varchars="字符";
//布尔
var bol=true;
var usr={
name:"名字",
age:22
}
console.log(typeof num);//number
console.log(typeof varchars);//string
console.log(typeof bol);//boolean
console.log(typeof usr);//objec
console.log(typeof undefined);//undefined
console.log(typeof null );//objec
</script>5、运算符
加减乘除：+、-、*、/；
余数运算：%；
自增和自减：++x、--x；
注意：放在变量后和放在变量前。前：会先进行自增、自减操作，再返回值；后：先返
回值，在进行自增、自减。
赋值运算：
比较运算符：（严格比较除了比较值，还会比较数据类型）
布尔运算符：取反：！ 且运算：&& 或运算：||
对非Boolean值取反
//下列结果为true
console.log(!null);
console.log(!undefined);
console.log(!0);
console.log(!"");
console.log(!NaN);
console.log(!false);三、条件语句
1、if语句
else及后面的代码可以按需要写。
var n1=1;
var n2=2;
//判断条件
if(n1==n2){
//条件满足
console.log("相等");
}else{
//条件不满足
console.log("不相等");
}2、switch语句
每个条件的执行语句后面按需添加break;。如果添加则代表只执行满足条件的语句，否则从在满足条件的语句执行完后，程序还会向下依次执行剩余条件语句。
var n1=1;
//n1为条件
switch(n1){
//n1=1时执行
case 1:console.log("值为1");break;
//n1=2时执行
case 2:console.log("值为2");break;
//n1=3时执行
case 3:console.log("值为3");break;
default: console.log("值未满足上述值");
}3、三元运算符
语法：(条件) ？表达式1：表达式2
条件为true执行1，false执行2。
var n1=1;
console.log((n1%2==1)?"奇数":"偶数");4、for循环
语法：
for(初始化表达式；条件；迭代因子){
语句
}初始化表达式(initialize)：确定循环变量的初始值，只在循环开始时执行一次。
布尔表达式(条件、test)：每轮循环开始时，都要执行这个条件表达式，只有值为真，才继续
进行循环。
迭代因子(increment)：每轮循环的最后一次操作，通常用来递增循环变量。
实例：打印99乘法表
//打印99乘法表
for(var num=1;num<10;num++){
var strings="";
for (let num2 = 1; num2 < 10; num2++) {
if(num>=num2){
strings+=num+"*"+num2+"="+num*num2+" ";
}
}
console.log(strings);
}5、while循环
while语句包括一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块。
语法：
while (条件) {
执行语句
} 例子：
var i=1;
while (i<=10) {
console.log(i);
i++;
}6、break与continue语句
break和Continue都具有跳转作用，可以让代码不按既有的顺序执行。
break例子：跳出当前循环
var i=1;
while (i<=10) {
if(i==5){
//如果i=5则跳出while循环，不在执行
break;
}
console.log(i);
i++;
}continue例子：当前循环轮次不执行，直接执行下一次；
var i=1;
while (i<=10) {
i++;
if(i==5){
//如果i=5则跳到下一次循环；
continue;
}
console.log(i);
}四、字符串
1、声明注意事项
单引号与双引号能相互嵌套，但是单单、双双不能嵌套；
如果需要可以进行转译。
换行需要在行末插入“ \ ”
//单双引号相互嵌套
var i="222'222'";
var b='222"2"';
//强行嵌套
var c="aaa\"qq\"ww";
//换行
var d="2222\
awdawdwq\
wawe"2、charAt()
charAt方法返回指定位置的字符，参数从0开始编号。
例子：
var a="1234567"
//输出2
console.log(a.charAt(1));
//输出空
console.log(a.charAt(7));
console.log(a.charAt(-1));3、concat()
concat方法用于连接两个字符串，返回一个新的字符串。如参数不为字符串则会先转换成字符串。
例子：
var a="1234567";
var b="wdnmd";
var c=99;
//都为字符串
console.log(a.concat(b));
//有不为字符串类型
console.log(a.concat(c,b));4、substring()
substring方法用于从原字符串取出子字符串并返回，不改变原字符串，它的第一个参数表示子字符串的开始位置，第二个位置表示结束位置(返回结果不含该位置)。
例子：
var a="1234567";
//输出1
console.log(a.substring(0,1));
//输出67
console.log(a.substring(5));5、substr()
作用与substring相同，但是第二个参数是字符串长度。
例子：
var a="1234567";
//输出12
console.log(a.substr(0,2));
//输出67
console.log(a.substr(5));6、indexOf()
用于确定一个字符串在另一个字符串中第一次出现的位置，返回结果是匹配开始的位置。如果返回-1表示不匹配；第二个参数表示从字符串那个位置开始寻找。
例子：
var a="1234567";
//输出2
console.log(a.indexOf("3"));
//输出-1
console.log(a.indexOf("88"));
//输出5
console.log(a.indexOf("6",2));7、trim()
用于去除字符串两端的空格、制表符(\t \v)、换行符(\n)、回车符(\r)，返回一个新的字符串，不改变原字符串；
例子：
var a=" 1234567 ";
var b="\r\t\v 45435345 \n\r"
//输出1234567
console.log(a.trim());
//输出45435345
console.log(b.trim());
8、split()
按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组；
如果规则为空，则数组为原字符串的每一个字符；
如果没有规则，则数组为原字符串；
如果还有第二个参数(数字)，代表每个数组成员个数是数字。
var a="12345,67,1,2,3,12,31,23";
//以逗号分隔
console.log(a.split(","));
//每个元素都是一个数组成员
console.log(a.split(""));
//整个原字符串为一个数组
console.log(a.split());
//只返回数组前两个
console.log(a.split(",",2));
五、数组
1、概念
数组是按次序排列的一组值。每个值的位置都有编号(从0开始)，整个数组用方括号标识。且任何数据都可以放入数组。
例子：
var arr=['1','2','3'];2、属性
1、length：获取数组长度
arr.length;2、数组遍历。可以使用for或while。
var arr=[1,2,3];
arr.forEach(a => {
console.log(a);
});
var i=0;
while(i<arr.length){
console.log(arr[i]);
i++;
}3、数组静态方法：Array.isArray()，判断传值是否是数组
var arr=[1,2,3];
//打印true
console.log(Array.isArray(arr));4、数组方法：push、pop
push：在数组末尾添加一个元素，并返回添加元素后的数组的长度，会改变原数组
pop：删除数组末尾元素，并返回删除后数组长度，会改变原数组。
var arr=[1,2,3];
arr.push(222);
//打印：1,2,3,222
console.log(arr);
arr.pop();
//打印：1,2,3
console.log(arr);5、数组方法：shift、unshift
shift：删除数组第一个元素，并返回数组长度。会改变原数组。
unshift：向头部添加元素，并返回数组长度。会改变原数组。
var arr=[1,2,3];
arr.shift();
//打印：2,3
console.log(arr);
arr.unshift(1);
//打印：1,2,3
console.log(arr)6、数组方法：join
join方法以指定参数作为分隔符，将所有数组成员连接为一个字符串返回。如果不提供参
数，默认逗号分隔。
如果成员中是undefined、null、空，会被转换成空字符串。
join与split方法可以使字符串和数组之间互相转换。
var arr=[1,2,3];
//打印：1|2|3
console.log(arr.join('|'));7、数组方法：concat
此方法用于多个数组的合并。它将新的数组的成员，添加到原数组成员的后部，然后放
回一个新数组，原数组不变。
var arr=[1,2,3];
var arr2=['a','b','c'];
//打印：1,2,3,a,b,c
console.log(arr.concat(arr2));
//打印：1,2,3
console.log(arr)
//打印：a,b,c
console.log(arr2)8、数组方法：reverse
用于颠倒排列数组元素，返回改变后的数组，会改变原数组。
split、reverse、join：三个方法可以让字符串反转。
var arr=['a','b','c'];
arr.reverse();
//打印：c,b,a
console.log(arr)
//反转字符串
var str='wdnmd';
//打印：dmndw
console.log(str.split('').reverse().join(''));9、数组方法：indexOf
返回给定元素在数组中第一次出现的位置，如果没有返回-1；可以输入第二个参数，代
表开始寻找的下标。
var arr=['a','b','c','d','e','a'];
//打印：1
console.log(arr.indexOf('b'));
//打印：-1
console.log(arr.indexOf('b',3));六、函数
1、概念
函数是一段可以反复调用的代码块。
2、声明
function：function命令声明的代码块就是一个函数。function命令后面是函数名，函数名后面是一个小括号，里面是传入函数的参数。且函数体内部可以使用return返回值。
例子：
function thisMyFunction(a){
console.log(a);
return a+1;
}七、对象
1、概念
对象是JS语言的核心概念，是最重要的数据类型，对象就是一组“键值对”的集合，是一种无序的复合数据集合
var user={
name:"张三",
age:22,
flag:false,
job:['a','b'],
getName:function(){
console.log('name');
}
//链式调用
container:{
a:"11",
b:[1,2]
}
}
//链式调用
console.log(user.container.a);2、Math对象
1、Math.abs()：返回参数数值的绝对值。
//1
Math.abs(1)
//1
Math.abs(-1)
2、Math.max()、Math.min()：返回参数值的最大值、最小值。参数为空的话返回Infinity
//6
Math.max(1,2,,5,6);
//1
Math.min(1,2,,5,6);
//Infinity
Math.min();
//-Infinity
Math.max();3、Math.floor()：向下取整；Math.ceil()：向上取整；
//3
Math.floor(3.2);
//-4
Math.floor(-3.2);
//4
Math.ceil(3.2);
//-3
Math.ceil(-3.2);4、Math.random()：返回0-1之间的随机数，可能等于0，一定小于1
//0.221212425
Math.random();3、Date对象
Date对象是JS原生的时间库。它以1970年1月1日零点作为时间的零点，可表示时间范围是前后各1亿天(单位为毫秒)。
1、Date.now()：返回当前时间距离零点的毫秒数，相当于当前unix时间戳乘1000。
//1683429274616
console.log(Date.now());2、一些get方法
八、DOM
1、概念
DOM(Document Object Model 文档对象模型)是JS操作网页的接口，他的作用是将网页转换为一个JS对象，从而可以用脚本进行各种操作。
DOM最小组成单元叫做节点(node)。文档的树形结构(DOM树)，就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
节点类型：Document：整个文档树的顶层节点
DocumentType：doctype标签
Element：网页的各种HTML标签
Attribute：网页元素的属性
Text：标签之间或标签包含的文本
Coment：注释
DocumentFragment：文档的片段
节点树：一个文档的所有结点，按照所在的层级，可以抽象成一种树状结构。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就衍生出一种树形结构。
除了根节点，其他节点都有三层关系：
父节点关系(parentNode)：直接的上级节点
子节点关系(childNodes)：直接的下级节点
同级节点关系(sibling)：拥有同一个父节点的节点
不同节点的nodeType属性值和对应的常量： 
2、Document对象_方法/获取元素
1、document.getElementsByTagName()：搜索HTML标签名，返回符合条件的元素。
<body>
<div>666</div>
<div>777</div>
</body>
<script>
var dis=document.getElementsByTagName("div");
//HTMLCollection(2)
console.log(dis);
//<div>666</div>
console.log(dis[0]);
//更改元素的值为222
dis[1].innerHTML="222";
</script>2、document.getElementsByClassName()：返回一个类似数组的对象，包括所有class名字符合指定条件的元素，元素的变化实时反应在返回结果中。
参数如果有多个用空格分隔。
<body>
<div class="text">666</div>
</body>
<script>
var dis=document.getElementsByClassName("text");
//<div>666</div>
console.log(dis[0]);
//更改元素的值为222
dis[0].innerHTML="222";
</script>3、document.getElementsByName()：用于选择有name属性的HTML元素，返回一个类似数组的对象，因为name属性相同的元素可能不止一个
4、document.getElementById()：按HTML元素的ID返回。因ID是唯一，所以只返回一个对象
5、document.querySelector()：接受一个CSS选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，返回null。
6、document.querySelectorAll()：与querySelector类似，返回所有匹配上的。
3、document对象_方法/创建
1、document.createElement()：生成元素节点，并返回节点。
2、document.createTextNode()：生成文本。
3、document.createAttribute()：创建属性。
4、属性.value：属性赋值
5、标签.appendChild()：添加元素
6、标签.setAttributeNode()：添加属性。
<body>
<div class="text">666</div>
<div id="div1"></div>
</body>
<script>
//创建元素P标签
var p_node=document.createElement("P");
//创建元素内容
var p_text=document.createTextNode("我是内容");
//创建属性
var p_id=document.createAttribute("id");
//属性赋值
p_id.value="pid";
//添加元素内容到P标签
p_node.appendChild(p_text);
//添加属性到P标签
p_node.setAttributeNode(p_id);
//获取页面中div
var allDocument=document.getElementById("div1");
//把创建的P标签添加到页面中
allDocument.appendChild(p_node);
</script>
4、Element对象属性
Element对象对应网页的HTML元素。每个HTML元素，在DOM树都会转化为一个ELement节点对象。
1、Element.id：返回指定元素的id属性。
2、Element.className：用来读写当前元素节点的class属性。他的值是一个字符串，每个class之间用空格分隔。
3、Element.innerHTML：返回一个字符串，等同于该元素包含的所有HTML代码。该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括HTML和body。
4、Element.innerText：与innerHTML类似，但innerText无法识别元素，会直接渲染成字符串。
5、Element.classList：add()：增加一个class；
remove()：移除一个class；
contains()：检查当前元素是否包含某个class；
toggle()：将某个class移入或移除当前元素。有就移除、没有就添加
<body>
<div id="div1" class="aa bb cc">333
</div>
</body>
<script>
var div1=document.getElementById("div1");
//div1
console.log(div1.id);
//aa bb cc
console.log(div1.className);
div1.classList.add("dd");
//aa bb cc dd
console.log(div1.className);
div1.classList.remove("dd");
//aa bb cc
console.log(div1.className);
//true
console.log(div1.classList.contains("aa"));
div1.classList.toggle("dd");
//aa bb cc dd
console.log(div1.className);
div1.classList.toggle("dd");
//aa bb cc
console.log(div1.className);
// 333
console.log(div1.innerHTML);
// aaaa
console.log(div1.innerHTML="<a href='http://www.baidu.com'>aaaa</a>");
//333
console.log(div1.innerText);
//<a href='http://www.baidu.com'>aaaa</a>
console.log(div1.innerText="<a href='http://www.baidu.com'>aaaa</a>");
</script>5、Element获取元素位置
6、CSS操作
给页面元素设置属性；
方法1、获取元素后设置：setAttribute()
方法2、获取元素后设置：.style.具体设置。
方法3、获取元素后设置：.style.cssText
<body>
<div id="div1"></div>
</body>
<script>
var div1=document.getElementById('div1');
//方式一
// div1.setAttribute('style','background-color:red;width:200px;height:200px;');
//方式二
// div1.style.width="200px";
// div1.style.height="500px";
// div1.style.backgroundColor="blue";
//方式三
// div1.style.cssText='background-color:red;width:200px;height:200px;';
</script>九、事件
1、事件分类：HTML事件、DOM0级时间处理、DOM2级事件处理。
下列案例均为给button按钮添加点击事件。
HTML事件：JS和HTML代码未分离
DOM0级事件：JS和HTML代码分离，但是添加多个事件时，只有最后一个事件会生效
DOM2级事件：在DOM0级的基础上，添加多个事件时都会生效。
1、HTML事件处理
<body>
<div id="div1">
<button id="button" onclick="getClik()"></button>
</div>
</body>
<script>
var div1=document.getElementById('div1');
div1.style.width="1000px";
div1.style.height="1000px";
div1.style.display='flex';
div1.style.justifyContent="center";
div1.style.alignItems="center";
var button1=document.getElementById('button');
button1.style.width='100px';
button1.style.height='50px';
button1.style.border='1px transparent solid';
button1.style.borderRadius='10px';
button1.style.backgroundColor="yellowGreen";
var changeColor=1;
function getClik(){
if(changeColor==1){
changeColor=2;
button1.style.backgroundColor="skyBlue";
}else{
changeColor=1;
button1.style.backgroundColor="yellowGreen";
}
}
</script>2、DOM0级事件
<body>
<div id="div1">
<button id="button"></button>
</div>
</body>
<script>
var div1=document.getElementById('div1');
div1.style.width="1000px";
div1.style.height="1000px";
div1.style.display='flex';
div1.style.justifyContent="center";
div1.style.alignItems="center";
var button1=document.getElementById('button');
button1.style.width='100px';
button1.style.height='50px';
button1.style.border='1px transparent solid';
button1.style.borderRadius='10px';
button1.style.backgroundColor="yellowGreen";
var changeColor=1;
button1.onclick= function(){
if(changeColor==1){
changeColor=2;
button1.style.backgroundColor="skyBlue";
}else{
changeColor=1;
button1.style.backgroundColor="yellowGreen";
}
}
</script>3、DOM2级事件
<body>
<div id="div1">
<button id="button"></button>
</div>
</body>
<script>
var div1=document.getElementById('div1');
div1.style.width="1000px";
div1.style.height="1000px";
div1.style.display='flex';
div1.style.justifyContent="center";
div1.style.alignItems="center";
var button1=document.getElementById('button');
button1.style.width='100px';
button1.style.height='50px';
button1.style.border='1px transparent solid';
button1.style.borderRadius='10px';
button1.style.backgroundColor="yellowGreen";
var changeColor=1;
button1.addEventListener('click',function(){
if(changeColor==1){
changeColor=2;
button1.style.backgroundColor="skyBlue";
}else{
changeColor=1;
button1.style.backgroundColor="yellowGreen";
}
})
button1.addEventListener('click',function(){
if(changeColor==1){
console.log("变黄绿色");
}else{
console.log("变天蓝色");
}
})
</script>2、鼠标事件
<body>
<div class="div1">
<button id="button"></button>
<div id="div2" class="div2"></div>
</div>
</body>
<script>
var button1=document.getElementById("button");
button1.style.width='100px';
button1.style.height='50px';
button1.style.border='1px transparent solid';
button1.style.borderRadius='10px';
button1.style.backgroundColor="yellowGreen";
// button1.addEventListener('click',function(){
// console.log("鼠标单击");
// })
button1.ondblclick=function(){
console.log("鼠标双击");
}
// button1.addEventListener('mousedown',function(){
// console.log("鼠标按下");
// })
// button1.addEventListener('mouseup',function(){
// console.log("鼠标放开");
// })
var div2=document.getElementById('div2');
div2.addEventListener('mousemove',function(){
console.log("鼠标动了");
})
div2.addEventListener('mouseenter',function(){
console.log("鼠标进来了");
})
div2.addEventListener('mouseleave',function(){
console.log("鼠标出来了");
})
</script>3、Event对象
事件发生后，会产生一个事件对象，作为参数传给监听函数。
event就是function中的e。
1、event.Target：返回事件当前所在的节点，就是获取的对象
<body>
<button id ="b">提交</button>
</body>
<script>
var b=document.getElementById("b");
b.onclick=function(e){
//打印：<button id ="b">提交</button>
console.log(e.target);
//获取到对象后可以更改此对象的设置
e.target.innerHTML="222";
}
</script>2、event.type：给当前对象添加的事件，比如上列例子为click。
3、event.preventDefault：取消浏览器对事件的默认行为。比如点击链接后，浏览器默认会跳转到另一个页面，使用这个方法后就不会跳转。
<body>
<a href="http://www.baidu.com" id = "aaa">aaaaaaaa</a>
</body>
<script>
var aaa=document.getElementById("aaa");
aaa.onclick=function(e){
//添加此条件后，点击链接就不会跳转
e.preventDefault();
console.log("111");
}
</script>4、event.stopPropagation：阻止事件在DOM中继传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数。
<body>
<div id ="d1" class="d1">
<div id ="d2" class="d2"></div>
</div>
</body>
<script>
var d1=document.getElementById("d1");
var d2=document.getElementById("d2");
d1.onclick=function(e){
console.log("111");
}
d2.onclick=function(e){
//添加后，点击d2，d1的点击事件就不会触发。
e.stopPropagation();
console.log("222");
}
</script>
4、键盘事件
键盘事件主要有keydown、keypress、keyup三个事件
keypress：按下有值的键时触发，即按下ctrl、alt、shift这样的无值键，这个事件不会触发。
keyCode唯一标识：按键对应的数值。
<body>
<input id="input1">
</body>
<script>
var input1=document.getElementById("input1");
input1.onkeydown=function(e){
console.log("按下了");
}
input1.onkeyup=function(e){
console.log(e.target.value);
if(e.keyCode===65){
console.log("输入的是a");
}
}
input1.onkeypress=function(e){
console.log("按下了");
}
</script>5、表单事件
表单事件是使用表单元素及输入框元素可以监听的一些列事件。
事件：input、select、change、reset、submit
input：当<input> 、<select>、<textarea>的值发生变化时触发。对于复选框或单选框，用户改变选项时，也会触发这个事件。input是连续触发，用户每次按键都会触发。
select：当<input> 、<textarea>里面的选中文本时触发
change：当<input> 、<select>、<textarea>的值发生变化时触发，与input相似，但是他不是连续性的。
reset：清空表单内容。
submit：提交表单内容到服务器。
<body>
<form id="f1" onsubmit="submits">
<input id ="i1" name="username">
<input id ="password_input" type="password" name="password">
<button id ="reset_button">重置</button>
<button >提交</button>
</form>
</body>
<script>
var form1=document.getElementById("f1");
var i1=document.getElementById("i1");
var passwordInput=document.getElementById("password_input");
var resetButton=document.getElementById("reset_button");
// var submitButton=document.getElementById("submit_button");
//input事件
i1.oninput=function(e){
console.log(e.target.value);
}
//onselect
i1.onselect=function(e){
console.log("选中了");
}
//onchange
passwordInput.onchange=function(e){
console.log(e.target.value);
}
//重置
resetButton.onclick=function(){
form1.reset();
}
function submits(){
console.log("提交");
}
</script>6、事件委托、事件代理
由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。
<body>
<ul id="ulList">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<p>P标签</p>
</ul>
</body>
<script>
var ullist=document.getElementById("ulList")
//列表点击事件
ullist.onclick=function(e){
//标签获取默认大写。
if(e.target.tagName==="LI"){
console.log(e.target.innerHTML);
}
if(e.target.tagName.toLowerCase()==="p"){
console.log(e.target.innerHTML);
}
}
</script>十、定时器
定时器主要由setTimeout()和setInterval()这两个函数完成。
1、setTimeout
函数用来指定某个函数或某代码段，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。他接受两个参数，第一个是函数名或者代码段，第二个参数是毫秒数。如果回调函数是对象的方法，那么setTimeout使得方法内部的this关键字指向全局，而不是原来的对象。解决办法把this在setTimeout函数外重新赋值。
<script>
var name="全局";
var user={
name:"user内部",
age:1,
getName(){
console.log(this.name);
},
//
getNamePlus(){
var that=this;
setTimeout(() => {
console.log(this.name);
}, 2000);
}
}
//user内部
user.getName();
//全局
var timer=setTimeout(user.getName,2000);
//解决setTimeout使得this变全局
//user内部
user.getNamePlus();
//清除定时器
clearTimeout(timer);
</script> 2、setInterval
与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d{
width: 100px;
height: 100px;
background-color: aqua;
opacity: 0;
}
</style>
</head>
<body>
<div id="d" class="d"></div>
</body>
<script>
//透明度0-1
var opacity_value=0;
var d=document.getElementById('d');
var changeMode=true;
setInterval(function(){
d.style.opacity=opacity_value;
if(changeMode){
opacity_value+=0.01;
}else{
opacity_value-=0.01;
}
if(opacity_value>1){
changeMode=!changeMode;
}
if(opacity_value<0){
changeMode=!changeMode;
}
},50);
</script>
</html>3、防抖
对于短时间内连续触发的事件，防抖的含义就是让某个时间期限内，事件处理函数只执行一次。
例如，当页面滚动时获取滚动的长度，默认情况下打印的很快，此时可对打印函数做限制。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d{
width: 100px;
height: 2000px;
background-color: black;
}
</style>
</head>
<body>
<div id="d" class="d"></div>
</body>
<script>
function slowdown(f,t){
var timer=null;
return function(){
if(timer){
clearTimeout(timer);
}
timer=setTimeout(f,t);
}
}
function showTop(){
var showtop=document.documentElement.scrollTop;
console.log(showtop);
}
window.onscroll=slowdown(showTop,200);
</script>
</html>4、节流
与防抖相似，防抖的话一直拖着滑动就不会打印。此目的解决这个问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d{
width: 100px;
height: 2000px;
background-color: black;
}
</style>
</head>
<body>
<div id="d" class="d"></div>
</body>
<script>
function slowdown(f,t){
var timer=true;
return function(){
if(!timer){
return false;
}
timer=false
setTimeout(function(){
f();
timer=true;
},t);
}
}
function showTop(){
var showtop=document.documentElement.scrollTop;
console.log(showtop);
}
window.onscroll=slowdown(showTop,200);
</script>
</html>
扫一扫
588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
