本文档适合初学者学习JavaScript时参考
万字以上的总结，包括基本的程序演示以及简略的对正则表达式的介绍，相信初学者看完一定有所收获
看完这篇还可以看看博主对HTML和CSS的总结，超级适合初学者，传送地址：HTML & CSS 初学者必知必会
文章目录
一、JavaScript介绍
二、JavaScript和HTML代码结合的方式
- 在head或body标签中使用script标签书写JavaScript代码
- 单独的创建JS文件，通过script标签引入
三、变量 - JavaScript中变量的类型
- JavaScript中的特殊值
- JavaScript中定义变量的格式
代码示例
四、关系运算
五、逻辑运算 - &&：且运算
- ||：或运算
- !：取反运算
代码示例
六、数组
七、函数 - 函数的定义方式一
- 函数的定义方式二
八、函数的arguments隐形参数
九、JavaScript中的自定义对象 - Object形式的自定义对象
- 花括号形式的自定义对象
十、JavaScript中的事件 - 事件的概念
- 常用的事件
- 事件的注册(绑定)
JavaScript 事件的代码演示
十一、正则表达式
十二、DOM模型 - Document对象
- Document对象的理解
- HTML标签对象化
- Document对象中的方法介绍
getElementById方法代码示例
getElementsByName方法代码示例
十三、DOM模型中节点的常用属性和方法 - 方法
- 属性
createElement代码示例
一、JavaScript介绍
简介：
JavaScript语言可以动态的美化页面、验证表单的数据，需要浏览器解析执行JS代码
特点：
交互性(JS可完成信息的动态交互)
安全性(不允许直接访问本地硬盘)
跨平台性(只要是可以解析JS的浏览器都可执行，与平台无关)
注意：JavaScript与Java无关联，JS是弱类型，Java是强类型
强类型是定义变量时类型已经确定且不可变，弱类型是类型可变
二、JavaScript和HTML代码结合的方式
- 在head或body标签中使用script标签书写JavaScript代码
1
代码示例：
- 单独的创建JS文件，通过script标签引入
1
（1）创建单独的JS文件
（2）使用script标签引入JS文件
-
JavaScript中的特殊值
undefined：未定义，所有JS变量未赋予初始值时默认值均为undefined
null：空值
NaN：非数字，因为运算不能执行而导致，如数值和字符串运算，属于number类型 -
JavaScript中定义变量的格式
var 变量名；
var 变量名 = 值； -
补充知识：
(1) typeof()是JS语言提供的一个函数，它可以返回参数的类型
(2) JS语言中的注释写法与java一致
代码示例
-
||：或运算
第一种情况：表达式全为假，返回最后一个表达式的值
第二种情况：表达式有一个为真，返回第一个为真的表达式的值(不是返回第一个表达式的值) -
!：取反运算
注意：
&&与||采取短路的策略，即确定了结果后，后面的表达式不再进行判断
在JS语言中所有的变量都可以作为一个boolean类型使用，且0、null、undefined、
””(空串)都认为是false
代码示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
六、数组
数组的定义方式：
var 数组名 = []；//空数组
var 数组名 = [1,’abc’,true]；//定义数组的同时赋值，元素可多种类型
注意：
通过数组下标赋值，会根据最大下标值给数组自动扩容，默认值为undefined
读取数组中已定义元素范围之外的元素，值为undefined，且读取不会自动扩容
代码示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
七、函数
- 函数的定义方式一
使用function关键字
格式：(形参列表无需声明类型)
function 函数名(形参列表) {
函数体
}
注意：在JS语言中只需在函数体内直接使用return语句即可返回值，无需声明返回值类型
代码示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2. 函数的定义方式二
格式：(形参列表无需声明类型)
var 函数名 = function(形参列表) {
函数体
}
代码示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
注意：在JS中没有重载的概念，如果声明了多个重名的函数，不管函数的形参个数是否一致，不管调 用时传入几个参数，只会调用同名函数中的最后一个(会覆盖掉之前)，如：
function fun(a,b) {
alert(“有参函数fun(a,b)”);
}
function fun() {
alert(“无参函数fun()”);
}
fun(1,“ad”); //“无参函数fun()”
1
2
3
4
5
6
7
8
八、函数的arguments隐形参数
在函数调用时，浏览器每次都会传递进封装实参的对象arguments，虽然没有给被调用者定义形参， 但依然可以通过arguments调用传递进来的实参：
arguments[i]: 获得传入的下标为i的参数值
arguments.length: 获得传入的参数个数
arguments.callee: 获得该函数本身(返回定义时的写法)
注意：arguments是函数内固有变量，以数组的形式保存了调用方给该函数传入的所有参数
代码示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
九、JavaScript中的自定义对象
- Object形式的自定义对象
var 对象名 = new Object()；//创建了一个空对象
对象名.属性名 = 值；//给此对象定义属性
对象名.函数名 = function() {} //给此对象定义函数
对象名.属性名/函数名()；//对象的访问
代码示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2. 花括号形式的自定义对象
(注意标点符号，最后一个成员不加逗号)
var 对象名 = {
属性名 ：值，
函数名 ：function() {}
}；
代码示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
十、JavaScript中的事件
-
事件的概念
电脑输入设备与页面进行交互的响应 -
常用的事件
onload：页面加载完成事件，浏览器解析完页面之后就会自动触发的事件
onclick：单击事件，常用于按钮的点击响应操作
onblur：失去焦点事件(点中输入框准备输入数据时，光标闪烁，称为焦点)，常用于输入 框失去焦点后验证其输入内容是否合法
onchange：内容发生改变事件，常用于下拉列表选中项发生改变后操作
onsubmit：
①表单提交事件，常用于表单提交之前验证所有表单项是否合法
②onsubmit事件中return false可以阻止表单提交 -
事件的注册(绑定)
告诉浏览器当事件响应后要执行哪些代码
静态注册事件：通过HTML标签的事件属性直接赋予事件响应后的代码(写成函数形式)
动态注册事件：步骤：
(1) 通过document对象获取标签对象(Dom对象)
(2) 通过标签对象.事件名 = function() {} 赋予事件响应后的代码，代表此标签具有此事件
JavaScript 事件的代码演示
代码示例：静态注册onload事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
代码示例：动态注册onload事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
代码示例：静态注册onclick事件
1
2
3
4
5
6
7
8
9
10
代码示例：动态注册onclick事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
代码示例：静态注册onblur事件
1
2
3
4
5
6
7
8
9
10
11
12
运行结果：当光标不在输入框中时，在控制台输出指定字样：
代码示例：动态注册onblur事件
代码示例：动态注册onchange事件：
代码示例：动态注册onsubmit事件
-
Document对象
-
Document对象的理解
(1) Document管理了HTML文档的所有内容，将这些内容都对象化
(2) Document是一种树形结构，有层级关系
(3) 可以通过Document访问所有的对象 -
HTML标签对象化
-
Document对象中的方法介绍
(注意加s的是返回对象集合)
注意：
查询优先顺序：id --> name --> tagName(越往后查询结果范围越大，还需过滤)
三个查询方法一定要在页面加载完成之后执行才能查询到标签对象
getElementById方法代码示例
getElementsByName方法代码示例
要求实现：
全选 全不选 反选 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 十三、DOM模型中节点的常用属性和方法 节点即标签对象
-
方法
(1) appendChild(ChildNode)；添加一个子节点，ChildNode为添加的子节点
(2) createTextNode(Text)；创建一个以Text为内容的文本节点 -
属性
(1) childNodes：当前节点的所有子节点
(2) firstChild：当前节点的第一个子节点
(3) lastChild：当前节点的最后一个子节点
(4) parentNode：当前节点的父节点
(5) nextSibling：当前节点的下一个节点
(6) previousSibling：当前节点的上一个节点
(7) className：标签的class属性值
(8) innerHTML：标签中的内容(包括两边的标签)
(9) innerText：标签中的文本(不包括两边的标签) -
注意：可以连写：document.getElementById(“xxx”).事件名 = function () {}
createElement代码示例
————————————————
版权声明：本文为CSDN博主「[Arcadian]」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_49343190/article/details/107510571
2231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
