本文整理了JavaScript从基础到进阶的核心知识点，涵盖语法基础、DOM/BOM操作、jQuery、面向对象、正则表达式等内容。
*本文为学习笔记，借鉴各类资料编写，欢迎指正和交流。
第1章 基础
核心定位：
HTML：负责页面结构
CSS：负责页面样式
JavaScript：负责页面行为
主要用途：
实现交互效果（如轮播图、表单验证等）
动态获取数据
JavaScript的由来
1996年由网景公司推出
后提交给Ecma国际标准化，标准名称为ECMAScript
与Java语言无关联，仅命名相似
JavaScript组成
ECMAScript：JavaScript的语法标准
DOM（文档对象模型）：用于操作HTML/XML文档
BOM（浏览器对象模型）：用于操作浏览器
JavaScript特点
简单易用
跨平台兼容
面向对象
开发工具
浏览器：Chrome浏览器的控制台可直接运行JS代码
代码编辑器：推荐VS Code，具备轻量、智能提示、跨平台等优势
JavaScript基本使用
1. 引入方式：
行内式
内部式
外部式（推荐，实现结构、样式、行为分离）
2. 输入输出语句：
prompt()：输入语句
alert()：弹出提示语句
document.write()：页面输出语句
console.log()：控制台输出语句
3. 注释：
单行注释：// 注释内容
多行注释：/* 注释内容 */
变量
概念：用于存储数据的容器
命名规则：
不能以数字开头
区分大小写
不能使用关键字
声明与赋值：使用var关键字，可先声明后赋值，也可声明同时赋值
第2章 JavaScript基础
1. 基本数据类型：
布尔型（Boolean）
数字型（Number，包含整数、浮点数）
字符串型（String）
空型（null）
未定义型（undefined）
2. 复杂数据类型：
对象型（Object），包含数组、函数、正则表达式等
强类型与弱类型区别
（注：JavaScript为弱类型语言，变量类型可动态转换；强类型语言变量类型固定，需显式转换）
数据类型转换
-
转布尔型：使用Boolean()函数
-
转数字型：
parseInt()：转换为整数
parseFloat()：转换为浮点数
Number()：直接转换为数字类型
3. 转字符串型：
String()：强制转换
toString()：调用对象的toString方法转换
运算符
-
算术运算符：+、-、*、/、%（取余）、++（自增）、--（自减）
-
字符串运算符：+（字符串拼接）、模板字符串（`${变量}`）
-
赋值运算符：=、+=、-=、*=、/=、%=等
-
比较运算符：==（相等，忽略类型）、===（全等，严格匹配类型和值）、!=（不相等）、!==（不全等）、>（大于）、<（小于）、>=（大于等于）、<=（小于等于）等
-
逻辑运算符：&&（逻辑与）、||（逻辑或）、!（逻辑非）
-
三元运算符：条件 ? 表达式1 : 表达式2（条件为真执行表达式1，否则执行表达式2）
-
位运算符：&、|、~、^、<<（左移）、>>（右移）等
-
数据类型检测运算符：typeof（用于检测变量的数据类型）
流程控制
- 选择结构：
if语句
if...else语句
if...else if...else语句
switch语句
- 循环结构：
for循环
while循环
do...while循环（先执行一次循环体，再判断条件）
- 跳转语句：
continue：跳过本次循环，进入下一次循环
break：终止当前循环或switch语句
- 断点调试：使用Chrome开发者工具设置断点，逐步调试代码
第3章 数组
初识数组
概念：一组数据的集合，由索引（下标，从0开始）和对应值组成
创建数组
数组字面量：使用[]创建，如var arr = [1, 2, 3]; 可包含空位（如var arr = [1, , 3];）
数组基本操作
获取和修改长度：通过数组的length属性（arr.length）
访问数组元素：数组名[索引]（如arr[0]访问第一个元素）
遍历数组：使用for循环（for(var i=0; i<arr.length; i++) { 操作arr[i] }）
添加和修改元素：通过索引赋值（如arr[3] = 4; 若索引不存在则添加元素，存在则修改）
删除元素：使用delete关键字（delete arr[索引]，删除后该位置变为空位，length不变）
筛选元素：结合for循环和if语句，筛选符合条件的元素
反转元素顺序：从后向前遍历数组，重新排列元素
数组元素排序
冒泡排序：相邻元素两两比较，不符合排序规则则交换位置，重复直至有序
插入排序：将数组分为有序部分和无序部分，依次将无序部分的元素插入到有序部分的对应位置
二维数组
创建与访问：创建格式为[[元素1, 元素2], [元素3, 元素4], ...]，访问时使用数组名[外层索引][内层索引]（如arr[0][1]）
遍历：使用嵌套for循环（外层循环遍历外层数组，内层循环遍历内层数组）
解构赋值（ES6）
功能：从数组中提取值，直接赋值给多个变量（如var [a, b] = [1, 2]; 则a=1，b=2）
第4章 函数
初识函数
概念：封装一段可重复执行的代码段，用于提高代码复用性和可维护性
定义与调用
- 定义语法：
function 函数名(参数) {
函数体（需要执行的代码）
}
2. 调用：函数名(实参);
参数
形参：函数定义时括号内的参数（形式参数）
实参：函数调用时括号内传递的参数（实际参数）
参数数量可不同：实参数量可多于或少于形参，未匹配的形参值为undefined
arguments对象：函数内部的内置对象，用于获取所有实参（类数组结构）
返回值
使用return语句返回函数执行结果，函数执行到return后终止
若函数无return语句，默认返回undefined
函数进阶
函数表达式：var fn = function(参数) { 函数体 };（将匿名函数赋值给变量，通过变量名调用）
匿名函数：无函数名的函数，常作为参数或赋值给变量使用
回调函数：将函数作为参数传递给另一个函数，在特定时机被调用
递归函数：函数内部调用自身，需设置终止条件避免无限递归
作用域
全局变量：在函数外部声明的变量，整个脚本都可访问
局部变量：在函数内部声明的变量，仅函数内部可访问
作用域链：内层函数可访问外层函数的变量，外层函数无法访问内层函数的变量，遵循"就近原则"
闭包函数
定义：函数内部返回一个函数，返回的函数可访问外部函数的局部变量，即使外部函数执行完毕
预解析
JavaScript执行前的准备阶段，var声明的变量和function定义的函数会被提前到当前作用域的顶部（变量仅声明提前，赋值不提前；函数定义整体提前）
第5章 对象
初识对象
概念：复杂数据类型，由属性（存储数据）和方法（执行操作）组成，属性和方法以键值对形式存在
创建对象
字面量方式：var obj = { 键1: 值1, 键2: 值2, 方法名: function() {} };
构造函数方式：function 构造函数名(参数) { this.属性 = 值; this.方法 = function() {}; }，通过new关键字创建实例（var obj = new 构造函数名(参数);）
Object构造函数方式：var obj = new Object(); 后续通过obj.属性 = 值; 添加属性和方法
对象的遍历
使用for...in循环：for(var key in 对象名) { 操作对象名[key]; }，可遍历对象的所有可枚举属性和方法
内置对象
- Math对象（数学相关操作）：
属性：PI（圆周率，约3.14159）
方法：abs()（绝对值）、max()（最大值）、min()（最小值）、pow(x,y)（x的y次方）、sqrt()（平方根）、ceil()（向上取整）、floor()（向下取整）、round()（四舍五入取整）、random()（生成0~1之间的随机数）
- 日期对象（时间相关操作）：
创建：var date = new Date();（获取当前时间）、new Date(时间字符串/时间戳)（指定时间）
方法：获取/设置年（getFullYear()/setFullYear()）、月（getMonth()/setMonth()，月份从0开始）、日（getDate()/setDate()）、时（getHours()/setHours()）、分（getMinutes()/setMinutes()）、秒（getSeconds()/setSeconds()）等
- 数组对象（数组相关操作）：
构造函数：var arr = new Array(元素1, 元素2, ...);
方法：push()（末尾添加元素）、pop()（末尾删除元素）、shift()（开头删除元素）、unshift()（开头添加元素）、splice()（添加/删除/替换元素）、sort()（排序）、reverse()（反转数组）、indexOf()（查找元素第一次出现的索引）、lastIndexOf()（查找元素最后一次出现的索引）、join()（将数组转为字符串）、toString()（将数组转为字符串）
- 字符串对象（字符串相关操作）：
创建：var str = new String("字符串内容"); 或直接赋值var str = "字符串内容";
属性：length（字符串长度）
方法：indexOf()（查找字符第一次出现的索引）、lastIndexOf()（查找字符最后一次出现的索引）、charAt()（获取指定索引的字符）、charCodeAt()（获取指定索引字符的ASCII码）、slice()（截取字符串）、substring()（截取字符串）、substr()（截取字符串，指定长度）、concat()（拼接字符串）、replace()（替换字符串）、toLowerCase()（转为小写）、toUpperCase()（转为大写）、split()（将字符串分割为数组）
查阅MDN文档
可通过MDN官方链接或关键字搜索，获取内置对象的详细属性和方法文档，辅助开发
第6章 DOM
Web API 简介
Web API 是浏览器提供的功能接口，封装为对象，开发者通过属性和方法调用。
DOM 和 BOM 都属于 Web API。
DOM 简介
DOM 将文档视为树形结构（文档树），所有内容都是节点（Node）。
节点类型：元素节点、文本节点、注释节点、文档节点、文档类型节点。
节点关系：父子节点、兄弟节点、根节点（document）。
节点属性：nodeType、nodeName、nodeValue。
获取元素
getElementById()：通过 id 获取单个元素。
getElementsByTagName()：通过标签名获取元素集合（类数组）。
getElementsByName()：通过 name 属性获取元素集合。
getElementsByClassName()：通过类名获取元素集合（IE6-8不支持）。
querySelector() / querySelectorAll()：通过 CSS 选择器获取元素（IE9+支持）。
获取结构元素：document.body、document.documentElement。
事件基础
事件三要素：事件源、事件类型、事件驱动程序。
事件注册：标签中注册（如 onclick）和 JavaScript 中注册（如 element.onclick）。
操作元素
操作内容：innerHTML（含标签）、innerText（不含标签）、textContent（可获取隐藏文本）。
操作属性：
property 属性：通过"元素对象.属性名"访问。
attribute 属性：setAttribute()、getAttribute()、removeAttribute()。
data-* 属性：通过 dataset 访问。
操作样式：
style 属性：直接设置样式。
className：设置类名。
classList：添加、移除、切换类名（IE10+支持）。
节点
节点操作
获取节点：childNodes、parentNode、nextSibling、previousSibling等。
创建节点：createElement()。
添加节点：appendChild()、insertBefore()。
移除节点：removeChild()。
复制节点：cloneNode()。
事件进阶
事件监听：
addEventListener()（IE9+）。
attachEvent()（IE6-8）。
事件移除：removeEventListener()、detachEvent()。
DOM 事件流：事件捕获 → 目标阶段 → 事件冒泡。
事件对象：event，兼容写法 e || window.event。
事件委托：将事件注册到父元素，通过冒泡处理子元素事件。
鼠标事件
常用事件：click、mouseover、mouseout、mousemove等。
事件属性：clientX、clientY、pageX、pageY 等。
键盘事件
常用事件：keydown、keypress、keyup。
keyCode：获取按键码。
元素位置操作
offset 系列：offsetWidth、offsetHeight、offsetTop、offsetLeft。
client 系列：clientWidth、clientHeight、clientTop、clientLeft。
scroll 系列：scrollWidth、scrollHeight、scrollTop、scrollLeft。
表格对象
使用 HTML DOM 提供的 table、tr、td 相关属性和方法操作表格。
第7章 BOM
BOM 简介
BOM 是浏览器对象模型，用于控制浏览器窗口。
顶级对象：window。
主要对象：location、navigator、history、screen、document。
BOM 对象
window 对象：全局对象，属性和方法可省略 window。
location 对象：操作 URL。
navigator 对象：获取浏览器信息。
history 对象：操作历史记录。
screen 对象：获取屏幕信息。
窗口事件
load / unload：窗口加载/卸载事件。
resize：窗口大小改变事件。
DOMContentLoaded：DOM 加载完成事件（不等待外部资源）。
定时器
setTimeout() / setInterval()：设置定时器。
clearTimeout() / clearInterval()：清除定时器。
同步与异步
JavaScript 是单线程，异步任务通过回调函数、事件循环机制处理。
同步任务在主线程执行栈中运行，异步任务放入任务队列。
第8章 jQuery
jQuery概述
jQuery 是一个轻量级、功能丰富的 JavaScript 库，简化 DOM 操作、事件处理、动画等。
特点：语法简洁、跨浏览器、插件丰富。
引入方式：CDN 或本地文件引入。
jQuery 对象
$ 和 jQuery 是顶级对象。
jQuery 对象是类数组对象，包装一个或多个 DOM 对象。
转换：
jQuery 对象转 DOM 对象：('div')\[0\] 或 ('div').get(0)。
DOM 对象转 jQuery 对象：$(domElement)。
jQuery 选择器
基本选择器：#id、.class、tag 等。
层次选择器：parent > child、ancestor descendant 等。
筛选选择器：:first、:last、:eq()、:odd、:even 等。
属性选择器：[attr]、[attr=value] 等。
表单选择器：:input、:text、:checkbox 等。
jQuery 内容操作
html()：获取或设置 HTML 内容。
text()：获取或设置文本内容。
val()：获取或设置表单值。
jQuery 样式操作
css()：获取或设置样式。
addClass() / removeClass() / toggleClass()：操作类名。
jQuery 属性操作
prop()：获取或设置 property 属性（如 checked、disabled）。
attr()：获取或设置 attribute 属性。
data()：获取或设置自定义数据（包括 data-* 属性）。
jQuery 元素操作
遍历：each() 方法。
查找与过滤：find()、parent()、children()、siblings()、filter() 等。
追加：append()、prepend()、after()、before() 等。
复制：clone()。
替换与删除：replaceWith()、remove()、empty()。
jQuery 尺寸与位置操作
尺寸：width()、height()、innerWidth()、outerWidth() 等。
位置：offset()、position()、scrollTop()、scrollLeft()。
jQuery 事件操作
页面加载：(document).ready() 或 (function(){})。
事件注册：on() 方法（推荐）。
事件触发：trigger()、triggerHandler()。
事件委托：on(event, selector, handler)。
事件移除：off()。
事件对象：event.preventDefault()、event.stopPropagation()。
jQuery 动画
显示/隐藏：show()、hide()、toggle()。
滑动：slideDown()、slideUp()、slideToggle()。
淡入淡出：fadeIn()、fadeOut()、fadeToggle()、fadeTo()。
自定义动画：animate()。
停止动画：stop()。
其他方法
$.extend()：合并对象。
$.ajax()：发送 Ajax 请求。
第9章 JavaScript 面向对象
面向对象概述
面向过程 vs 面向对象：面向对象将问题分解为对象，更易于维护和扩展。
面向对象三大特征：封装、继承、多态。
类与对象
类是对象的模板，ES6 引入 class 关键字定义类。
类定义：class ClassName { constructor() { } }。
类继承：extends 关键字。
调用父类方法：super() 调用父类构造方法，super.method() 调用父类普通方法。
原型
原型对象：每个构造函数都有一个 prototype 属性，指向原型对象。
原型链：对象通过 proto 访问原型对象，形成链式结构。
成员查找机制：先查找实例对象，再沿原型链向上查找。
更改 this 指向
apply()、call()、bind() 可更改函数内 this 指向。
错误处理
try...catch 语句捕获错误。
错误类型：Error、SyntaxError、TypeError 等。
抛出错误：throw new Error('message')。
第10章 正则表达式
正则表达式概述
正则表达式是用于匹配字符串模式的特殊文本。
创建方式：字面量 /pattern/flags 或构造函数 new RegExp(pattern, flags)。
修饰符：i（忽略大小写）、g（全局匹配）、m（多行匹配）等。
元字符
定位符：^（开头）、$（结尾）。
字符类：[a-z]等。
预定义符：\d（数字）、\w（字母数字下划线）、\s（空白符）等。
点字符：.（除换行符外的任意字符）。
限定符：?（0或1次）、*（0或多次）、+（1或多次）、{n,m}（n到m次）。
竖线和小括号：|（或）、()（分组、捕获、反向引用）。
正则表达式方法
test()：检测是否匹配，返回布尔值。
match()：返回匹配结果数组。
search()：返回匹配索引。
split()：根据正则分割字符串。
replace()：替换匹配的字符串。
正则表达式优先级
优先级从高到低：括号 > 转义符 > 字符类 > 限定符 > 定位符 > 竖线 > 其他。