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'}
};