在前端开发的“三剑客”——HTML、CSS 和 JavaScript 中，HTML 负责结构，CSS 负责样式，而 JavaScript 则赋予网页灵魂与交互能力。它是唯一能在浏览器中直接运行的编程语言，负责处理用户操作、动态更新内容、与服务器通信、验证表单、实现动画效果等，是现代 Web 应用不可或缺的核心。没有 JavaScript，网页只是静态的“画册”；有了它，网页才成为可交互、可响应、可智能的“应用”。
一、原生 JavaScript：前端交互的基石
原生 JavaScript（Vanilla JS）不依赖任何第三方库，直接通过浏览器 API 操作 DOM、处理事件、发送请求。虽然早期语法略显冗长，但随着标准演进，其能力与开发体验已大幅提升。
常用 JavaScript 方法与函数（原生）
1. DOM 操作
// 获取元素
document.getElementById('myId');
document.querySelector('.myClass'); // 返回第一个匹配
document.querySelectorAll('p'); // 返回 NodeList
// 创建与插入
const div = document.createElement('div');
div.textContent = '新内容';
parentElement.appendChild(div);
// 修改属性与内容
element.innerHTML = '<strong>富文本</strong>';
element.classList.add('active');
element.setAttribute('data-value', '123');
2. 事件处理
button.addEventListener('click', function() {
console.log('按钮被点击了！');
});
// 事件委托（高效处理动态元素）
document.body.addEventListener('click', function(e) {
if (e.target.matches('.delete-btn')) {
e.target.closest('.item').remove();
}
});
3. 数据处理与工具函数
// 数组常用方法
const numbers = [1, 2, 3, 4];
numbers.map(x => x * 2); // [2, 4, 6, 8]
numbers.filter(x => x > 2); // [3, 4]
numbers.find(x => x === 3); // 3
numbers.reduce((sum, x) => sum + x, 0); // 10
// 字符串处理
'Hello World'.split(' '); // ['Hello', 'World']
' hello '.trim(); // 'hello'
JSON.stringify({a:1}); // '{"a":1}'
JSON.parse('{"a":1}'); // {a: 1}
// 异步请求（现代 fetch API）
fetch('/api/users')
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));
4. 定时器与延迟
setTimeout(() => alert('5秒后弹出'), 5000);
setInterval(() => console.log('每秒执行'), 1000);
优势：无依赖、性能高、完全可控；
挑战：跨浏览器兼容性（旧项目）、代码量较大（尤其 DOM 操作）。
二、jQuery：简化 DOM 操作的轻量级利器
jQuery 诞生于 2006 年，旨在“Write Less, Do More”。它通过简洁的链式语法和统一的 API，极大简化了 DOM 查询、事件绑定、动画和 Ajax 操作，曾是前端事实标准。尽管现代框架（React/Vue）兴起使其使用减少，但在快速原型、小型项目或遗留系统维护中，jQuery 依然高效可靠。
常用 jQuery 方法（对比原生，代码行数显著减少）
功能原生 / JavaScript（约） / jQuery（1 行）
选择元素 / document.querySelector('#btn') / $('#btn')
绑定点击事件 / btn.addEventListener('click', fn) / $('#btn').click(fn)
修改 HTML 内容 / el.innerHTML = 'new' / $('#box').html('new')
添加 CSS 类 / el.classList.add('active') / $('.item').addClass('active')
隐藏/显示元素 / el.style.display = 'none' / $('.modal').hide() / .show()
Ajax 请求 / fetch().then(...)（多行） / $.get('/api/data', callback)
遍历元素 / Array.from(nodelist).forEach(...) / $('li').each(function(i, el) { ... })
典型 jQuery 代码示例
// 1. 页面加载完成后执行
$(function() {
// 等价于 DOMContentLoaded
});
// 2. 点击删除按钮移除父项
$('.delete-btn').click(function() {
$(this).closest('.item').fadeOut(300, function() {
$(this).remove();
});
});
// 3. 表单提交 Ajax
$('#loginForm').submit(function(e) {
e.preventDefault();
$.post('/login', $(this).serialize(), function(res) {
if (res.success) location.reload();
});
});
// 4. 动态加载内容
$('#loadMore').click(function() {
$('#content').append('<div>新内容</div>');
});
jQuery 优势：
- 链式调用（$('#box').fadeIn().addClass('loaded')）；
- 内置跨浏览器兼容处理；
- 丰富的插件生态（如日期选择器、轮播图）；
- 学习曲线平缓，适合初学者快速上手。
注意：jQuery 体积虽小（~30KB gzipped），但在现代 SPA 中已非必需；建议新项目优先使用原生 JS + 现代框架。
三、ES6+：JavaScript 的现代化革命
ECMAScript 2015（即 ES6）是 JavaScript 语言的一次重大升级，引入大量语法糖和新特性，极大提升了开发效率与代码可读性。
常用 ES6+ 方法与语法
1. 变量声明
const PI = 3.14; // 不可重新赋值
let count = 0; // 块级作用域
// 避免使用 var！
2. 箭头函数（Arrow Functions）
// 简洁写法，自动绑定 this
const double = x => x * 2;
[1,2,3].map(x => x * 2); // [2,4,6]
// 对比传统函数
setTimeout(() => {
this.setState({ loaded: true }); // this 指向外层
}, 1000);
3. 模板字符串（Template Literals）
const name = 'Alice';
const msg = `Hello, ${name}! You have ${count} messages.`;
// 支持多行
const html = `
<div class="user">
<span>${name}</span>
</div>
`;
4. 解构赋值（Destructuring）
// 数组解构
const [first, second] = ['a', 'b'];
// 对象解构
const user = { name: 'Bob', age: 30 };
const { name, age } = user;
// 函数参数解构
function greet({ name, greeting = 'Hi' }) {
return `${greeting}, ${name}!`;
}
greet({ name: 'Tom' }); // "Hi, Tom!"
5. 模块化（Modules）
// math.js
export const add = (a, b) => a + b;
export default multiply = (a, b) => a * b;
// main.js
import multiply, { add } from './math.js';
6. Promise 与 async/await（异步处理）
// 替代回调地狱
async function fetchUser(id) {
try {
const res = await fetch(`/api/users/${id}`);
const user = await res.json();
return user;
} catch (err) {
console.error('加载失败', err);
}
}
7. 扩展运算符（Spread）与剩余参数（Rest）
// 合并数组
const arr = [...[1,2], ...[3,4]]; // [1,2,3,4]
// 复制对象
const newUser = { ...user, age: 31 };
// 函数接收不定参数
function sum(...numbers) {
return numbers.reduce((a,b) => a+b, 0);
}
sum(1,2,3,4); // 10
结语：从 jQuery 到原生，从 ES5 到 ES6+
前端技术不断演进，但核心目标始终如一：更高效地构建用户喜爱的交互体验。
- 原生 JavaScript 是根基，掌握它才能理解底层机制；
- jQuery 是历史功臣，其“简化复杂”的理念影响深远；
- ES6+ 则代表未来，让 JavaScript 更接近现代编程语言的表达力。
如今，开发者应：
- 新项目优先使用原生 ES6+；
- 理解 jQuery 原理以维护旧系统；
- 善用现代工具（如 Babel、Webpack）兼容旧环境。
无论技术如何变迁，扎实的 JavaScript 功底，永远是前端工程师最硬的底气。