js初学自用知识点

1.初识javascript

1.1 什么是js

脚本语言：不需要编译，运行过程中由js解释器逐行进行解释并执行（如果前面的代码出现错误，下面的代码将不能执行）

1.2 浏览器执行js简介

浏览器：分为渲染引擎和JS引擎两个部分

  • 渲染引擎：用来解析HTML和CSS

  • JS引擎：JS解释器，用来读取JS代码，对其处理后运行

1.3 JS的组成

JS=JS语法（ECMAScript）+页面文档对象模型（DOM）+浏览器对象模型（BOM）

1.4 JS初体验

JS3种书写位置（行内 内嵌 外部）

HTML用 “”

JS用 ‘’

<body>
        //行内式直接写到文件内部//
        <input type="button" value="唐伯虎">
</body>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>//内嵌式//
        <script type="text/javascript">
            alert('123456');
        </script>
    </head>
<script src="js初体验.js">
            中间不可以写代码！！！
        </script>//外链式//

1.5 js注释

1.单行注释：//内容 快捷键 ctrl+/（可以改）

2.多行注释：/ * * / 快捷键 shift+alt+a（可以改）

1.6 JS输入输出语句

方法说明归属
alert（msg）浏览器弹出警告框浏览器
prompt（into）（取过来的值是字符型）浏览器弹出输入框，用户可以输入浏览器
console.log（msg）（只有程序员能看到）浏览器控制台打印出信息浏览器

2.变量

2.1 变量概述

变量：用于存放数据的容器，通过变量名获取数据，甚至数据可以修改（本质：变量是程序内存中申请的一块用来存放数据的空间）

2.2 变量的使用

变量的使用：1.声明变量 2.赋值

var=variable变量

var age；//声明一个名字为age的变量
age=18；//赋值
console.log（age）；//输出

=代表赋值，不是单纯的等于

var age=18；//变量初始化

2.3 变量的语法扩展

1.更新变量

一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。

2.同时声明多个变量

var age = 18,address = '火影村'，gz = 2000；英文逗号隔开

3.声明变量的特殊情况

情况声明结果
var age；console.log（age）；只声明 不赋值undefined
console.log（age）；不声明 不赋值报错
age = 10；console.log（age）；不声明 只赋值10（不建议使用）

2.4 变量名规范

1.由字母、数字、下划线、美元符号组成

2.严格区分大小写。var ABC和var abc是两个变量

3.不能以数字开头

4.不能是关键字、保留字。如：var、for、while

5.变量名必须有意义。

6.遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName

7.推荐翻译网站：有道 爱词霸

8.尽量不要直接使用name作为变量名。在大多数浏览器中有含义

3.数据类型

3.1 数据类型简介

1.为什么需要数据类型

​ 在计算机中，不同数据占用的存储空间不同，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

2.变量的数据类型

​ 不确定，js的数据类型只是在程序运行过程中，根据等号右边的值来确认。

​ js是动态语言，变量的数据类型是可以变化的。

3.数据类型的分类

简单数据类型

number ：8进制 数字前面加0表示8进制

​ 16进制 数字前面加0x表示16进制

​ isNaN（）判断是否为非数字

字符串型String

​ 只要加了引号的都是字符串型

​ 嵌套，外双内单 外单内双

​ var str = “我是‘一个’孩子”

​ 检测获取字符串的长度 length

var str = 'ma name is';
console.log(str.length);

​ 字符串的拼接（用+号拼接）

​ 字符串+任何类型

console.log（12+12）；//24,数字相加
console.log（'12'+12）；//1212 字符相连
var age = 18;
console.log('我今年'+age+‘岁’)；//我今年18岁

\开头 必须都写到引号里面

 

4.获取变量的数据类型（typeof 变量名）

 

5.字面量（源代码中一个固定值的表示法，就是字面量表示如何表达这个值）

6.数据类型转换（重点）

1.转换为字符串型

2.转换为数字型

 

3.转换为布尔型

Boolean（）函数

 

 

4.JS运算符

4.1 运算符

operator（运算符）

1.算术运算符

​ 加减乘除 取余（%）

​ 浮点数 算术运算会出问题

​ 不能直接用浮点数比较大小

​ 优先级：先乘除 后加减 有括号先括号

表达式：是由数字、运算符、变量等能求得数值的有意义排列方法所得的组合。

返回值：表达式的结果。

4.2 递增或递减的表达式

递增++ 递减--

加号和减号可以放在变量的前面和后面，放前面称为前置递增（递减）运算符，放后面称为后置递增（递减）运算符。（必须和变量配合使用 不能++1、--8这种）

单独使用前置和后置效果是一样的

前置：先加再用

后置：先用再加

4.3 比较运算符

比较运算符（关系运算符）：两个数据进行比较时使用的运算符，比较运算后，会返回一个布尔值（true/false）作为比较运算的结果。

== 默认转换数据类型

 

4.4 逻辑运算符

1.逻辑运算符

用来进行布尔值运算的运算符，返回值也是布尔值，经常用于多个条件判断。

&&逻辑与（and）：一假为假

||逻辑或（or）：一真为真

！逻辑非（not）：非真既假

2.短路运算（逻辑中断）

当有多个表达式时，如果左边的值已经能确定结果了，就不会继续运算右边的值。

逻辑与

console.log（123 && 456）；//456 第一个为真返回第二个

console.log（0 && 456）；//0 第一个为假返回第一个

逻辑或

console.log（123 || 456）；//123 第一个为真返回第一个

console.log（0 || 456）；//456 第一个为假返回第二个

var num = 0;
console.log（123 || num++）；//123 没有返回num，没有实现加一
console.log(num);//0

4.5 赋值运算符

4.6 运算符优先级

++num：一元运算符

2+3：二元运算符

5.js流程控制——分支

 

5.1 流程控制

流程控制：控制我们的代码按照什么结构顺序来执行。

流程控制的三种

结构：顺序结构、分支结构、循环结构

1.顺序结构

程序按照代码的先后顺序，依次执行

2.分支结构

由上到下执行代码过程中，根据不同的条件，执行不同的路径代码，从而得到不同的结果。

if分支语句

if（条件表达式）{

​ //执行语句

}//如果if里面的表达式结果为真，则执行大括号里面的执行语句，反之不执行，执行if语句后面的代码。

if(3<5){//为真，执行大括号里面的
  alert('123')；
}//123

if else分支语句

if(条件表达式){//真执行这个

} else {//假执行这个

}

进入网吧案例

    var age = prompt('请输入您的年龄');
            if(age>=18){
                alert('您以进入网吧');
            }
            else{
                alert('您不可以进入网吧');
            }

判断闰年

    var year = prompt('请输入年份：');
            if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
                alert('润年');
            } else {
                alert('平年');
            }

if else if多分支语句

    var mark = prompt('请输入你的成绩');
            if(mark<60){
                alert('不及格');
            } else if(60<=mark && mark<=100){
                alert('及格');// mark大于小于必须分开写，不然不行
            } else {
                alert('请输入1--100的分数');
            }

5.2 三元表达式

由三元运算符组成的式子叫三元表达式

条件表达式 ？ 表达式1 ： 表达式2

如果条件表达式结果为真则返回表达式1的值，反之返回表达式2的值。

var num = 10；
var result = num > 5 ? '是的' ：‘不是的’；//表达式是有返回值的，要放进一个变量里
console.log（result）；//是的
    /* 用户输入一个数字，如果数字小于10，则在数字
            前补0，比如 01 03，如果大于10，则不需要补;*/
            var num = prompt('请输入一个数字');
            var num1 = num<10 ? '0'+num  : num; 
            console.log(num1);

5.3 分支流程控制Switch语句

Switch（转换、开关）case（小例子、选项）

语法结构：Switch（条件表达式）{

​ case value1：

​ 执行语句1；

​ break；

​ case value2：

​ 执行语句2；

​ break；

​ .......

​ default：执行最后的语句；

}//利用表达式的值和case后面的值相匹配，匹配上了就执行里面的语句，都没有匹配上，执行default里面的语句。

注意：1.表达式里面一般放一个变量，灵活一点

​ 2.表达式里面的值和case相匹配时，必须是全等

​ 3.如果当前的case没有break时，就会继续执行下一个case

5.4 Switch语句和if else if语句的区别

1.一般情况下，他们可以相互替换

2.固定值用Switch，判断范围用if else if

3.Switch效率更高，条件判断后直接执行程序，if else if 有几种条件，就得判断多少次

4.分支少，if else if 简单一点，反之用switch

6.js流程控制——循环

6.1 循环

目的：可以重复执行某些代码，一直重复执行的代码称为循环体，能否继续重复执行，取决于循环的终止条件。由循环体和终止条件组成的语句，被称为循环语句。

6.2 for循环

重复执行某些代码，一般跟计数有关

for（初始化变量；条件表达式；操作表达式）{

​ //循环体

}

for(var i= 1 ; i<=100;i++){
  console.log('您好')；
}

断点调试：观察程序的运行过程

循环可以重复执行不同的代码

for(var i= 1; i<=100; i++){

​ console.log（‘这个人今年’+ i +‘ 岁了’）;

}

6.3 双重for循环

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，这样的for循环语句称之为双重for循环

for（外层的初始化变量；外层的条件表达式；外层的操作表达式）{

​ for（里层的初始化变量；里层的条件表达式；里层的操作表达式）{

​ //执行语句

}

}

外层循环一次，里面的循环执行全部

6.4 while循环

while（条件表达式）{//当条件表达式结果为真就执行循环体，否则退出循环

​ //循环体

}

var num=1;//初始化变量
while(num<=100){
  console.log('123');
  num++;//操作表达式
}

6.5 do while循环

do{

​ //循环体

}while（条件表达式）

先执行一次循环体 再判断条件 如果为真，则继续执行循环体，否则退出

6.6 continue break

continue：立即跳出本次循环，继续下一次循环。

break：立即跳出整个循环（循环结束）

7.js数组

7.1 数组的概念和创建数组

数组（Array）：一组数据的集合，其中每个数据被称作元素，数组中可以存放任意类型的元素。

创建数组

1.var arr = new Array();

2.var arr = [1,2,3,4,5 '老师'];// 逗号分隔

7.2 获取数组元素

数组的索引：用来访问数组元素的序号（从0开始）

console.log(arr[2])；// 获取序号为2的元素，也就是第三个

7.3 遍历数组

遍历数组：把数组中的全部元素全部从头到尾都访问一次（通过for循环）

arr.length 动态检测数组的长度

7.4 数组中新增元素

1.通过修改lenght长度 //默认值undefined

2.通过修改索引号 //新的就增加，有的就替换

8.js函数

8.1 函数的概念

函数：封装了一段可以被重复调用的代码块，让代码重复使用

8.2 函数的使用

1.声明函数

function 函数名（）{

​ //函数体

}

2.调用函数 //不调用 函数不执行

函数名（）；

函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口。

8.3 函数的参数

1.形参 //在声明函数的小括号里面是形参（形式上的参数）

2.实参 //在函数调用的小括号里面是实参（实际的参数）

function 函数名（形参1，形参2，形参3···）{
​
        //函数体
​
}
函数名（实参1，实参2，实参3···）；
​

3.形参是接收实参的

8.4 函数的返回值

return

function 函数名（）{
​
    return 需要返回的结果；
​
}
函数名（）；
​

1.函数只是实现某种功能，最终的结果需要返回给调用者函数名（），通过return实现

return 终止函数：后面的代码不会被执行

return只能返回一个值，多个返回最后一个值，想返回多个，用数组 // return[num1,num2]

​ 函数没有return，则返回undefined

 

8.5 arguments

不确定有多少个参数传递的时候，可以用arguments来获取，arguments对象中存储了传递的所有实参。//console.log（arguments）；

伪数组：不是真正的数组，3个特点

​ 1.具有数组的length属性

​ 2.按照索引方式进行存储

​ 3.没有一些真正数组的一些方法

8.6 函数的两种命名方式

1.function命名 // 命名函数

2.var 变量名 = function（）{}；//匿名函数

9.js作用域

9.1 作用域

作用域：代码名字在某个范围内起效果和作用，目的是提高程序的可靠性，减少命名冲突

两大类:

​ 全局作用域：整个script标签，或者是一个单独的js文件。

​ 局部作用域（函数作用域）：在函数内部就是局部作用域。

9.2 变量的作用域

​ 全局变量：在全局作用域下的变量。如果在函数内部没有声明直接赋值的变量也是全局变量

​ 局部变量：在局部作用域下的变量或者在函数内部的变量就是局部变量。函数的形参也可以看做是局部变量

全局变量只有浏览器关闭才会销毁，比较占资源。

局部变量程序运行后就会销毁，比较节约资源。

9.3 作用域链

内部函数访问外部函数的变量，采取的是链式查找（就近原则）来决定取那个值，这种方式叫作用域链。

10.js预解析

浏览器js解析器运行js代码分为两步：预解析 代码执行。

预解析：js引擎会把js里面所有的var（变量预解析）还有function（函数预解析）提升到当前作用域的最前面。//只提升声明，不提升赋值。

代码执行：按照代码顺序从上往下依次执行

11.js对象

11.1 对象

对象：一个具体的事物。//明星不是对象，周星驰是对象。

js对象：一组无序的相关属性和方法的集合。

​ 属性：事物的特征

​ 方法：事物的行为

11.2 创建对象的三种方式

1.利用对象字面量创建对象

    var obj = {
                uname: '可可',
                type: '阿拉斯加',
                age: 5,
                color:'棕红色',
                get1:function(){
                    console.log('汪汪汪');
                },
                get2:function(){
                    console.log('演电影');
                }
            }
            console.log(obj.age);
            console.log(obj.uname);
            obj.get1()
        </script>

2.利用new object创建对象

    <script type="text/javascript">
            var obj = new Object();
            obj.uname = '鸣人';
            obj.age = 19;
            obj.sex = '男';
            obj.get = function(){
              console.log('影分身');
            }
            console.log(obj.uname);
            console.log(obj.age);
            console.log(obj.sex);
        obj.get();  
        </script>

3.利用构造函数创建对象

一次可以创建多个对象，构造函数把对象里面一些相同的属性和方法抽象出来封装到函数里面。

function 构造函数名（）{

​ this.属性 = 值；

​ this.方法 = function（）{}

}

new 构造函数名（）；

1.构造函数的名字首字母要大写。

2.构造函数不需要return就可以返回结果。

3.调用构造函数必须使用new。

11.3 遍历对象

for in 遍历对象

 

 

12.js内置对象

12.1 内置对象

js对象分为3种：自定义对象，内置对象，浏览器对象

内置对象：js语言自带的对象，提供一些常用或基本的功能

12.2 Math内置对象

不是一个构造函数，不需要new，直接使用

 

12.3 Date内置对象

1.构造函数，必须使用new来创建。

​ var date = new Date（）；

2.括号里面参数常用的写法 数字型 2022,10,1 或者是字符串型 2011-10-1。月份返回是减一的0--11，要加一才对。

 

总的毫秒数（时间戳）

12.4 数组内置对象

var arr1 = new Arrar(2);/数组的长度为2
var arr2 = new Arrar(2,3);/数组里面有两个数组元素2和3

instanceof 运算符 检测是否为数组

var arr  = [];
console.log(arr instanceof Array);//true

Array.isArray（参数）；

数组的添加于删除

 

数组排序

arr.reverse（）；//翻转arr这个数组

arr.sort(); //冒泡排序，只能排个位数

arr.sort（function（a，b）{
  return a-b；//升序排列 b-a降序排列
}）//可以排多位数

数组的索引方法

arr.indexOf（参数）；返回arr数组中参数的索引号；参数重复只返回第一个；没有参数返回-1；

arr.lastIndexOf（参数）；返回arr数组中参数的索引号；参数重复只返回最后一个（从后往前查找）；没有参数返回-1；

数组转化为字符串

toString（）将数组转化为字符串//arr.toString（）

join（分隔符）将数组转化为字符串arr.join（'-'）用-进行分隔

12.5 字符串内置对象

基本包装类型：把简单数据类型包装成复杂数据类型

字符串不可变：地址变了，原来的空间还在

查找字符索引号str.indexOf（‘字符’，[从第几个字符开始查]）//可以跳过重复的查后面的位置

根据位置返回字符

charAt（字符位置）；//返回这个位置的字符

charCodeAt（字符位置）；//返回索引号的ASCII值，判断用户按了什么键（键盘对应相应的ASCII值）

str[字符位置]，h5新增

12.6 字符串操作方法

替换字符replace（‘被替换的字符’，‘替换为的字符’）//只替换第一个字符

字符转换为数组split（‘分隔符’）

13.js中的简单数据类型和复杂数据类型

 

13.1 简单数据类型和复杂数据类型

简单数据类型/基本数据类型：在存储时变量中存储的值是本身，因此也叫值类型，存放在栈里面，里面直接开辟一个空间存放的值

​ string number boolean undefined null（返回的是对象Object）

复杂数据类型：在存储时变量中存储的仅仅是地址（引用），因此也叫引用数据类型，通过new关键字创建的对象 object Array Data。首先在栈里面存放地址，十六进制表示，地址指向堆里面的数据。

14.web APIs

14.1

 

14.2 API和Web API

API（应用程序编程接口）

Web API（针对浏览器的接口）：浏览器提供一套操作浏览器功能（BOM）和页面元素（DOM）的API

15.DOM

15.1 DOM简介

DOM（文档对象模型）：处理HTML或XML的标准编程接口，将以下元素都看做对象。

文档：一个页面就是一个文档（document）

元素：页面中所以的标签都是元素（element）

节点：网页中所以内容都是节点（标签、属性、文本、注释等）（node）

15.2 获取元素

1.根据ID获取

使用document.getElementById（'id名'）//返回一个元素对象

2.根据标签名获取

使用document（可以指定父元素）.getElementsByTagName（'标签名'）//1.返回元素对象的集合，以伪数组的形式存储2.需要用遍历才能得到里面的元素对象3.如果页面中没有或者只有一个元素，返回的还是伪数组形式

3.h5新增方法获取

document.getElementsByClassName('类名')

document.querySelector（'选择器'）//返回指定选择器的第一个元素对象

document.querySelectorAll（'选择器'）//返回选择器的所有元素对象集合

4.获取特殊元素（body HTML）

document.body//获取body元素对象

document.documentElement//获取html元素对象

15.3 事件基础

触发---响应机制

事件由三部分组成（事件三要素）

1.事件源：事件被触发的对象（谁被触发）

2.事件类型：怎么触发（比如鼠标点击（onclick） 鼠标经过 键盘按下）

3.事件处理程序：通过一个函数赋值的方式完成

执行事件步骤：

1.获取事件源

2.绑定事件（添加事件）

3.添加事件处理程序

 

15.4 操作元素

DOM操作

1.改变元素内容

element.innerText = '改变后的内容'//不识别html标签，会去除空格和换行，会去除html标签

element.innerHTML = '改变后的内容'//识别html标签，不会去除空格、换行、html标签

2.常用元素的属性操作

src、href、id、alt、title

3.表单元素的属性操作

4.样式属性修改

获得焦点onfocus

失去焦点onblur

5.排他思想

1.所有元素清除样式

2.给当前元素设置样式

6.自定义属性操作

element.属性 //获取属性值，主要获取元素本身自带的值

element.getAttribute（‘属性’）//获取属性值，可以获取自定义属性的值

element.属性 = ‘’ //修改属性，主要修改元素本身的属性值

element.setAttribute（'属性','修改的值'）//修改属性，主要修改自定义属性的值，也可以添加新属性

removeAttribute（‘属性’）//移除属性

7.H5自定义属性

H5规定所有自定义属性以data-开头

新增element.dataset【'属性'】和element.dataset.属性；可以获取自定义属性的值// 只能获取data开头的属性，如果自定义属性里面有多个-，获取的时候采取驼峰命名法

15.5 节点操作

利用节点间的层级关系获取元素，操作更简单

父级节点：node.parentNode//得到离元素最近的父级节点，找不到父节点返回null

子节点：parentNode.childNodes//得到全部子节点，包括文本节点，一般不提倡

​ parentNode.children//只得到元素节点，一般用这个

​ parentNode.firstchild//获取第一个子节点，包括文本节点

​ parentNode.lastchild//获取最后一个子节点，包括文本节点

有兼容性问题：

​ parentNode.firstElementChild//获取第一个子元素节点

​ parentNode.lastElementChild//获取最后一个子元素节点

实际开发常用：

​ parentNode.children[0]//获取第一个

​ parentNode.children[parentNode.children.length-1]//获取最后一个

兄弟节点：

不好用：

​ node.nextSibling//返回当前元素的下一个兄弟节点，包括文本节点。找不到返回null

​ node.previousSibling//返回当前元素的上一个兄弟节点，包括文本节点。找不到返回null

兼容性问题：

​ node.nextElementSibling//返回当前元素的下一个兄弟元素节点，找不到返回null

​ node.previousElementSibling//返回当前元素的下一个兄弟元素节点，找不到返回null

创建节点

document.createElement（'创建的节点'）

node.appendChild（Chile）//node是父级元素 child是子级 在后面追加元素

node.insertBefore（Chile，指定元素）//node是父级元素 child是子级 在指定元素前面追加元素

删除节点

node.removeChild（child）//删除元素

复制节点

node.cloneNode（）//括号为空，只复制标签，不复制内容，括号里面为true，内容也会被复制

三种动态创建元素的区别

 

 

16.事件高级

16.1 注册事件

给元素添加事件，称为注册事件或者绑定事件

注册事件由两种方式：传统方式和方法监听注册方式

 

 

16.2 删除事件

 

方法注册删除需要命名函数

16.3 DOM事件流

事件流描述的是从页面中接收事件的顺序

 

 

事件委托：

不给每个子节点单独设置事件监听器，而是将事件监听器设置在父节点上，热后利用冒泡原理影响设置每个子节点，只操作了一次DOM,提高效率

常用鼠标事件：

 

常用键盘事件

 

onkeypress区分字母大小写，另两个不区分

三个事件的执行顺序

onkeydown--onkeypaess--onkeyup

keyCode：返回该键的ASCLL值

17.BOM

17.1 BOM概述

BOM（浏览器对象模型）：独立于内容而与浏览器窗口进行交互的对象，核心对象为window。

 

window：网页中最大的对象，全局变量，对话框属于window对象

17.2 页面加载事件

window.onload //当文档内容加载完成后才触发该事件，一般只能写一个，如果有多个，以最后一个为准，如果用addEventListener就没有这个限制

document.addEventListener（‘DOMContenLoaded’，function（）{}）//先加载DOM，不包括图片、css、flash等就可以执行，加载速度快

17.3 调整窗口大小事件

window.onresize = function（）{}

window.addEventListener =（ “resize”，function（）{}）//窗口大小发生变化就会执行

window.innerWidth、window.inneHeight//获取当前浏览器窗口的宽度和高度

17.4 定时器

两种定时器：

1.setTimeout（）

window.setTimeout(调用函数,[延迟的毫秒数]);//也称为回调函数callback，需要等待时间，时间到了才去执行这个函数。当延迟毫秒数到了就执行调用函数，只能执行一次，window可省略。调用函数可以写函数名。定时器可能有很多，一般会命名。

window.clearTimeout（timeoutID）//停止定时器

2.setInterval（）

window.setInterval（回调函数，[间隔的毫秒数]）//setInterval和setTimeout的区别：前者每隔延时时间，就去调用这个函数，会调用很多次，重复调用这个函数，后者延时时间到了，就去调用这个函数，只调用一次，就结束了这个定时器

window.clearInterval//停止计时器

17.5 this指向问题

 

17.6 js执行机制

js一大特点就是单线程，同一时间只能做一件事，而js代码的执行顺序是从上到下的，如果前一个进程执行时间过长就会影响后面代码的执行，为了解决这个问题，HTML5提出新标准，允许js脚本创建多个线程，于是js中出现了同步和异步（本质还是单线程）

同步：上面执行后才执行下一个任务。

同步任务：都在主线程上执行，形成一个执行栈。

异步：做一件花时间的任务时，在做这件事情时，还可以处理其他事情。//和同步的本质区别，执行顺序不同。

异步任务：js的异步是通过回调函数实现的，一般有以下几种类型

​ 1.普通事件：click、resize等

​ 2.资源加载：load、error等

​ 3.定时器：settInterval、setTimeout等

异步任务相关回调函数添加到任务队列中（也称消息队列）

执行机制：

1.先执行执行栈中的同步任务

2.异步任务放入任务队列中

3.执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，被读取的异步任务结束等待状态，进入执行栈，开始执行。

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环(event loop)。

17.7 location对象

用于获取或设置窗体的URL，并且可以用于解析URL，返回值为一个对象。

URL（统一资源定位符）：是互联网上标准资源的地址，互联网上每个文件都有一个唯一URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

 

 

navigator对象：包含有关浏览器的信息，有很多属性，最常用的是userAgent，该属性可以返回由客户发送服务器的user-agent头部的值。

判断用户用什么终端打开页面，实现跳转

 

history对象：控制页面前进后退，back（）后退、forward（）前进、go（参数）参数为1前进1个页面，参数为-1后退1个页面。//可后退前进多个页面。

18.PC端网页特效

18.1 元素偏移量offset系列

 

offset与style区别

 

18.2 元素可视化client系列

client（客户端）：获取元素可视化的相关信息，动态得到该元素的边框大小，元素大小。

 

立即执行函数：不需要调用，立马能自己执行，

独立创建了一个作用域，里面所有的变量都是局部变量，避免了命名冲突。

用法：（function（）{}）（）或者（function（）{}（））

18.3 元素滚动scroll系列

 

3大系列对比

 

 

 

18.4 动画函数封装

动画实现原理：通过定时器setInterval（）不断移动盒子位置。

缓动效果原理：速度不均匀，速度慢慢停下来，公式（目标值-现在的位置）/10.

动画回调函数：函数作为一个参数，将这个函数作为参数传到另一个函数里面，当函数执行完之后，再执行传进去这个函数，这个过程叫做回调，回到函数写到定时器结束的位置。

19.移动端网页特效

19.1 触屏事件

移动端兼容性很好，一般不考虑兼容问题

 

触摸事件对象

 

版权声明：本文为qq_48321086原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。