本文主要是介绍JavaScript，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

历史

创始人：布兰登·艾奇

运行在客户端的脚本语言，不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释并执行。现在也可以基于node.js技术进行服务器编程。编程类语言。实现业务逻辑和页面控制。

作用：表单动态校验、网页特效、服务端开发、桌面程序、App、控制硬件-物联网、游戏开发

浏览器执行：

浏览器分为俩部分：

渲染引擎：内核，解析HTML与CSS，

JS引擎：JS解释器，用来读取网页中的JavaScript代码。浏览器本身不会执行JS代码，他会通过JS引擎把它转换成机器语言，然后计算机才能对其处理。逐行转换代码（对机器解释代码），逐行解释执行。一行一行执行，出现错误之后的就不会执行了。

js三部分组成：JS基础，JSAPI

ECMAScript：一个标准，基础语法

DOM：文档对象模型，对元素进行操作

BOM：浏览器对象模型，对浏览器窗口进行操作

计算机不能直接执行除了机器语言以外的任何语言，需要把程序员所写的程序语言翻译成机器语言才能执行。程序语言翻译成机器语言的工具，被称为翻译器。翻译器翻译的方式有俩种：编译、解释，区别在于翻译的时间点不同

解释型语言：JS。解释器：在运行时进行即时解释，并立即执行。

编译型语言：Java。编译器：在代码执行之前进行编译，生成中间代码文件。

标识符：开发人员为变量、属性、函数、参数取的名字。标识符不能是关键字或保留字。

关键字：JS本身已经使用了的字，不能再用他们充当变量名、方法名。

保留字：预留的“关键字”，现在虽然还不是关键字，但未来可能会成为关键字。

js三种书写位置：

行内：HTML标签的事件属性中

内嵌：<script></script>

外部：<script src=”xx.js”></script>

js注释：

//单行

/**/多行

js输入输出语句：

给客户看的，

输入：浏览器弹出的输入框prompt（info）

输出：浏览器弹出的输出框alert（msg)

给程序员看的

输出：控制台console.log（msg)

变量：保存数据，在内存中申请的一块用来存放数据的空间。

a 组成：

变量名，空间（在内存中存储）。通过变量名来访问内存空间

b 变量的使用：声明变量，赋值，变量的初始化

声明变量var age，sex;

//声明一个名称为age的变量，在内存中开一个空的空间，多个变量声明用逗号隔开

//var是一个JS关键字，使用之后，计算机自动为变量名分配空间

赋值age = 10;

//给age赋值为10，将10放到存储空间里

变量的初始化var myname = ‘pzy’;

//声明一个变量的同时并赋值。

c 更新变量

：一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。赋值不要var，因为不需要重新开辟空间。

d 变量命名：

由字母（a-z）（A-Z）数字（0-9）下划线（_）美元符号（$）组成

不能以数字开头，不能是关键字或者保留字。

变量名称有意义，一般是名词，用英文单词，小驼峰，严格区分大小写。

数据类型：

不同的数据所占用的存储空间是不一样的，充分利用存储空间。

弱类型语言，不用提前声明变量的类型，在程序运行过程中，根据所存储的数据类型来确定变量数据类型。

简单类：number、Boolean、string、undefined、null

a number：数字型。整型、浮点型，默认0。var a = 10;var b = 1.2;

二进制

八进制(前面加0)var a = 010;//(0-7)（7+1=8）8

十进制

十六进制（前面加0x）var a = 0xa;//(0-9,a-f)10

JS中的最大值：Number.MAX_VALUE

JS中的最小值：Number.MIN_VALUE

无穷大，大于任何数值Infinity

无穷小，小于任何数值-Infinity

非数值，NaN，（not a number）isNaN()判断是否非数值的方法，是数字返回f,不是数字返回t

b Boolean：布尔值类型。true、false，默认false。布尔值类型可以作为0或1参与数值运算。

例：true+1;//2

c string：字符串类型。’’。嵌套：外单内双，外双内单

转义符：写到字符串引号里面

\n，换行

\\，斜杠\

\’，单引号’

\”，双引号”

\t，缩进，tab键

\b，空格，作用未明确……

字符串长度：.length（引号内的字符数量，包括空格，有几个空格算几个）

字符串拼接：+

d undefined：未定义，声明了没有给其赋值。var a;也就是什么都有可能，不确定。

例：var a;

a;//undefined

a+1;//NaN

a+true;//NaN

a+’str’;//undefinedstr

也可以给值undefined，var a = undefined

注意：不声明不赋值会被报错；

不声明直接赋值可以执行，但是会变成一个全局变量，不提倡使用。

e null：声明变量为空。var a = null;表示了就是空的。

例：var a = null;

a;//null

a+1;//1

a+true;//1

a+’str’;//nullstr

检测变量数据类型：typeof

var a = 10;

console.log(typeof a);//Number

特殊的是：null检测出来是object

字面量：固定值的表示方法。字面量表示如何表达这个值，一眼看过去就知道是什么数据类型

数据类型的转换：把一种数据类型的变量转换成另一种数据类型。

转换为字符串类型：三种

toString()转成字符串（变量.toString()）

String()强制转换成字符串（String(变量)）

加号拼接字符串（隐式转换）

转换为数字型：四种

parseInt(string)函数：将string类型转成整数数值型（parseInt(‘2’)）

从前到后，遇到的数字都转换，输出遇到的数字，遇到其他的就不要，要是没有数字输出输出NaN

parseFloat(string)函数：将string类型转成浮点数数值型，可以取小数，和第一个其他的一样

（parseFloat(‘2.2’)）

Number()强制转换函数：将string类型转换为数值型（Number(‘2’)），可以输出整数或者小数，只要字符串里有其他的符号，输出NaN

隐式转换(- * /)利用算术运算隐式转换为数值型（’2’-0）(加号是转换为字符型)

转换为布尔型：一种

Boolean（东西）函数

代表空、否定的值，被转换为false

null、undefined、0、‘‘、NaN

object：function、array、object

数组：可以把一组相关的的数据一起存放，并提供方便的访问（获取）方式。一组数据的集合，每个数据被称作元素，在数组中可以存放任意数据类型的元素。将一组数据存放在单个变量名下。

创建数组：

new：var 数组名 = new Array();

字面量：Array 数组名 = [];

再赋值，可以被其他数据类型覆盖

数组索引：

数组名[索引号]

用来访问数组元素的序号（数组下标从0开始）

遍历数组：

把数组中的每个元素从头到尾访问一遍。

for(){

}

新增元素：

修改length长度，新增的话，里面是空的

修改索引号，变量名[索引号]=元素，也可以用这个替换元素

函数：封装了一块可以被重复执行调用的代码块。

相同的代码或者功能相似的代码，这些代码可能需要大量重复使用。

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

函数的使用：声明函数、调用函数

声明函数：函数名最好用动词

function 函数名(){

    函数体

}

调用函数：函数不调用，自己不执行。

函数名();

命名方式

函数表达式,fn是变量名，不是函数名，这是匿名函数

var fn = function(){};

fn();

函数的参数：

形参：写在声明函数的小括号里，形式上的参数，形参是接收实参的，可以看作是不用声明的变量

实参：写在函数调用的小括号里，实参是实际参数

function 函数名（形参）{

}

函数名(实参)

函数形参和实参的匹配：

俩个个数一样，刚好匹配

实参多，形参少，匹配前面几个，后面几个当没看到

实参少，形参多，形参没有接收到变量，类似于只声明不定义，undefined

函数的返回值：

return语句：函数只是实现某种功能，最终的结果需要返回给调用者。

只要函数遇到return，就把后面的结果返回给调用者，类似于：函数名()=return后面的值。

实际开发中，经常用一个变量来接收返回结果。

功能：返回结果，只能返回一个值，如果逗号隔开多个值，只能返回最后一个。若想返回多个值，用数组或者对象。终止函数。return后面的就不再执行。

如果没有返回值，返回undefined

arguments的使用：

当前函数的内置对象，所有的函数都有，存储了传递过来的所有实参。

不知道有几个实参的时候，用arguments查看。

以伪数组的形式来展示，并不是真正意义上的数组，具有数组的length属性，按照索引的方式进行存储的，没有真正数组的一些方法，例如push()；

函数调用另一个函数：

可以在一个函数内，直接调用另一个函数。

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

全局作用域à全局变量： 全局或者函数内都可以使用，直到浏览器关闭才会销毁，比较占内存。在全局声明赋值的，或在函数内部没有声明直接赋值的。

局部（函数）作用域à局部变量：在函数内部，只在函数内部起作用，函数执行完毕就销毁，比较节省内存。在函数内部声明赋值，或者形参也可以看作局部变量。

块级作用域：用{}包的内容

作用域链：只要是代码，就有一个作用域。

根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链。

就近原则；

预解析：JS引擎在运行JS代码的时候分为俩步，预解析和代码执行。

预解析：JS引擎会把JS里面所有的var还有function提升到作用域的最前面。

代码执行：按照代码书写的顺序从上往下执行。

预解析分为：变量预解析（变量提升）和函数预解析（函数提升）

变量预解析：把所有的变量声明提升到当前作用域的最前面，不提升赋值。

函数预解析：把所有的函数声明（整个函数包括函数体）提升到当前作用域的最前面，不调用函数。

对象：对象是一个具体的事物，看得见摸得着的实物。

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

对象复杂数据类型object

属性：事物的特征，在对象中用属性来表示。（常用名词）

方法：事物的行为，在对象中用方法来表示。（常用动词）

保存一个值，可以使用变量；保存多个值（一组值），可以使用数组；保存一个人的完整信息，使用对象。对象表达结构更清晰，更强大。

三种创建方法：

a) 字面量创建对象：花括号{}里面包含了具体事物（对象）的属性和方法

var obj = {//创建了一个对象

    uname:'杀杀杀',

age:11,

//属性或方法采用键值对的形式。键：属性名：值：属性值，多个属性用逗号隔开

sayHi:function(){

//方法是冒号后边跟一个匿名函数

        console.log('hi');

}

};

b) new object创建对象：

var obj = new Object();

//创建了空的对象，利用等号赋值的方法添加对象的属性和方法

obj.uname = '杀杀杀';

obj.sayHi = function(){

    console.log('hi');

}

c) 构造函数创建对象：用构造函数创建对象的时候，通过new关键字创建对象的过程也称为对象实例化。

把对象里面一些相同公共的属性和方法抽象出来封装到函数里面。

一种特殊的函数，主要用来初始化对象，为对象成员变量赋初始值，总与new运算符一起使用。

function yingx(uname,type,blood,attack) {//构造函数泛指某一大类，比如这儿

是英雄

    this.name = uname;

    this.type = type;

    this.blood = blood;

    this.attack = attack;

    this.skil = function (st) {

        console.log(uname+'作用是：'+st);

}

//构造函数不需要return就可以返回结果，返回的结果是一个对象

}

//使用new调用构造函数。var 对象名 = new 构造函数名（要传的实参）；

//对象实例化特指一个事物，比如这儿是廉颇

var lp = new yingx('廉颇','力量型','500血量','近战','扛伤');

var hy = new yingx('后裔', '射手型', '100血量', '远战');

 console.log(lp); 

//调用对象的属性，俩种方法

 lp.name;

 lp['age'];

//调用对象的方法：对象名.方法（方法的实参）；

 lp.skil('扛伤'); 

使用new实例化一个对象的工作过程：

先在内存开一个新的空对象，

然后让构造函数里的this指向这个新对象，

执行构造函数里的代码给新对象添加属性方法，

返回新对象。

遍历对象属性的方法：for in遍历我们的对象，循环操作

for (var k in lp) {//（var 变量 in 对象）变量最好用key或者k

    console.log(k);//属性名

    console.log(lp[k]);//属性值

}

运算符：也称为操作符，用于实现赋值、比较和执行算术运算等功能的符号。

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

返回值：表达式最终都会有一个结果，返回给我们，我们称为返回值。

规范：运算符左右用空格

a 算术运算符：加+、减-、乘*、除/、取余数%

浮点型容易出问题，小数容易出问题。

有优先级，先乘除后加减，有括号就先算括号里面的。

b 递增和递减运算符：反复给数字变量加一或减一

前置递增（递减）运算符：++a;--a;先自加自减，后返回值。

后置递增（递减）运算符：a++;a--;先返回值，后自加自减。

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

<小于

>大于

<=小于等于

>=大于等于

==判等号，会转型

!=不等号

=== !==全等号，要求值和数据类型都一样

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

&&与：俩个都为真true

||或：俩个都是假false

!非：取反

短路运算（逻辑中断）：当有多个表达式时，左边的表达式可以直接确定结果的时候，就不再继续执行逻辑运算符右边的值，右边的被短路。

与：左真，返回右；左假，返回左

或：左真，返回左，左假，返回右

e 赋值运算符：把数据赋值给变量的运算符

=：直接赋值

+=、-=：加、减一个数后再赋值

*=、/=、%=：乘、除、取余后再赋值

例：var a = 10;

a %= 3;//等价于a = a% 3//10%3=1

f 运算符优先级

（）小括号

一元运算符 先!a 后a++;；

算术运算符：先* / % 后+ -

关系运算符：< <= > >=

相等运算符：== != === !==

逻辑运算符：先&&，后||

赋值运算符：=

逗号运算符：，

流程控制：控制代码的执行顺序来实现我们要完成的功能。

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

顺序结构：没有特定的语法结构，程序按照代码的先后顺序、依次执行

分支：从上往下执行代码的过程中，根据不同的条件，执行不同的路径代码（多选一），从而得到不同的结果。

if：

二选一

if(条件表达式){

    执行语句

}else{

    执行语句

}

多选一：更灵活，判断范围

if(条件表达式){

    执行语句

}else if(条件表达式){

    执行语句

}else{

    执行语句

}

switch：多选一，针对特定值，执行效率比if else高，多分支时推荐。

根据表达式返回的值，和value对比，有全等的就执行，数据类型和值都一致。若都没有，进入default

switch（表达式）{

    case value1:

       执行语句1；

       break；

    case value2:

       执行语句2；

       break；

    case value3:

       执行语句3；

       break；

    default：

       执行最后的语句

}

每个case必须有break;表示退出switch分支。或者循环结束，跳出循环。

continue表示立即退出本次循环，继续下一次循环。

三元：简单的条件选择，二选一

条件表达式?执行语句1：执行语句2

为真，执行1；为假，执行2

循环结构：可以重复执行某些代码

在程序中，一组被重复执行的语句被称为循环体，能否继续重复循环，取决于循环的终止条件。

由循环体及循环的终止条件组成的语句，被称为循环语句。

for

for(初始化变量；条件表达式；操作表达式){

    循环体

}

初始化变量，var声明的一个普通变量，通常用作计数器使用

条件表达式：决定每一次循环是否继续执行，终止的条件

操作表达式：每次循环最后使用的代码，通常用于计数器变量（递增或者递减）

执行顺序：初始化变量、条件表达式、循环体、操作表达式à条件表达式、循环体、操作表达式à条件表达式、循环体、操作表达式à…à条件表达式（不满足退出）

双重for循环，里面的循环是外面循环的语句。外面循环一次，里面循环全部。

while

while(条件表达式){

    循环体

    循环体里面应该有计数器，防止死循环

}

可以做一些更复杂的

do while

do{

    循环体

    计数器，防止死循环

}while(条件表达式)

至少执行一次

对象：自定义对象、内置对象（ECMAScript里的）、浏览器对象（API里的）

内置对象：JS语言自带的一些对象，提供了一些常用的或最基本而必要的功能（属性和方法）

查文档：查MDN文档/W3C

查看该方法的功能，查看参数意义以及类型，查看返回值的意义和类型，测试

math对象：

Math.max();最大值

Math.min();最小值

Math.abs();绝对值

取整：

Math.floor();退九

Math.ceil();进一

Math.round();四舍五入

取随机数

Math.random();返回一个随机的小数，[0,1)

date对象：是一个构造函数，必须用new调用。

var date = new Date();

参数的写法

数字型 2021，09，16

字符串型 ‘2021-9-1 12:12:12’

方法：

..getFullYear()获取当年

..getMonth()+1获取当月

..getDate()获取当天的日期

..getDay()获取星期几，周日返回0

..getHours()获取当前小时

..getMinutes()获取当前分钟

..getSeconds()获取当前秒钟

..valueOf()/..getTime()/var time = +new Date()/Date.now()

//时间戳，也就是现在距离1970年的总毫秒

array对象

var arr = new Array();//空数组

var arr1 = new Array(2);//表示数组长度是2，里面有俩个空的

var arr2 = new Array(2,3);//表示[2,3]

检测是否为数组：

变量名 instanceof 类型Array

Array.isArray(变量名)

添加删除数组元素的方法：

..push()在数组的末尾添加一个或多个数组元素，括号里直接写数组元素，返回值是数组的长度

..unshift();在数组的前面添加

..pop()；删除数组的最后一个元素，一次一个，没有参数，返回值是删除的元素

..shift();删除数组的第一个元素

数组排序：

..reverse（）翻转效果

..sort()排序，有问题

..sort(function(a,b){return a-b;})升序的顺序排列

索引

..indexOf(元素)从前往后，返回结果是数组元素的索引，只会找到第一个，找不到返回-1

..lastIndexOf();从后往前查找

数组转换为字符串

..toString()没有参数，返回1，2，3这种

..join(‘分隔符’)参数是分隔符，返回有分隔符的字符串

..concat()连接俩个或者多个数组，参数是连接的数组返回新数组，不影响原数组

..slice(start，end)：[start，end）截取数组，返回被截取的部分按数组返回

..splice(start,length)数组删除，返回删除过后的新数组，原数组改变

string

基本包装类型：把简单数据类型包装成为复杂数据类型，这样简单数据类型有属性和方法（String、Number、Boolean）

var str = ‘www’;//简单数据类型

var temp = new String(‘www’);//生成临时变量，把简单类型包装成复杂数据类型

str = temp;//赋值给我们声明的字符变量

temp = null;//销毁临时变量

字符串不可变

指里面的值不可变，虽然看上去变了，但实际上是地址变了，新开辟了空间。原来的还在，只是不再指向。所以不要大量使用字符串。

根据字符返回位置

字符串所有的方法都不会修改它本身，操作完成返回一个新的字符串。

..indexOf(‘要查找的字符’,开始的索引位置)从前往后，返回结果是查找元素的索引，只会找到第一个，找不到返回-1

..lastIndexOf();从后往前查找

根据位置返回字符：

..charAt（index）：返回指定位置的字符

..charCoderAt(index)：获取指定位置处字符的ASCII码，判断用户按下的哪个键

str[index]：获取指定位置处字符

拼接以及截取字符串

..concat(atr1,str2,...)：连接俩个或多个字符串，拼接字符串，等价于+，返回新数组，不影响原数组

..substr(start,length)：从start开始，取几个

..slice(start,end)：[start，end）

..substring(start,end)：[start，end）不接受负值

替换字符串以及转换为数组：

替换字符串

..replace（‘被替换的’，‘替换为的’）：只会替换第一个

把字符串转换为数组

..split（‘分隔符’）：字符串分割的分隔符，

转换大小写：

toUpperCase()：转换大写

toLowerCase()：转换小写

数据类型内存分配：

堆和栈：

栈：由操作系统自动分配释放存放函数的参数值、局部变量的值等。

堆：存储复杂数据类型（对象），一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。

简单类型:基本数据类型或值类型。在存储时变量中存储的是值本身

string、number、Boolean、undefined、null（特殊，返回一个空的对象）

复杂数据类型：引用类型。在存储时变量中存储的仅仅是地址（引用），因此叫做引用类型。地址十六进制0x

通过new关键字创建的对象（系统对象、自定义对象），如object、array、date等

简单数据类型传参：

函数的形参也可以看作是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到外部变量。

复杂数据类型传参：

函数的形参也可以看作是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。

编程思想：

面向过程POP：分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用。朝着步骤实现。分析好步骤，按照步骤一步一步实现。

优点：性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程

缺点：没有面向对象易维护、易复用、易扩展

面向对象OOP：把事物分解成一个个对象，然后由对象之间分工与合作。先找出对象，并写出对象的功能，调用对象的功能。以对象功能划分问题。每一个对象都是功能中心，具有明确分工。

面向对象变成具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。

优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态的特性，可以设计出低耦的系统，使系统更加灵活、更易于维护。

缺点：性能比面向对象低

特性：封装性、继承性、多态性。

封装：封装代码

继承：子类继承父类

多态：同一个对象在不同的时态体现不同的状态

类和对象的关系：

抽象：泛指的，对象共用的属性和行为组织（封装）成一个类（模板），构造函数

具体：特指的，对类进行实例化、获取类的对象，通过构造函数new一个函数

对象：是一个具体的事物，看得见摸得着的实物。是一组无序的相关属性和方法的集合，所有的事物都是对象。

对象是由属性和方法组成的：属性是事物的特征、方法是事物的行为

类：可以使用class关键字声明一个类，之后以这个类来实例化对象。

类抽象了对象的公共部分，泛指某一大类（class）

对象特指某一个，通过实例化一个具体对象。

用class创建自定义类

class 类的名字{类名首字母大写

}

new 类的名字（）；利用类创建对象

constructor（）方法：类constructor构造函数，

constructor（）方法是类的构造函数（默认方法），用于传递参数，返回实例对象，通过new命令生成对象实例时，自动调用该方法，如果没有显式定义，类内部会自动给我们创建一个constructor（）

继承

Web APIs

JS组成

ECMAScript（基础语法）、DOM（页面文档对象模型）、BOM（浏览器对象模型）

API：应用程序编辑接口，是一些预先定义的函数，提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现。

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

一般都有输入和输出（函数的参数和返回值），Web API很多都是方法（函数）

DOM简介：

文档对象模型，是W3C组值推荐的处理可扩展标记语言的标准编程接口

W3C定义了一系列的DOM接口，通过接口可以改变网页的内容、结构和样式

DOM树：

文档：一个页面就是一个文档，DOM中用document表示

元素：页面中的所有标签都是元素，DOM中用element表示

节点：页面中的所有内容都是节点（标签、属性、文本、注释等），DOM中用node表示

以上所有都可以看作是一个对象，有自己的属性和方法。

DOM在实际开发中主要用来操作元素。

获取页面元素：因为文档从上往下，所以script在标签后面

根据ID获取：document.getElementById（）参数是大小写敏感的字符串，如果有返回元素对象，没有则返回null。get获得element元素byID

根据标签名获取：getElementsByTagName（）返回带有指定标签名的对象的集合，伪数组的形式返回；如果没有元素，返回空的伪数组。

如果想获取单个的，就像数组要索引

获取某个元素（父元素）内部所有指定标签名的子元素：父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己。

先获取父元素，获取的是单个的明确的父元素；再用获取到的父元素去获取内部的子元素

通过HTML5新增的方法获取：

通过类名获得：document.getElementsByClassName（‘类名’）返回集合，伪数组

根据指定选择器返回第一个元素对象：document.querySelector（’选择器’）

根据指定选择器返回所有的元素对象：document.querySelectorAll（’选择器’）以伪数组集合的形式返回

特殊元素获取：（body、html）

获取body标签：document.body返回body元素对象

获取html标签：document.documentElement返回html元素对象

给元素注册事件：

事件三要素：

事件是可以被JavaScript侦测到的行为

触发—响应机制：网页中的每个元素都可以产生某些可以触发JavaScript的事件。

事件是由三部分组成：

事件源：事件被触发的对象。要获得事件源，获得元素

事件类型：如何触发，什么事件。注册事件（绑定事件）

事件处理程序：通过一个函数赋值的方式完成。采用函数赋值形式

事件源.事件类型 = function(){事件处理程序}

如果不添加事件，那么就是页面刷新可以直接出现

事件类型：

onclick鼠标点击

onmouseover鼠标经过

onmouseout鼠标离开

onfocus获得鼠标焦点时

onblur失去鼠标焦点时

onmousemove鼠标移动时触发

onmouseup鼠标弹起触发

onmousedown鼠标按下触发

操作DOM元素的属性：

DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。

改变元素的内容：这俩个属性是可读写的，可以获取元素里面的内容。

element.innerText从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

element.innerHTML起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

src改变路径

href改变路径

id改变id

alt改变alt

title改变文字描述

表单元素的属性操作：

type类型属性

value值属性

checked选择的

selected

disabled是否被使用

样式属性操作：element.style

element.className

创建元素：

操作DOM节点：

交互编程三要素：

用户输入（prompt），程序内部处理，输出结果（alert）

一个方法：

作用，参数，返回值

炉甘石洗剂，痘痘

甲硝锉凝膏，黑头

多磺酸粘多糖乳膏，痘印

三月理，美白

周二，学到190节，75节

周三，学到266，76节

191-265，DOM，75节

266-357,BOM，90节

jQuery,358-420,62节

jQuery，358

a

b

c

d

e

document类型

表示整个HTML文档

属性：body、head、title

方法：document.getElementById();//通过元素的id获取元素节点

document.getElementsByClassName();

作用：

element类型

text类型

comment类型

ES6 2015年之后发布的

constant表示常量，只能在声明的时候赋值

这篇关于JavaScript的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！