目录

一、JavaScript介绍

二、JavaScript与ECMAScript的关系

三、JavaScript引入到文件

四、JavaScript输出方式

五、数据类型

六、运算符

七、条件语句

八、字符串

1.简介

2.属性

3.方法

a. charAt()

b.concat()

c.substring()

d.substr()

e.indexOf()

f.trim()

g.split()

九、数组

数组的遍历

数组方法

1.Array.isArray()

2.push()/pop()

3.shift()/unshift()

4.join()

5.concat()

6.reverse()

7.indexOf()

十、函数

十一、对象

1.简介

2.Math对象

1.Math.abs()

2.Math.max()，Math.min()

3.Math.floor()，Math.ceil()

4.Math.random()

3.Date对象

1.Date.now()

2.时间戳

3.实例方法get类

十二、DOM概述

1.介绍

2.节点

3.节点树

4.document对象_方法/获取元素

a.getElementsByTagName()

b.getElementsByClassName()

c.getElementsByName()

d.getElementById()

e.querySelector()

f.querySelectorAll()

5.document对象_方法/创建元素

a.document.createElement()

b.document.createTextNode()

c.document.createAttribute()

6.Element对象_属性

a.Element.id

b.Element.className

c.Element.classList

d.Element.innerHTML

e.Element.innerText

7.Element获取元素位置

8.CSS操作

a.setAttribute

b.元素节点的 style 属性

c.cssText 属性

9.事件处理程序

a.HTML事件处理

b.DOM0级事件处理

c.DOM2级事件处理

10.事件类型之鼠标事件

11.Event事件对象

1 Event.Target

2 Event.type

3 Event.preventDefault()

4 Event.stopPropagation()

12.事件类型之键盘事件

13.事件类型之表单事件

1 input事件

2 select事件

3 Change事件

4 reset事件

5 submit事件

14.事件代理(事件委托)

15.定时器

1 setTimeout ()

2 setInterval ()

16.防抖(debounce)

17.节流(throttle)

十三、总结

前言

大二暑假在家，由于之前在学校做课设的时候，自己想做好看的界面，但总是在样式上调试很久，参考网上代码时也有些地方看不懂，想着系统复习和学习一下前端知识，希望能在以后的项目里熟练地写出好看的界面。为了记录我的学习过程也方便我以后查看，于是就有了在CSDN上写博客的想法。这篇是关于JavaScript的总结！

一、JavaScript介绍

JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”，指的是它不具备开发操作系统的能力，

而是只用来编写控制其他大型应用程序的“脚本”。JavaScript 是一种嵌入式语言。

它本身提供的核心语法不算很多。

二、JavaScript与ECMAScript的关系

ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。

三、JavaScript引入到文件

1.嵌入到HTML文件中,body或者head标签里。

<body>

<script>

var age = 20

</script>

</body>

2.引入本地独立JS文件。

<body>

<script type="text/javascript"src="./itbaizhan.js">

</script>

</body>

3.引入网络来源文件

<body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js">

</script>

</body>

四、JavaScript输出方式

1.弹出对话框

alert("要输出的内容");

ps：在浏览器中弹出一个对话框,然后把要输出的内容展示出来,

alert都是把要输出的内容首先转换为字符串然后在输出的

2.在页面中输出

document.write("要输出的内容");

3.在控制台输出内容

console.log("要输出的内容");

五、数据类型

JavaScript 语言的每一个值，都属于某一种数据类型。JavaScript 的数据类型，共有六种。（ES6 又新增了第七种 Symbol 类型的值和第八种 BigInt类型）

1.原始类型(基础类型)：数值number、字符串string、布尔值boolean

var age = 20;

var name = "尚学堂";

var learn = true;

2.合成类型(复合类型)

对象object：因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器。

var user = {

name:"尚学堂",

age:20,

learn:true

}

温馨提示：

至于undefined和null，一般将它们看成两个特殊值。

六、运算符

1.对象运算符 typeof

typeof 123 // "number"

typeof '123' // "string"

typeof false // "boolean"

typeof {} // "object"

unll和undefined的区别:都表示“没有”，语法效果几乎没区别，可以说一个是数值为空，一个是对象为空

2.算术运算符

加：10 + 10; // 20

减：100 - 10; // 90

乘：10 * 2; //20

除：10 / 5; 2

余数：13 % 5 // 3

自增：var x = 1; ++x // 2

自减：var y = 1; --y // 0

ps:自增和自减运算符有一个需要注意的地方，就是放在变量之后，会先返回变量操作前的值，再进行自增/自减操作；放在变量之前，会先进行自增/自减操作，再返回变量操作后的值。

console.log(x++ + y);// 2

3.赋值运算符

// 将 1 赋值给变量 x

var x = 1;

// 将变量 y 的值赋值给变量 x

var x = y;

// 等同于 x = x + y

x += y

4.比较运算符

< 小于运算符

> 大于运算符

<= 小于或等于运算符

>=         大于或等于运算符

==         相等运算符

===       严格相等运算符

!= 不相等运算符

!==        严格不相等运算符

5.布尔运算符

取反运算符（!）：!true // false; 对于非布尔值，取反运算符会将其转为布尔值。

且运算符（&&）：多个条件都要满足 console.log(10 < 20 && 10 >5); // true

或运算符（||）：满足一个条件即可 console.log(10 < 20 || 10 < 5); // true

6.三元运算符

(条件) ? 表达式1 : 表达式2

当条件的布尔值为true时，执行表达式1否则执行表达式2。

七、条件语句

1.if语句

if (布尔值){

语句;

}

2.if...else

if (m === 3) {

// 满足条件时，执行的语句

} else {

// 不满足条件时，执行的语句

}

3.switch

switch (x) {

case 1:

console.log('x 等于1');

case 2:

console.log('x 等于2');

default:

console.log('x 等于其他值');

}

// x等于1

// x等于2

// x等于其他值

ps:需要注意的是，每个case代码块内部的break语句不能少，否则会接下去执行下一个case代码块，而不是跳出switch结构。

4.for

for (初始化表达式; 条件; 迭代因子) {

语句

}

a 初始化表达式（initialize）：确定循环变量的初始值，只在循环开始时执行一次。

b 布尔表达式（test）：每轮循环开始时，都要执行这个条件表达式，只有值为真，才继续进行循环。

c 迭代因子（increment）：每轮循环的最后一个操作，通常用来递增循环变量。

d for语句的三个表达式，可以省略任何一个，也可以全部省略。但把条件表达式省略会变成无限循环。

//循环输出1~100之间数字的和

var sum=0;

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

sum+=i; }

console.log(sum);

//打印九九乘法表

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

document.write("<br>");

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

sum = i * j;

document.write(i ,"*" ,j ,"=" ,sum ," ");

}

}

5.while

ps ：所有for循环，都可以改写成while循环

while (条件) {

语句;

}

//例子

var i = 0;

while (i < 100) {

console.log('i 当前为：' + i);

i = i + 1;

}

6.break 语句和 continue 语句

1 break语句用于跳出代码块或循环

for (var i = 0; i < 5; i++) {

if (i === 3){

break;

}

console.log(i);

}

2 continue语句用于立即终止本轮循环，返回循环结构的头部，开始下一轮循环

for (var i = 0; i < 5; i++) {

if (i === 3){

continue;

}

console.log(i);

}

八、字符串

1.简介

字符串就是零个或多个排在一起的字符，放在单引号或双引号之中。单引号字符串的内部，可以使用双引号。双引号字符串的内部，可以使用单引号。

'itbaizhan'

"itbaizhan"

'key = "value"'

"It's a long itbaizhan"

注意：字符串默认只能写在一行内，分成多行将会报错

2.属性

length属性返回字符串的长度，该属性也是无法改变的

var s = 'itbaizhan';

s.length // 9

3.方法

a. charAt()

charAt 方法返回指定位置的字符，参数是从 0 开始编号的

var s = new String('itbaizhan');

s.charAt(1) // "t"

s.charAt(s.length - 1) // "n"

注意：如果参数为负数，或大于等于字符串的长度， charAt 返回空字符串

'itbaizhan'.charAt(-1) // ""

'itbaizhan'.charAt(9) // ""

b.concat()

concat 方法用于连接两个字符串，返回一个新字符串，不改变原字符串

var s1 = 'itbaizhan';

var s2 = 'sxt';

s1.concat(s2) // "itbaizhansxt"

s1 // "itbaizhan"

该方法可以接受多个参数

'sxt'.concat('itbaizhan', 'bjsxt') //"sxtitbaizhanbjsxt"

如果参数不是字符串， concat 方法会将其先转为字符串，然后再连接

var one = 1;

var two = 2;

var three = '3';

''.concat(one, two, three) // "123"

console.log(one + two + three )//33

c.substring()

substring方法用于从原字符串取出子字符串并返回，不改变原字符串。它的第一个参数表示子字符串的开始位置，第二个位置表示结束位置（返回结果不含该位置）。

规则：

1.如果省略第二个参数，则表示子字符串一直到原字符串的结束

2.如果第一个参数大于第二个参数， substring 方法会自动更换两个参数的位置

3.如果参数是负数， substring 方法会自动将负数转为0

'itbaizhan'.substring(0, 2) // "it"

'itbaizhan'.substring(2) // "baizhan"

'itbaizhan'.substring(2, -3) // "it"

d.substr()

substr方法用于从原字符串取出子字符串并返回，不改变原字符串，跟 substring 方法的作用相同。substr 方法的第一个参数是子字符串的开始位置（从0开始计算），第二个参数是子字符串的长度。

规则：

1.如果省略第二个参数，则表示子字符串一直到原字符串的结束

2.如果第一个参数是负数，表示倒数计算的字符位置。

3.如果第二个参数是负数，将被自动转为0，因此会返回空字符串

'itbaizhan'.substr(2, 7); // baizhan

'itbaizhan'.substr(2) // "baizhan"

'itbaizhan'.substr(-7) // "baizhan"

'itbaizhan'.substr(4, -1) // ""

e.indexOf()

indexOf 方法用于确定一个字符串在另一个字符串中第一次出现的位置，返回结果是匹配开始的位置。如果返回 -1 ，就表示不匹配。

'hello world'.indexOf('o') // 4

'itbaizhan'.indexOf('sxt') // -1

indexOf 方法还可以接受第二个参数，表示从该位置开始向后匹配

'hello world'.indexOf('o', 6) // 7

f.trim()

trim 方法用于去除字符串两端的空格、制表符（ \t 、 \v ）、换行符（ \n ）和回车符（ \r ），返回一个新字符串，不改变原字符串。

' hello world '.trim()// "hello world"

'\r\nitbaizhan \t'.trim() // 'itbaizhan'

g.split()

split 方法按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组。

规则：

1.如果分割规则为空字符串，则返回数组的成员是原字符串的每一个字符

2.如果省略参数，则返回数组的唯一成员就是原字符串

3.接受第二个参数，限定返回数组的最大成员数

'it|sxt|baizhan'.split('|') // ["it", "sxt","baizhan"]

'a|b|c'.split('') // ["a", "|", "b","|","c"]

'it|sxt|bz'.split() // [it|sxt|bz]

'it|sxt|bz'.split('|', 0) // []

'it|sxt|bz'.split('|', 1) // ["it"]

'it|sxt|bz'.split('|', 2) // ["it", "sxt"]

九、数组

1.简介

数组（array）是按次序排列的一组值。每个值的位置都有编号（从0开始），整个数组用方括号表示。

var arr = ['sxt', 'baizhan', 'it'];

任何类型的数据，都可以放入数组

var arr = [ 100, [1, 2, 3],false ];

2.length 属性：

数组的length属性，返回数组的成员数量

['sxt', 'baizhan', 'it'].length // 3

3.数组的遍历

数组的遍历可以考虑使用for循环或while循环

var a = ['sxt', 'baizhan', 'it'];

// for循环

for(var i = 0; i < a.length; i++) {

console.log(a[i]);

}

// while循环

var i = 0;

while (i < a.length) {

console.log(a[i]);

i++;

}

for...in遍历数组

var a = ['sxt', 'baizhan', 'it'];

for (var i in a) {

console.log(a[i]);

}

4.数组方法

1.Array.isArray()

Array.isArray 方法返回一个布尔值，表示参数是否为数组。它可以弥补typeof 运算符的不足。

var arr = ["尚学堂", 100, true];

console.log(typeof arr); // object

var arr = ['sxt', 'baizhan', 'it'];

Array.isArray(arr) // true

2.push()/pop()

push 方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。

pop 方法用于删除数组的最后一个元素，并返回该元素。两者都会改变数组长度。

var arr = [];

arr.push("尚学堂") // 1

arr.push('itbaizhan') // 2

arr.push(true, {}) // 4

arr // [尚学堂, 'itbaizhan', true, {}

var arr = ['尚学堂', 'itbaizhan', 'WEB前端'];

arr.pop() // 'WEB前端'

arr // ['尚学堂', 'itbaizhan']

3.shift()/unshift()

shift 方法用于删除数组的第一个元素，并返回该元素。unshift 方法用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。

var arr = ['尚学堂', 'itbaizhan', 'WEB前端'];

arr.shift() // '尚学堂'

arr // ['itbaizhan', 'WEB前端']

var arr = ['尚学堂', 'itbaizhan', 'WEB前端'];

arr.unshift('baizhan'); // 4

arr // ['baizhan', '尚学堂', 'itbaizhan', 'WEB前端']

4.join()

join 方法以指定参数作为分隔符，将所有数组成员连接为一个字符串返回。如果不提供参数，默认用逗号分隔。数组的 join 配合字符串的 split()可以实现数组与字符串的互换。

var a = [1, 2, 3, 4];

a.join(' ') // '1 2 3 4'

a.join(' | ') // "1 | 2 | 3 | 4"

a.join() // "1,2,3,4"

如果数组成员是 undefined 或 null 或空位，会被转成空字符串

[undefined, null].join('#') // '#'

['a',, 'b'].join('-') // 'a--b

5.concat()

concat 方法用于多个数组的合并。它将新数组的成员，添加到原数组成员的后部，

然后返回一个新数组，原数组不变。

['hello'].concat(['world'])// ["hello", "world"]

['hello'].concat(['world'], ['!'])// ["hello", "world", "!"]

除了数组作为参数， concat 也接受其他类型的值作为参数，添加到目标数组尾部。

[1, 2, 3].concat(4, 5, 6) // [1, 2, 3, 4, 5, 6]

6.reverse()

reverse 方法用于颠倒排列数组元素，返回改变后的数组。注意，该方法将改变原数组

var a = ['a', 'b', 'c'];

a.reverse() // ["c", "b", "a"]

a // ["c", "b", "a"]

实现一个字符串反转排列

var str = "hello";

str.split("").reverse().join("")

7.indexOf()

indexOf 方法返回给定元素在数组中第一次出现的位置，如果没有出现则返回 -1

var arr = ['a', 'b', 'c'];

arr.indexOf('b') // 1

arr.indexOf('y') // -1

indexOf 方法还可以接受第二个参数，表示搜索的开始位置

['尚学堂', '百战程序员','itbaizhan'].indexOf('尚学堂', 1) // -1

十、函数

1.函数的声明

function 命令： function命令声明的代码区块，就是一个函数。function命令后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数。函数体放在大括号里面。

function print(s) {

console.log(s);

}

2.函数名的提升

JavaScript 引擎将函数名视同变量名，所以采用function命令声明函数时，整个函数会像变量声明一样，被提升到代码头部。

3.函数参数

函数运行的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部数据就叫参数。

4.函数返回值

JavaScript函数提供两个接口实现与外界的交互，其中参数作为入口，接收外界信息；返回值作为出口，把运算结果反馈给外界。

function getName(name){

return name;

}

var myName = getName("itbaizhan")

console.log(myName); // itbaizhan

温馨提示：return 后面不能在添加任何代码，因为不会执行

十一、对象

1.简介

对象（object）是 JavaScript 语言的核心概念，也是最重要的数据类型。简单说，

对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。

var user = {

name: 'itbaizhan',

age: '13'

};

对象的每一个键名又称为“属性”（property），它的“键值”可以是任何数据类型。如果一个属性的值为函数，通常把这个属性称为“方法”，它可以像函数那样调用。

var user = {

getName: function (name) {

return name;

}

};

user.getName("itbaizhan") // itbaizhan

如果属性的值还是一个对象，就形成了链式引用

var user = {

name:"itbaizhan",

age:13,

container:{

frontEnd:["Web前端","Android","iOS"],

backEnd:["Java","Python"]

}

}

user.container.frontEnd // ["Web前端","Android","iOS"]

2.Math对象

Math是 JavaScript 的原生对象，提供各种数学功能。

1.Math.abs()

Math.abs 方法返回参数值的绝对值

Math.abs(1) // 1

Math.abs(-1) // 1

2.Math.max()，Math.min()

Math.max 方法返回参数之中最大的那个值， Math.min 返回最小的那个值。如果参数为空, Math.min 返回 Infinity , Math.max 返回 -Infinity 。

Math.max(2, -1, 5) // 5

Math.min(2, -1, 5) // -1

Math.min() // Infinity

Math.max() // -Infinity

3.Math.floor()，Math.ceil()

Math.floor()向下取整，Math.ceil()向上取整

Math.floor(3.2) // 3

Math.floor(-3.2) // -4

Math.ceil(3.2) // 4

Math.ceil(-3.2) // -3

4.Math.random()

Math.random() 返回0到1之间的一个伪随机数，可能等于0，但是一定小于1。

Math.random() // 0.28525367438365223

//任意范围的随机数生成函数如下

function getRandomArbitrary(min, max) {

return Math.random() * (max - min) + min;

}

getRandomArbitrary(5, 10)//得到5到10之间的随机数

3.Date对象

Date 对象是 JavaScript 原生的时间库。它以1970年1月1日00:00:00 作为时间的零点，可以表示的时间范围是前后各1亿天（单位为毫秒）

1.Date.now()

Date.now 方法返回当前时间距离时间零点（1970年1月1日 00:00:00UTC）的毫秒数，

相当于Unix时间戳乘以1000.

Date.now(); // 1635216733395

2.时间戳

时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)

起至现在的总秒数。Unix是20世纪70年代初出现的一个操作系统，Unix认为1970年1月1日0点是时间纪元。

JavaScript也就遵循了这一约束。

3.实例方法get类

Date 对象提供了一系列 get* 方法，用来获取实例对象某个方面的值：

getTime()：返回实例距离1970年1月1日00:00:00的毫秒数

getDate()：返回实例对象对应每个月的几号（从1开始）

getDay()：返回星期几，星期日为0，星期一为1，以此类推

getYear()：返回距离1900的年数

getFullYear()：返回四位的年份

getMonth()：返回月份（0表示1月，11表示12月）

getHours()：返回小时（0-23）

getMilliseconds()：返回毫秒（0-999）

getMinutes()：返回分钟（0-59）

getSeconds()：返回秒（0-59）

var d = new Date('January 6, 2022');

d.getDate() // 6

d.getMonth() // 0

d.getYear() // 122

d.getFullYear() // 2022

//编写函数获得本年度剩余天数

function leftDays() {

var today = new Date();

var endYear = new Date(today.getFullYear(),11, 31, 23, 59, 59, 999);

var msPerDay = 24 * 60 * 60 * 1000;

return Math.round((endYear.getTime() - today.getTime()) / msPerDay);

}

十二、DOM概述

1.介绍

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（DocumentObjectModel）。它的作用是将网页转为一个JavaScript 对象，从而可以用脚本进行各种操作（比如对元素增删内容）。浏览器会根据 DOM 模型，将结构化文档HTML解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。

所有的节点和最终的树状结构，都有规范的对外接口DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言。

2.节点

DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。

节点的类型有七种：

Document：                整个文档树的顶层节点

DocumentType：        doctype标签

Element：                   网页的各种HTML标签

Attribute：                   网页元素的属性（比如class="right"）

Text：标签之间或标签包含的文本

Comment：                注释

DocumentFragment：文档的片段

3.节点树

一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，倒过来就像一棵树浏览器原生提供document节点，代表整个文档。除了根节点，其他节点都有三种层级关系：

父节点关系（parentNode）：直接的那个上级节点

子节点关系（childNodes）：直接的下级节点

同级节点关系（sibling）：拥有同一个父节点的节点

4.document对象_方法/获取元素

a.getElementsByTagName()

该方法搜索 HTML 标签名，返回符合条件的元素。它的返回值是一个类似数组对象，可以实时反映 HTML 文档的变化。如果没有任何匹配的元素，就返回一个空集。如果传入 * ，就可以返回文档中所有 HTML 元素。

b.getElementsByClassName()

该方法返回一个类似数组的对象，包括了所有 class 名字符合指定条件的元素，元素的变化实时反映在返回结果中。由于 class 是保留字，所以 JavaScript 一律使用 className 表示 CSS 的 class。

c.getElementsByName()

该方法用于选择拥有 name 属性的 HTML 元素（比如 <form> 、 <radio> 、 <img> 等），返回一个类似数组的的对象（ NodeList 实例），因为 name 属性相同的元素可能不止一个。

d.getElementById()

该方法返回匹配指定 id 属性的元素节点。如果没有发现匹配的节点，则返回 null。注意，该方法的参数大小写是敏感的。比如，如果某个节点的 id 属性是 main ，那么 .getElementById('Main') 将返回 null。

e.querySelector()

该方法接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回 null。

f.querySelectorAll()

该方法与 querySelector 用法类似，区别是返回一个NodeList 对象，包含所有匹配给定选择器的节点。

<p class="text">Hello</p>

<form name="login"></form>

<div id="root">哈哈哈</div>

<div class="nav">nav1</div>

<div class="nav">nav2</div>

<script>

// 获得div标签数组的第一个div标签

var div1 = document.getElementsByTagName("div")[0]

div1.innerHTML = "Hello World"// 把获得的标签的内容写成 Hello World

// 获得class为text的标签数组的第一个标签

var text = document.getElementsByClassName("text")[0];

text.innerHTML = "Hello!"// 把获得的标签内容写成 Hello！

// 使用率极低

var name = document.getElementsByName("login")

console.log(name);

var root = document.getElementById("root");// 获得id为 root 的标签

root.innerHTML = "呵呵呵"// 把该标签的内容改为呵呵呵

var nav = document.querySelector(".nav");// 获得class为nav的第一个标签

console.log(nav);// 在控制台输出该标签

// 获得class为nav标签数组的第二个标签

var navs = document.querySelectorAll(".nav")[1];

console.log(navs); // 在控制台输出该标签

</script>

5.document对象_方法/创建元素

a.document.createElement()

该方法用来生成元素节点，并返回该节点。

b.document.createTextNode()

该方法用来生成文本节点（Text 实例），并返回该节点。它的参数是文本节点的内容。

c.document.createAttribute()

该方法生成一个新的属性节点（Attr 实例），并返回它。

var text = document.createElement("p");//创建一个p标签

var content = document.createTextNode("我是文本")//创建一个文本

var it = document.createAttribute("id")//创建一个id

it.value = "root"//给id取名叫“root”

text.appendChild(content);//往p标签里添加文本

text.setAttributeNode(it);//往p标签里添加id

console.log(text);//在控制台输出p标签

//获得页面id为container的div标签

var container = document.getElementById("container");

container.appendChild(text);//在div标签里放入p标签在页面上显示出来

6.Element对象_属性

Element对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个

Element节点对象（以下简称元素节点）。

a.Element.id

Element.id 属性返回指定元素的 id 属性，该属性可读写

// HTML 代码为 <p id="foo">

var p = document.querySelector('p');

p.id // "foo"

b.Element.className

className 属性用来读写当前元素节点的 class 属性。它的值是一个字符串，每个 class 之间用空格分割。

c.Element.classList

classList 对象有下列方法:

add() ：增加一个 class

remove() ：移除一个 class

contains() ：检查当前元素是否包含某个 class

toggle() ：将某个 class 移入或移出当前元素

var div = document.getElementById('myDiv');

div.classList.add('myCssClass');

div.classList.add('foo', 'bar');

div.classList.remove('myCssClass');

div.classList.contains('myCssClass'); // 返回true 或者 false

div.classList.toggle('myCssClass'); // 如果myCssClass 不存在就加入，否则移除

d.Element.innerHTML

Element.innerHTML 属性返回一个字符串，等同于该元素包含的所有HTML 代码。该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括 <HTML> 和 <body> 元素

e.Element.innerText

innerText 和 innerHTML 类似，不同的是 innerText 无法识别元素，会直接渲染成字符串

7.Element获取元素位置

属性描述

clientHeight 获取元素自身高度包括 padding 部分，但是不包括 border 、 margin

clientWidth 获取元素自身宽度，同上

scrollHeight 元素总高度，它包括 padding ，但是不包括 border 、 margin

包括溢出的不可见内容

scrollWidth 元素总宽度，同上（在实际中和clientWidth差不多）

scrollLeft 当前水平滚动条距离左端的像素数量

scrollTop 当前垂直滚动条距离顶端的像素数量

offsetHeight 元素的 CSS 垂直高度（单位像素），包括元素本身的高度、

padding 和 border

offsetWidth 元素的 CSS 水平宽度（单位像素），同上

offsetLeft 左边到定位父级左边界的间距，前提是父级有定位，否则往更上一级定位

offsetTop 上边到定位父级上边界的间距

// 视口高度

document.documentElement.clientHeight

// 网页总高度

document.body.clientHeight

8.CSS操作

a.setAttribute

HTML 元素的 style 属性操作 CSS 样式最简单的方法，就是使用网页元素节点的setAttribute 方法直接操作网页元素的 style 属性

div.setAttribute('style','background-color:red;' + 'border:1px solidblack;');

b.元素节点的 style 属性

var divStyle = document.querySelector('div').style;

divStyle.backgroundColor = 'red';

divStyle.border = '1px solid black';

divStyle.width = '100px';

divStyle.height = '100px';

divStyle.fontSize = '10em';

c.cssText 属性

var divStyle = document.querySelector('div').style;

divStyle.cssText = 'background-color: red;' + 'border: 1px solid black;'

+ 'height: 100px;' + 'width: 100px;';

9.事件处理程序

a.HTML事件处理

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>Js事件详解--事件处理</title>

</head>

<body>

<div id="div">

<button id="btn1" οnclick="demo()">按钮</button>

</div>

<script>

function demo(){

alert("hello html事件处理");

}

</script>

</body>

</html>

b.DOM0级事件处理

<body>

<div id="div">

<button id="btn1">按钮</button>

</div>

<script>

var btn1=document.getElementById("btn1");

btn1.οnclick=function(){alert("Hello DOM0级事件处理程序1");}//被覆盖掉

btn1.οnclick=function(){alert("Hello DOM0级事件处理程序2");}

</script>

</body>

c.DOM2级事件处理

<body>

<div id="div">

<button id="btn1">按钮</button>

</div>

<script>

var btn1=document.getElementById("btn1");

btn1.addEventListener("click",demo1);

btn1.addEventListener("click",demo2);

btn1.addEventListener("click",demo3);

function demo1(){ alert("DOM2级事件处理程序1") }

function demo2(){ alert("DOM2级事件处理程序2") }

function demo3(){ alert("DOM2级事件处理程序3") }

btn1.removeEventListener("click",demo2);

</script>

</body>

10.事件类型之鼠标事件

鼠标事件：鼠标事件指与鼠标相关的事件，具体的事件主要有以下一些

1 click：按下鼠标时触发

2 dblclick：在同一个元素上双击鼠标时触发

3 mousedown：按下鼠标键时触发

4 mouseup：释放按下的鼠标键时触发

5 mousemove：当鼠标在节点内部移动时触发。当鼠标持续移动时，该事件会连触发。

6 mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件

7 mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件

8 mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件

9 mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件

10 wheel：滚动鼠标的滚轮时触发

var btn1 = document.getElementById("btn1");

btn1.onclick = function(){

console.log("click事件");

}

这些方法在使用的时候，除了DOM2级事件，都需要添加前缀 on.

11.Event事件对象

事件发生以后，会产生一个事件对象，作为参数传给监听函数。

a.Event对象属性：

1 Event.Target

Event.target属性返回事件当前所在的节点

// HTML代码为

// <p id="para">Hello</p>

function setColor(e) {

console.log(this === e.target);

e.target.style.color = 'red';

}

para.addEventListener('click', setColor);

2 Event.type

Event.type属性返回一个字符串，表示事件类型。事件的类型是在生成事件的时候。该属性只读。

b.Event对象方法：

3 Event.preventDefault()

该方法取消浏览器对当前事件的默认行为。比如点击链接后，浏览器默认会跳转到另一个页面，使用这个方法以后，就不会跳转了。

btn.onclick = function(e){

e.preventDefault(); // 阻止默认事件

console.log("点击A标签");

}

4 Event.stopPropagation()

该方法阻止事件在 DOM 中继续传播，防止再触发,阻止事件冒泡。定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数。

btn.onclick = function(e){

e.stopPropagation(); // 阻止事件冒泡

console.log("btn");

}

12.事件类型之键盘事件

1 keydown：按下键盘时触发。

2 keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。

3 keyup：松开键盘时触发该事件

4 keyCode: 唯一标识// 回车键值为13

username.onkeypress = function(e){

console.log("keypress事件");

}

var username = document.getElementById("username");

username.onkeydown = function(e){// 按下回车键触发的事件

if(e.keyCode === 13){

console.log("回车");

}

}

13.事件类型之表单事件

1 input事件

input事件当 <input>、<select>、<textarea> 的值发生变化时触发。对于复选框（ <input type=checkbox> ）或单选框（ <input type=radio> ），用户改变选项时，也会触发这个事件。input事件的一个特点，就是会连续触发，比如用户每按下一次按键，就会触发一次input事件。

var username = document.getElementById("username");

username.oninput = function(e){// 实时获取当前输入框的内容

console.log(e.target.value);

}

2 select事件

select事件当在 <input>、<textarea> 里面选中文本时触发

// HTML 代码如下

// <input id="test" type="text" value="Select me!" />

var elem = document.getElementById('test');

elem.addEventListener('select',

function (e) {

console.log(e.type); // 该事件类型是"select"

}, false);

3 Change事件

Change事件当 <input>、<select>、<textarea> 的值发生变化时触发。它与input事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发。

var email = document.getElementById("email");

email.onchange = function(e){

console.log(e.target.value);//当输入完后获取值

}

4 reset事件

发生在表单对象 <form> 上，reset事件当表单重置（所有表单成员变回默认值）时触发。

5 submit事件

发生在表单对象 <form> 上，submit事件当表单数据向服务器提交时触发。

<form id="myForm" οnsubmit="submitHandle">

<button οnclick="resetHandle">重置数据

</button>

<button>提交</button>

</form>

var myForm = document.getElementById("myForm")

function resetHandle(){

myForm.reset();

}

function submitHandle(){

console.log("提交");

}

14.事件代理(事件委托)

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）。

var ul = document.querySelector('ul');

ul.addEventListener('click', function (event) {

if (event.target.tagName.toLowerCase() ==='li') {

// some code

}

});

15.定时器

JavaScript 提供定时执行代码的功能，叫做定时器（timer），主要由 setTimeout() 和 setInterval()这两个函数来完成。它们向任务队列添加定时任务。

1 setTimeout ()

函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。 setTimeout 函数接受两个参数，第一个参数 func|code 是将要推迟执行的。函数名或者一段代码，第二个参数 delay 是推迟执行的毫秒数。

var timerId = setTimeout(func|code, delay);

setTimeout(function(){

console.log("定时器")

},1000)

温馨提示：

还有一个需要注意的地方，如果回调函数是对象的方法，那么setTimeout 使得方法内部的 this 关键字指向全局环境，而不是定义时所在的那个对象

定时器取消：

var id = setTimeout(f, 1000);

clearTimeout(id);

2 setInterval ()

函数的用法与 setTimeout 完全一致，区别仅仅在于 setInterval 指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。

var timer = setInterval(function() {

console.log(2);

}, 1000)

通过setInterval方法实现网页动画

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

#someDiv{

width: 100px;

height: 100px;

background: red;

}

</style>

</head>

<body>

<div id="someDiv"></div>

<script>

var div = document.getElementById('someDiv');

var opacity = 1;

var fader = setInterval(function() {

opacity -= 0.05;

if (opacity > 0) {

div.style.opacity = opacity;

} else {

clearInterval(fader);

}

}, 30);

</script>

</body>

</html>

16.防抖(debounce)

防抖严格算起来应该属于性能优化的知识，但实际上遇到的频率相当高，处理不当或者放任不管就容易引起浏览器卡死。

防抖定义：

对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次。

从滚动条监听的例子说起

function showTop () {

var scrollTop = document.documentElement.scrollTop;

console.log('滚动条位置：' + scrollTop);

}

window.onscro = showTop

function debounce(fn,delay){

let timer = null //借助闭包

return function() {

if(timer){

clearTimeout(timer)

}

timer = setTimeout(fn,delay) // 简化写法

}

}

17.节流(throttle)

如果在限定时间段内，不断触发滚动事件（比如某个用户闲着无聊，按住滚动不断的拖来拖去），只要不停止触发，理论上就永远不会输出当前距离顶部的距离。但是如果产品同学的期望处理方案是：即使用户不断拖动滚动条，也能在某个时间间隔之后给出反馈呢？

function throttle(fn,delay){

let valid = true

return function() {

if(!valid){

//休息时间暂不接客

return false

}

// 工作时间，执行函数并且在间隔期内把状态位设为无效

valid = false

setTimeout(function(){

fn()

valid = true;

}, delay)

}

}

function showTop () {

var scrollTop =

document.documentElement.scrollTop;

console.log('滚动条位置：' + scrollTop);

}

window.onscroll = throttle(showTop,300)

使用场景：

1 搜索框input事件，例如要支持输入实时搜索可以使用节流方案（间隔一段时间就必须查询相关内容），或者实现输入间隔大于某个值（如500ms），就当做用户输入完成，然后开始搜索，具体使用哪种方案要看业务需求。

2 页面resize事件，常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行dom渲染（这种情形一般是使用防抖，因为只需要判断最后一次的变化情况）。

十三、总结

这个笔记内容中的“重点”和“轻点”是我根据自己的学习状况和理解来的，有什么不足还请多多包涵~

前端JavaScript学习小总结相关推荐

前端JavaScript学习路线，图书推荐
一.初级前端确定基础ok了(比如最常见的HTML标签及其属性.事件.方法:最常见的CSS属性:基础的JavaScript编程能力),能够完成一些简单的WEB前端需求. 1.1 推荐:<Java ...
前端html5学习小总结
目录前言一.HTML5简介二.HTML5网页基本骨架 1.框架代码 2.框架解析三.HTML5基本标签介绍一.标题标签二.标签之段落.换行.水平线三.图片标签四.超链接五.文本标签 ...
小猿圈Web前端开发学习路线
很多人已经下定决心学习前端开发,但是学习很盲目,没有一个明确的目标,导致学了很长时间效果也没有很明显,最终放弃了,这个结果是我们最不想看到的结果,那么学习路线就十分重要了,好的学习路线对学习会引向成功 ...
JavaScript面向对象实现-坦克大战（附前端全套学习路线）
[课程简介] 使用javascript+面向对象实现一个坦克大战游戏,让更多的同学能更加深入地理解面向对象思想. [主讲内容] 1. 讲解什么是面向对象,javascript中如何实现面向对象 2. ...
ajax小猿圈面试题,小猿圈之2019年前端JavaScript面试题（二）
小猿圈前端讲师今天继续给你总结js面试题,前面一篇文章咱们已经有一片js基础部分面试题,今天小猿圈web讲师为你讲解js前端应用设计问题,一定要好好看哦,为了能赢在其他人前面. JavaScript前 ...
前端基础学习——JavaScript之BOM模型与DOM模型
前面还有JavaScript基础介绍,有兴趣的朋友可以前往查看前端基础学习--带你夯实JavaScript基础目录一. BOM模型 1.1 BOM模型与DOM模型示意图: 1.2 浏览器窗口中的B ...
前端小白学习路线及知识点汇总（三）-- JavaScript基础
前端小白学习路线及知识点汇总(三)-- JavaScript基础一. JavaScript的组成 ECMAScript:由ECMA国际进行标准化的一门编程语言,往往被称为JavaScript或Jsc ...
前端面试+学习笔记（HTML+CSS+JavaScript+ES6+Vue+NodeJs）
前端面试+学习笔记(HTML+CSS+JavaScript+ES6+Vue+NodeJs) 一. HTML 1. 盒子模型是什么:每个元素被表示为一个矩形的盒子,有四个部分组成:内容(content ...
小猿圈Web之前端开发学习路线及建议
人生在勤,不索何获.--张衡很多人已经下定决心学习前端开发,但是学习很盲目,没有一个明确的目标,导致学了很长时间效果也没有很明显,最终放弃了,这个结果是我们最不想看到的结果,那么学习路线就十分重要了 ...
简单粗暴的JavaScript学习教程，前端入门的不二之选！
JavaScript 是网景(Netscape)公司开发的一种基于客户端浏览器.面向(基于)对象.事件驱动式的网页脚本语言.JavaScript语言的前身叫作Livescript. JavaScrip ...