Jquery总结 - 技术栈

以下是对 jQuery 完整、系统的总结，涵盖其核心概念、使用方法、常用 API、优缺点、典型应用场景以及多个实用示例。

一、什么是 jQuery？

jQuery 是一个快速、小巧、功能丰富的 JavaScript 库。它封装了原生 JavaScript 中复杂、冗长的 DOM 操作、事件处理、动画、Ajax 等功能，使得开发者可以用更简洁、一致的语法跨浏览器地操作网页。

官网口号："Write less, do more."（写得更少，做得更多）

首次发布：2006 年，由 John Resig 创建
当前主流版本 ：
- 1.x：兼容 IE6~8（已停止维护）
- 2.x：不支持 IE6~8
- 3.x：现代浏览器（推荐使用），支持 Promise、模块化等新特性

二、jQuery 的核心特点

简化 DOM 操作
- 选择元素、修改内容、增删节点等操作极其简洁
强大的选择器
- 支持 CSS1~CSS3 选择器，甚至部分自定义扩展
链式调用（Chaining）
- 多个方法可连续调用，提高代码可读性
事件处理统一
- 屏蔽浏览器差异，提供统一事件模型
Ajax 支持
- 简化异步请求（$.ajax, $.get, $.post 等）
动画效果
- 内置 fadeIn、slideUp、animate 等动画方法
插件生态丰富
- 社区提供大量 UI 插件（如 jQuery UI、DataTables、Slick 等）

三、jQuery 的基本使用

1. 引入 jQuery

可通过 CDN 或本地文件引入：

html 复制代码

<!-- 通过 CDN（推荐使用官方或国内镜像） -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- 或使用国内 CDN（如 BootCDN） -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

注意：jQuery 必须在使用前加载完成。

2. 文档就绪（Document Ready）

确保 DOM 加载完成后执行代码：

js 复制代码

$(document).ready(function() {
    // DOM 已准备就绪
});

// 或简写
$(function() {
    // 代码
});

区别于 window.onload：$(document).ready 在 DOM 构建完成即触发，不等待图片等资源加载。

四、核心概念详解

1. jQuery 对象 vs 原生 DOM 对象

jQuery 对象 ：通过 $() 返回的对象，是类数组结构，包含一组 DOM 元素，并带有 jQuery 方法。
原生 DOM 对象：浏览器原生的 Element 对象。

转换方式：

js 复制代码

// jQuery → DOM
var dom = $('#myDiv')[0];      // 方式1：索引访问
var dom = $('#myDiv').get(0);  // 方式2：.get()

// DOM → jQuery
var $div = $(document.getElementById('myDiv'));

2. 选择器（Selectors）

jQuery 使用 CSS 风格选择器：

类型	示例	说明
ID 选择器	`$('#header')`	选择 id 为 header 的元素
类选择器	`$('.btn')`	选择所有 class 包含 btn 的元素
元素选择器	`$('p')`	所有 `<p>` 标签
后代选择器	`$('ul li')`	ul 下所有 li
子元素选择器	`$('ul > li')`	ul 的直接子 li
属性选择器	`$('[type="text"]')`	type 属性为 text 的元素
伪类选择器	`$('li:first')`, `$('input:disabled')`	支持常见伪类

⚠️ 注意：jQuery 扩展了一些非标准伪类，如 :visible、:hidden、:contains('text') 等。

3. 链式调用（Method Chaining）

js 复制代码

$('#box')
  .css('color', 'red')
  .fadeIn()
  .addClass('highlight')
  .on('click', handler);

每个方法返回 jQuery 对象本身，实现链式操作。

五、常用 API 分类详解

1. DOM 操作

方法	说明
`.html()` / `.text()`	获取/设置 HTML 或纯文本内容
`.val()`	表单元素的值（input, select, textarea）
`.attr()` / `.prop()`	操作属性（attribute vs property）
`.addClass()` / `.removeClass()` / `.toggleClass()`	操作 class
`.css()`	设置/获取 CSS 样式
`.append()` / `.prepend()`	在内部添加内容
`.before()` / `.after()`	在外部插入兄弟节点
`.remove()` / `.empty()`	删除元素或清空内容

✅ 区分 .attr() 和 .prop()：

attr()：操作 HTML 属性（如 data-*、href）

prop()：操作 DOM 属性（如 checked、disabled、selectedIndex）

2. 事件处理

方法	说明
`.on(event, handler)`	绑定事件（推荐）
`.off(event)`	解绑事件
`.click()` / `.hover()` / `.submit()`	快捷事件方法
`.trigger(event)`	手动触发事件

事件委托（Event Delegation）：

js 复制代码

// 动态添加的按钮也能响应点击
$(document).on('click', '.dynamic-btn', function() {
    alert('Clicked!');
});

3. 动画与效果

方法	说明
`.show()` / `.hide()` / `.toggle()`	显示/隐藏
`.fadeIn()` / `.fadeOut()`	淡入淡出
`.slideUp()` / `.slideDown()`	上下滑动
`.animate({})`	自定义动画（仅支持数值属性）

js 复制代码

$('#box').animate({
    left: '200px',
    opacity: 0.5
}, 1000);

4. Ajax 操作

方法	说明
`$.ajax(options)`	最灵活的 Ajax 方法
`$.get(url, data, success)`	GET 请求
`$.post(url, data, success)`	POST 请求
`$.getJSON(url, success)`	获取 JSON 数据

示例：使用 $.ajax

js 复制代码

$.ajax({
    url: '/api/users',
    method: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log('成功:', data);
    },
    error: function(xhr, status, err) {
        console.error('错误:', err);
    }
});

✅ jQuery 3.x 起支持 Promise 风格：
js 复制代码
$.get('/api/data').done(...).fail(...).always(...);

5. 工具方法（Utilities）

方法	说明
`$.each(array, fn)`	遍历数组或对象
`$.map(array, fn)`	映射转换
`$.trim(str)`	去除字符串首尾空格
`$.isArray(obj)` / `$.isFunction(obj)`	类型判断
`$.extend(target, obj1, obj2...)`	对象合并（常用于插件配置）

六、完整实例演示

实例 1：动态添加待办事项（Todo List）

html 复制代码

<input type="text" id="taskInput">
<button id="addBtn">添加</button>
<ul id="taskList"></ul>

<script>
$(function() {
    $('#addBtn').on('click', function() {
        var task = $('#taskInput').val().trim();
        if (task) {
            $('#taskList').append(`<li>${task} <button class="del">删除</button></li>`);
            $('#taskInput').val('');
        }
    });

    // 事件委托处理删除
    $('#taskList').on('click', '.del', function() {
        $(this).parent().remove();
    });
});
</script>

实例 2：Ajax 加载用户数据

js 复制代码

$(function() {
    $('#loadUsers').on('click', function() {
        $.get('/api/users', function(users) {
            let html = '';
            users.forEach(u => html += `<p>${u.name}</p>`);
            $('#userList').html(html);
        }).fail(function() {
            alert('加载失败！');
        });
    });
});

实例 3：表单验证（简易）

js 复制代码

$('form').on('submit', function(e) {
    const email = $('#email').val();
    if (!email.includes('@')) {
        alert('邮箱格式错误');
        e.preventDefault(); // 阻止提交
    }
});

七、jQuery 的优缺点

优点 ✅

语法简洁，学习成本低
跨浏览器兼容性好（尤其在旧项目中）
插件生态成熟
大量遗留系统依赖 jQuery

缺点 ❌

性能不如原生 JS（尤其在大型应用中）
体积较大（尽管 minified 后 ~30KB）
现代前端框架（React/Vue/Angular）已取代其地位
过度依赖会导致"jQuery 思维"，阻碍理解现代 JS

📌 当前建议：

新项目优先使用原生 JS（ES6+）或现代框架

老项目维护或简单页面仍可使用 jQuery

八、最佳实践

缓存 jQuery 对象

js 复制代码

var $btn = $('#submitBtn');
$btn.on('click', ...);
$btn.addClass('loading');

使用事件委托处理动态内容
避免过度使用 $.each，原生 for 或 forEach 更快
不要混用 jQuery 和原生操作同一元素
使用 noConflict() 避免与其他库冲突
js 复制代码
```
var $j = jQuery.noConflict();
$j('#myDiv').hide();
```

九、学习资源推荐

官网：https://jquery.com
API 文档：https://api.jquery.com
书籍：《jQuery 权威指南》《Learning jQuery》