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

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基础

1. var、let、const的区别

   • var：函数作用域，存在变量提升
   • let：块级作用域，不存在变量提升
   • const：块级作用域，常量，不可重新赋值

2. == 和 === 的区别

   • ==：比较值，会进行类型转换
   • ===：比较值和类型，不会进行类型转换

3. 什么是闭包？有什么作用？

   闭包是函数和其词法环境的组合，可以访问外部函数的作用域。用于数据封装和私有变量。

8.2 异步编程

1. Promise的状态

   • pending：初始状态
   • fulfilled：操作成功完成
   • rejected：操作失败

2. async/await的优势

   • 代码更简洁，避免回调地狱
   • 错误处理更简单，可以使用try/catch
   • 更符合同步编程的思维习惯

8.3 DOM操作

1. 事件委托的原理

   利用事件冒泡机制，在父元素上监听事件，通过event.target判断具体触发元素。

2. 虚拟DOM的优势

   • 提高性能，减少直接操作DOM的次数
   • 提供跨平台能力
   • 简化开发流程

8.4 jQuery相关

1. jQuery选择器与原生选择器的区别

   jQuery选择器返回jQuery对象，支持链式调用；原生选择器返回DOM元素或NodeList。

2. $(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'
    }
};

总结

JavaScript和jQuery是现代Web开发的核心技术。JavaScript提供了强大的编程能力，而jQuery简化了DOM操作和跨浏览器兼容性问题。掌握这些技术对于前端开发者至关重要。

学习建议：

1. 先扎实掌握JavaScript基础
2. 理解异步编程和闭包等核心概念
3. 熟练操作DOM和事件处理
4. 学习jQuery提高开发效率
5. 关注ES6+新特性
6. 实践性能优化技巧

不断练习和构建项目是掌握这些技术的最佳方式！