JavaScript与jQuery：从入门到面试的完整指南

第一部分：JavaScript基础

1.1 JavaScript简介

JavaScript是一种轻量级的解释型编程语言，主要用于Web开发，可以为网页添加交互功能。它是ECMAScript规范的一种实现。

// 第一个JavaScript程序
console.log("Hello, JavaScript!");

1.2 变量声明

// var - 函数作用域，存在变量提升
var name = "John";// let - 块级作用域，不存在变量提升
let age = 25;// const - 块级作用域，常量，不可重新赋值
const PI = 3.14159;

1.3 数据类型

JavaScript有7种原始数据类型和1种引用类型：

// 原始类型
let str = "Hello";          // string
let num = 42;               // number
let bool = true;            // boolean
let nullVar = null;         // null
let undefinedVar;           // undefined
let sym = Symbol("id");     // symbol
let bigInt = 123n;          // bigint// 引用类型
let obj = { name: "John" }; // object
let arr = [1, 2, 3];        // array
let func = function() {};   // function

1.4 类型转换

// 显式转换
let num = Number("123");    // 123
let str = String(123);      // "123"
let bool = Boolean(1);      // true// 隐式转换
let result = "5" + 2;       // "52" (字符串连接)
let result2 = "5" - 2;      // 3 (数学运算)

1.5 运算符

// 算术运算符
let sum = 10 + 5;   // 15
let diff = 10 - 5;  // 5
let product = 10 * 5; // 50
let quotient = 10 / 5; // 2
let remainder = 10 % 3; // 1// 比较运算符
10 == "10";     // true (值相等)
10 === "10";    // false (值和类型都相等)// 逻辑运算符
true && false;  // false
true || false;  // true
!true;          // false// 三元运算符
let result = age >= 18 ? "成人" : "未成年";

第二部分：函数与作用域

2.1 函数声明

// 函数声明
function greet(name) {return `Hello, ${name}!`;
}// 函数表达式
const greet = function(name) {return `Hello, ${name}!`;
};// 箭头函数
const greet = (name) => `Hello, ${name}!`;

2.2 作用域与闭包

// 作用域链
function outer() {let outerVar = "outer";function inner() {let innerVar = "inner";console.log(outerVar); // 可以访问外部变量}inner();
}// 闭包
function createCounter() {let count = 0;return function() {count++;return count;};
}const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

2.3 this关键字

// 不同场景下的this
const obj = {name: "John",greet: function() {console.log(this.name); // John}
};function showThis() {console.log(this); // 严格模式下undefined，非严格模式下window
}// 改变this指向
const boundFunc = showThis.bind(obj);
boundFunc(); // this指向obj

第三部分：对象与数组

3.1 对象操作

const person = {name: "John",age: 30,greet: function() {return `Hello, ${this.name}`;}
};// 访问属性
console.log(person.name);        // John
console.log(person["age"]);      // 30// 添加属性
person.city = "New York";// 删除属性
delete person.age;// 遍历对象
for (let key in person) {console.log(key, person[key]);
}// 对象方法
Object.keys(person);     // ["name", "age", "greet"]
Object.values(person);   // ["John", 30, function]
Object.entries(person);  // [["name", "John"], ["age", 30], ["greet", function]]

3.2 数组操作

const numbers = [1, 2, 3, 4, 5];// 常用数组方法
numbers.push(6);         // 末尾添加
numbers.pop();           // 末尾删除
numbers.unshift(0);      // 开头添加
numbers.shift();         // 开头删除// 遍历方法
numbers.forEach((item, index) => {console.log(item, index);
});// 转换方法
const doubled = numbers.map(num => num * 2);
const evens = numbers.filter(num => num % 2 === 0);
const sum = numbers.reduce((total, num) => total + num, 0);// 查找方法
numbers.find(num => num > 3);    // 4
numbers.findIndex(num => num > 3); // 3
numbers.includes(3);             // true

第四部分：异步编程

4.1 回调函数

function fetchData(callback) {setTimeout(() => {callback("Data received");}, 1000);
}fetchData((data) => {console.log(data);
});

4.2 Promise

const promise = new Promise((resolve, reject) => {setTimeout(() => {Math.random() > 0.5 ? resolve("Success") : reject("Error");}, 1000);
});promise.then(result => console.log(result)).catch(error => console.error(error)).finally(() => console.log("Completed"));

4.3 async/await

async function fetchData() {try {const response = await fetch('https://api.example.com/data');const data = await response.json();return data;} catch (error) {console.error('Error:', error);}
}fetchData().then(data => console.log(data));

第五部分：DOM操作

5.1 选择元素

// 选择单个元素
const element = document.getElementById('myId');
const element = document.querySelector('.myClass');// 选择多个元素
const elements = document.getElementsByClassName('myClass');
const elements = document.querySelectorAll('.myClass');

5.2 操作元素

// 修改内容
element.innerHTML = '<strong>New content</strong>';
element.textContent = 'Plain text';// 修改样式
element.style.color = 'red';
element.classList.add('active');
element.classList.remove('inactive');
element.classList.toggle('hidden');// 修改属性
element.setAttribute('data-id', '123');
const id = element.getAttribute('data-id');
element.removeAttribute('data-id');

5.3 事件处理

// 添加事件监听器
element.addEventListener('click', function(event) {console.log('Clicked:', event.target);
});// 事件委托
document.addEventListener('click', function(event) {if (event.target.matches('.btn')) {console.log('Button clicked');}
});// 常见事件
element.addEventListener('click', handler);      // 点击
element.addEventListener('mouseover', handler);  // 鼠标移入
element.addEventListener('keydown', handler);    // 键盘按下
element.addEventListener('submit', handler);     // 表单提交

第六部分：ES6+新特性

6.1 解构赋值

// 数组解构
const [first, second, ...rest] = [1, 2, 3, 4, 5];// 对象解构
const { name, age, ...otherProps } = person;// 函数参数解构
function greet({ name, age }) {return `Hello, ${name}! You are ${age} years old.`;
}

6.2 扩展运算符

// 数组扩展
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];// 对象扩展
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const merged = { ...obj1, ...obj2 };

6.3 模块化

// export
export const PI = 3.14159;
export function calculateArea(radius) {return PI * radius * radius;
}// import
import { PI, calculateArea } from './math.js';
import * as math from './math.js';

第七部分：jQuery基础

7.1 jQuery简介

jQuery是一个快速、简洁的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax交互。

<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

7.2 选择元素

// 选择元素
$('#myId');         // ID选择器
$('.myClass');      // 类选择器
$('div');           // 标签选择器
$('div.myClass');   // 组合选择器// 筛选元素
$('li').first();    // 第一个li
$('li').last();     // 最后一个li
$('li').eq(2);      // 第三个li
$('li').filter('.active'); // 筛选有active类的li

7.3 DOM操作

// 获取和设置内容
$('#element').html();           // 获取HTML
$('#element').html('<p>New content</p>'); // 设置HTML
$('#element').text();           // 获取文本
$('#element').text('New text'); // 设置文本// 获取和设置属性
$('#element').attr('data-id');          // 获取属性
$('#element').attr('data-id', '123');   // 设置属性
$('#element').removeAttr('data-id');    // 删除属性// 操作CSS
$('#element').css('color', 'red');              // 设置样式
$('#element').addClass('active');               // 添加类
$('#element').removeClass('inactive');          // 删除类
$('#element').toggleClass('hidden');            // 切换类

7.4 事件处理

// 绑定事件
$('#button').click(function() {console.log('Button clicked');
});$('#form').submit(function(event) {event.preventDefault();console.log('Form submitted');
});// 事件委托
$('#container').on('click', '.btn', function() {console.log('Button clicked');
});// 常用事件
$('#element').click(handler);       // 点击
$('#element').hover(handler);       // 鼠标悬停
$('#element').focus(handler);       // 获得焦点
$('#element').change(handler);      // 值改变

7.5 动画效果

// 显示和隐藏
$('#element').show();           // 显示
$('#element').hide();           // 隐藏
$('#element').toggle();         // 切换显示/隐藏// 淡入淡出
$('#element').fadeIn();         // 淡入
$('#element').fadeOut();        // 淡出
$('#element').fadeToggle();     // 切换淡入/淡出// 滑动
$('#element').slideDown();      // 向下滑动
$('#element').slideUp();        // 向上滑动
$('#element').slideToggle();    // 切换滑动// 自定义动画
$('#element').animate({opacity: 0.5,left: '+=50',height: 'toggle'
}, 1000);

7.6 Ajax

// GET请求
$.get('https://api.example.com/data', function(data) {console.log('Data received:', data);
});// POST请求
$.post('https://api.example.com/data', { name: 'John' }, function(data) {console.log('Data received:', data);
});// Ajax完整配置
$.ajax({url: 'https://api.example.com/data',method: 'GET',dataType: 'json',success: function(data) {console.log('Success:', data);},error: function(xhr, status, error) {console.error('Error:', error);}
});

第八部分：常见面试题

8.1 JavaScript基础

var、let、const的区别
- var：函数作用域，存在变量提升
- let：块级作用域，不存在变量提升
- const：块级作用域，常量，不可重新赋值
== 和 === 的区别
- ==：比较值，会进行类型转换
- ===：比较值和类型，不会进行类型转换
什么是闭包？有什么作用？
闭包是函数和其词法环境的组合，可以访问外部函数的作用域。用于数据封装和私有变量。

8.2 异步编程

Promise的状态
- pending：初始状态
- fulfilled：操作成功完成
- rejected：操作失败
async/await的优势
- 代码更简洁，避免回调地狱
- 错误处理更简单，可以使用try/catch
- 更符合同步编程的思维习惯

8.3 DOM操作

事件委托的原理
利用事件冒泡机制，在父元素上监听事件，通过event.target判断具体触发元素。
虚拟DOM的优势
- 提高性能，减少直接操作DOM的次数
- 提供跨平台能力
- 简化开发流程

8.4 jQuery相关

jQuery选择器与原生选择器的区别
jQuery选择器返回jQuery对象，支持链式调用；原生选择器返回DOM元素或NodeList。
$(document).ready()的作用
确保DOM完全加载后再执行代码，类似于原生的DOMContentLoaded事件。

第九部分：性能优化

9.1 JavaScript优化

// 避免全局变量
(function() {// 代码在这里执行
})();// 使用事件委托
document.addEventListener('click', function(event) {if (event.target.matches('.btn')) {// 处理点击}
});// 防抖和节流
function debounce(func, delay) {let timeout;return function() {clearTimeout(timeout);timeout = setTimeout(() => func.apply(this, arguments), delay);};
}function throttle(func, delay) {let lastCall = 0;return function() {const now = new Date().getTime();if (now - lastCall < delay) return;lastCall = now;return func.apply(this, arguments);};
}

9.2 jQuery优化

// 缓存jQuery对象
const $elements = $('.myClass');// 使用链式调用
$('#element').addClass('active').css('color', 'red').fadeIn();// 使用事件委托
$('#container').on('click', '.btn', handler);// 合理使用选择器
$('div.myClass');   // 比 $('.myClass') 更快

第十部分：现代JavaScript开发

10.1 模块打包工具

// webpack配置示例
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: 'babel-loader'}]}
};

10.2 代码质量工具

// ESLint配置
module.exports = {env: {browser: true,es2021: true},extends: ['eslint:recommended'],parserOptions: {ecmaVersion: 12,sourceType: 'module'},rules: {'no-console': 'warn'}
};