本文介绍了JavaScript的基础知识，包括三种引入方式：内嵌、本地文件和网络来源。讨论了数据类型，如number、string、boolean以及object，并列举了常用命令如var、let和const。文章还涉及DOM操作，如节点类型和层级关系，以及如何操作CSS属性。最后提到了事件处理，如鼠标、键盘和表单事件。
学习JavaScript知识笔记，方便后续查阅。
一、JS引入方式
1.1 嵌入到HTML文件中
<body>
<script>
var num = 10;
console.log(num);
</script>
</body>
1.2 引入本地独立JS文件
<body>
<script type="text/javascript" src="./mian.js"></script>
</body>
1.3 引入网络来源文件
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
二、JS数据类型
| 数据类型 | 描述 |
|---|---|
| number(数值) | 原始数据类型 |
| string(字符串) | 原始数据类型 |
| boolen(布尔值) | 原始数据类型 |
| object(对象) | 引用数据类型（复合数据类型） |
| null | - |
| undefined | - |
三、常用命令
| 命令 | 作用 |
|---|---|
| var | 声明变量，变量提升，允许重复声明 ，函数级作用域 |
| let | ES6新增，声明变量，无变量提升，不允许重复声明（报错），块级作用域，一般用于声明局部变量 |
| const | ES6新增，声明常量，不允许修改，块级作用域 |
| // | 单行注释 |
| /* */ | 多行注释 |
| console.log() | 控制台输出 |
| alert() | 弹出对话框 |
| document.write() | 输出到页面 |
| typeof 变量 | 返回变量的数据类型 |
| - | - |
| str.length | 返回字符串长度 |
| str.charAt() | 返回指定位置的字符，负数或超出下标范围的值返回空字符串，超出范围返回空字符串 |
| str.concat(str2) | 连接字符串，返回一个新的字符串，不改变原字符串，可以连接多个 |
| str.substring(a,b) | 截取字符串a到b，不改变原字符串，负数参数会被转换为0 |
| str.substr(a,b) | 截取字符串a开始长度为b的字符串，不改变原字符串，第一个参数接收负数 |
| str.indexOf(str2,a) | 返回一个字符串在另一个字符串出现的起始位置，a可选，表示匹配开始位置 |
| str.trim() | 去掉字符串两端的空格，不改变原字符串 |
| str.split() | 分割字符串，返回由给定字符分割得到的字符串数组 |
| str.trimEnd() | ES6新增，去除末尾空格 |
| str.trimStart() | ES6新增，去除前端空格 |
| str.includes() | ES6新增，返回布尔值，判断是否包含字符串 |
| str.startsWith() | ES6新增，返回布尔值，判断是否以某字符串开头 |
| str.endsWith() | ES6新增，返回布尔值，判断是否以某字符串结尾 |
| str.repeat(n) | ES6新增，将字符串重复n次 |
| str.padStart(n,c) | ES6新增，以字符串c在字符串str头部补全至长度n |
| str.padEnd(n,c) | ES6新增，以字符串c在字符串str尾部补全至长度n |
| str.at() | ES6新增，返回指定位置的字符，可接收负数参数 |
| - | - |
| for(var i in array) | for循环新用法 |
| Array.isArray() | 判断参数是否为数组，静态方法 |
| arr.push()/pop() | 数组尾部添加/删除元素，返回新数组长度，可接收多参 |
| arr.unshift()/shift() | 数组头部添加/删除元素，shift返回删除元素，unshift返回新数组长度，可接收多参 |
| arr.join(a) | 以字符a连接数组arr的元素，默认为逗号连接 |
| arr.concat(arr2,…) | 合并字符串，可接受多参 |
| arr.reverse() | 倒置数组元素，会改变原数组 |
| arr.indexOf(a,b) | 返回元素在数组中第一次出现的下标，b可选，表示匹配开始位置，超出范围返回-1 |
| for(var i of str) | ES6新增，字符串循环新用法 |
| …arr | ES6新增，以空格为分隔符，展开数组，可以替代apply方法 |
| Array.from() | ES6新增，用于将类数组转换为真正的数组，类数组包括arguments、元素集合、类似数组的对象 |
| Array.of() | ES6新增，用于将一组值转换为数组 |
| - | - |
| set | 集合，ES6新增 |
| s.add() | 添加元素 |
| s.delete() | 删除元素，返回布尔值 |
| s.has() | 判断是否含有某个值，返回布尔值 |
| s.clear() | 清除所有值，没有返回值 |
| - | - |
| Math.abs() | 返回参数绝对值 |
| Math.max() | 返回多个参数的最大值 |
| Math.min() | 返回多个参数的最小值 |
| Math.floor() | 向下取整 |
| Math.ceil() | 向上取整 |
| Math.random() | 范围[0,1)之前的一个伪随机数 |
| Date.now() | 返回当前时间距1970年1月1日00:00:00UTC的毫秒数 |
| - |  |
| - | - |
| 查询 | document为文档标签 |
| document.getElementsByTagName() | 通过标签名获取标签元素 |
| document.getElementsByClassName() | 通过类名获取标签元素 |
| document.getElementsByName() | 通过name获取标签元素 |
| document.getElementById() | 通过id获取标签元素 |
| document.querySelector() | H5新增，接受CSS选择器作为参数，返回匹配该选择器的第一个节点 |
| document.querySelectorAll() | H5新增，接受CSS选择器作为参数，返回匹配该选择器的所有节点 |
| - | - |
| 创建 | document为文档标签 |
| document.createElement() | 生成元素节点并返回 |
| document.createTextNode() | 生成文本节点并返回 |
| document.createAttribute() | 生成属性节点并返回 |
| it.value=“” | 设置属性值，it表示属性节点名称 |
| newDiv.appendChild() | 节点添加文本，newDiv表示元素节点名称 |
| newDiv.setAttributeNode() | 节点添加属性， newDiv表示元素节点名称 |
| - | - |
| 修改 | Element代表具体标签变量 |
| Element.id | 返回元素节点的id属性，可读写 |
| Element.class | 返回元素节点的class属性(字符串)，可读写 |
| Element.classList | 返回元素节点的class列表，具有.add()、.remove()、.contains()、.toggle()方法 |
| Element.innerHTML | 返回元素节点中的内容(字符串)，可以识别其他标签 |
| Element.innerText | 返回元素节点中的内容(字符串)，不能识别标签 |
| - | - |
| 获取元素位置 |  |
| document.documentElement.clientHeight | 获取屏幕窗口高度 |
| document.body.clientHeight | 获取页面高度 |
| 事件 | - |
| Event.target | 返回事件作用的对象 |
| Event.type | 返回事件类型，如单击、双击等 |
| Event.preventDefault() | 阻止默认行为 |
| Event.stopPropagation() | 阻止事件继续在DOM中传播 |
| setTimeout() | 指定某个函数或某段代码在多少毫秒后执行，第一个参数是函数，第二个参数是延迟时长，返回定时器编号（如果回调函数是对象的方法，this将指向全局环境） |
| setInterval() | 指定某个任务每隔多长时间执行一次，无限执行 |
四、DOM
DOM是JavaScript操作网页的接口，全称为文档对象模型(Document Object Model)。他的作用是将网页转化为一个JavaScript对象，从而可以用脚本进行各种操作（比如对元素增删内容）。
浏览器会根据DOM模型，将结构化文档HTML解析成一系列的节点，再由这些节点组成一个树状结构（DOMTree)。所有的节点和最终的树状结构，都有规范的对外接口。
DOM只是一个接口规范，可以用各种语言实现。所以严格地说，DOM不是JavaScript语法的一部分，但是DOM操作是JavaScript最常见的任务，离开了DOM，JavaScript就无法控制网页。另一方面，JavaScript 也是最常用于DOM操作的语言。
节点
DOM的最小组成单位叫做节点(node)。文档的树形结构（DOM树)，就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
节点的类型有七种：
除了根节点，其他节点有三种层级关系：
Node.nodeType属性：
五、操作CSS
5.1 使用元素节点的setAttribute方法
div.setAttribute(
'style',
'background-color:red;'
)
5.2 元素节点的style属性
var divStyle = document.querySelector('div').style;
divStyle.backgroundColor = 'red';
5.3cssText属性
var divStyle = document.querySelector('div').style;
divStyle.cssText = "background-color:red;";
六、事件处理程序
-
HTM事件
-
DOM0事件(同样事件无法重复添加)
-
DOM2事件(同样事件可以重复添加)
6.1 鼠标事件
6.2 键盘事件
6.3 表单事件
401
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
