JavaScript语法及解释
下面是一个展示JavaScript语法及解释的表格：
JavaScript基础语法
| 语法 |
示例 |
解释 |
| 变量声明 |
let x = 5; |
使用let声明块级作用域变量 |
| 变量声明 |
const PI = 3.14; |
使用const声明常量，不可重新赋值 |
| 变量声明 |
var name = "John"; |
使用var声明函数作用域变量（旧方式） |
| 数据类型 |
let num = 10; |
数字类型，可以是整数或浮点数 |
| 数据类型 |
let str = "Hello"; |
字符串类型，用单引号或双引号包围 |
| 数据类型 |
let bool = true; |
布尔类型，值为true或false |
| 数据类型 |
let arr = [1, 2, 3]; |
数组类型，有序的元素集合 |
| 数据类型 |
let obj = {name: "John"}; |
对象类型，键值对集合 |
| 函数声明 |
function greet() { ... } |
使用function关键字声明函数 |
| 箭头函数 |
const add = (a, b) => a + b; |
使用箭头语法声明函数，更简洁 |
| 条件语句 |
if (x > 10) { ... } |
如果条件为真，执行代码块 |
| 循环语句 |
for (let i = 0; i < 5; i++) { ... } |
for循环，重复执行代码块 |
| 循环语句 |
while (x < 10) { ... } |
while循环，当条件为真时重复执行 |
| 事件处理 |
element.addEventListener('click', handler) |
为元素添加事件监听器 |
JavaScript操作符
| 操作符 |
示例 |
解释 |
| 算术运算符 |
+ - * / % |
加、减、乘、除、取模 |
| 赋值运算符 |
= += -= |
赋值、加后赋值、减后赋值 |
| 比较运算符 |
== === != !== |
等于、严格等于、不等于、严格不等于 |
| 逻辑运算符 |
&& || ! |
与、或、非 |
| 三元运算符 |
condition ? expr1 : expr2 |
条件为真返回expr1，否则返回expr2 |
JavaScript高级特性
| 特性 |
示例 |
解释 |
| 模板字符串 |
`Hello ${name}` |
使用反引号和${}插入变量 |
| 解构赋值 |
const {name, age} = person; |
从数组或对象中提取值到变量 |
| 展开运算符 |
[...arr1, ...arr2] |
将数组或对象展开为独立元素 |
| 类定义 |
class Person { ... } |
使用class关键字定义类 |
| Promise |
new Promise((resolve, reject) => { ... }) |
表示异步操作的最终完成或失败 |
| async/await |
async function fetchData() { ... } |
更简洁的异步编程语法 |
这个表格展示了JavaScript的核心语法和特性，适合初学者快速了解JavaScript的基本概念和用法。
DOM操作方法与事件处理
下面是一个展示DOM操作和事件处理相关方法的表格：
DOM选择器方法
| 方法 |
示例 |
解释 |
| getElementById |
document.getElementById('myId') |
通过元素的id属性获取单个元素 |
| getElementsByClassName |
document.getElementsByClassName('myClass') |
通过类名获取元素集合（HTMLCollection） |
| getElementsByTagName |
document.getElementsByTagName('div') |
通过标签名获取元素集合（HTMLCollection） |
| querySelector |
document.querySelector('.myClass') |
使用CSS选择器获取第一个匹配元素 |
| querySelectorAll |
document.querySelectorAll('div.myClass') |
使用CSS选择器获取所有匹配元素的NodeList |
事件处理方法
| 方法 |
示例 |
解释 |
| addEventListener |
element.addEventListener('click', handler) |
为元素添加事件监听器，可添加多个 |
| removeEventListener |
element.removeEventListener('click', handler) |
移除元素的事件监听器 |
| attachEvent |
element.attachEvent('onclick', handler) |
IE旧版本的事件添加方法（已废弃） |
| detachEvent |
element.detachEvent('onclick', handler) |
IE旧版本的事件移除方法（已废弃） |
事件类型示例
| 事件类型 |
示例 |
解释 |
| click |
addEventListener('click', func) |
鼠标点击事件 |
| mouseover |
addEventListener('mouseover', func) |
鼠标移入元素事件 |
| mouseout |
addEventListener('mouseout', func) |
鼠标移出元素事件 |
| keydown |
addEventListener('keydown', func) |
键盘按键按下事件 |
| keyup |
addEventListener('keyup', func) |
键盘按键释放事件 |
| submit |
addEventListener('submit', func) |
表单提交事件 |
| change |
addEventListener('change', func) |
表单元素值改变事件 |
| load |
addEventListener('load', func) |
资源加载完成事件 |
事件对象属性和方法
| 属性/方法 |
示例 |
解释 |
| event.target |
event.target |
触发事件的原始元素 |
| event.currentTarget |
event.currentTarget |
当前处理事件的元素 |
| event.preventDefault() |
event.preventDefault() |
阻止事件的默认行为 |
| event.stopPropagation() |
event.stopPropagation() |
停止事件冒泡 |
| event.type |
event.type |
事件类型（如'click'） |
| event.key |
event.key |
按下的键盘键值 |
其他相关DOM方法
| 方法 |
示例 |
解释 |
| createElement |
document.createElement('div') |
创建新的HTML元素 |
| appendChild |
parent.appendChild(child) |
将元素添加为父元素的最后一个子节点 |
| removeChild |
parent.removeChild(child) |
从父元素中移除子节点 |
| setAttribute |
element.setAttribute('id', 'newId') |
设置元素的属性值 |
| getAttribute |
element.getAttribute('id') |
获取元素的属性值 |
| classList.add |
element.classList.add('newClass') |
为元素添加CSS类 |
| classList.remove |
element.classList.remove('oldClass') |
移除元素的CSS类 |
这个表格详细介绍了JavaScript中常用的DOM操作和事件处理方法，这些是前端开发中与页面交互相关的核心功能。
