jQuery 3.7.1

📖1. jQuery 3.7.1 简介与特性

jQuery 3.7.1 是一个快速、小巧且功能丰富的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。它是目前世界上使用最广泛的 JavaScript 库之一。

核心特性

⚙️2. 环境配置

方式一: CDN 引入

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

方式二: NPM 安装

npm install jquery@3.7.1

💡3. 核心概念

DOM 就绪机制

$(document).ready(function() {
    // DOM 加载完成后执行
    console.log('jQuery 已就绪!');
});

// 简写形式
$(function() {
    console.log('这是更简洁的写法');
});

链式调用

$('.box')
    .css('color', 'blue')
    .slideUp(300)
    .slideDown(300)
    .addClass('active');

🎯4. 选择器系统

基础选择器

$('#id')           // ID 选择器
$('.class')        // 类选择器
$('div')           // 元素选择器
$('*')             // 通配符选择器
$('.c1, .c2')      // 组合选择器

层次选择器

$('div p')         // 后代选择器
$('div > p')       // 子元素选择器
$('div + p')       // 相邻兄弟选择器
$('div ~ p')       // 通用兄弟选择器

过滤选择器

$('li:first')      // 第一个元素
$('li:last')       // 最后一个元素
$('li:eq(2)')      // 索引为2的元素
$('li:odd')        // 奇数索引
$('li:even')       // 偶数索引
$(':visible')      // 可见元素 (3.7.1 优化)
$(':hidden')       // 隐藏元素 (3.7.1 优化)

🏗️5. DOM 操作

内容操作

$('#box').html('<p>新内容</p>');  // 设置 HTML
$('#box').text('纯文本');           // 设置文本
$('#input').val('输入值');          // 设置表单值

属性操作

$('img').attr('src', 'new.jpg');    // 设置属性
$('img').removeAttr('title');       // 移除属性
$('input').prop('checked', true);   // 设置属性(布尔值)

样式操作

$('.box').css('color', 'red');      // 设置单个样式
$('.box').css({                     // 设置多个样式
    'color': 'blue',
    'font-size': '16px'
});
$('.box').addClass('active');       // 添加类
$('.box').removeClass('active');    // 移除类
$('.box').toggleClass('active');    // 切换类

DOM 插入

$('.box').append('<p>追加到末尾</p>');
$('.box').prepend('<p>插入到开头</p>');
$('.box').after('<p>插入到后面</p>');
$('.box').before('<p>插入到前面</p>');

📍6. 遍历方法

遍历方法用于在 DOM 树中查找、筛选和导航元素。jQuery 提供了丰富的遍历 API，让你能够轻松地找到所需的元素。

祖先元素遍历

$('.item').parent();          // 直接父元素
$('.item').parents();         // 所有祖先元素
$('.item').parents('.list');  // 指定的祖先元素
$('.item').parentsUntil('.container'); // 到指定元素为止的祖先
$('.item').closest('.wrapper'); // 最近的匹配祖先

后代元素遍历

$('.list').children();        // 所有直接子元素
$('.list').children('.item'); // 指定的子元素
$('.list').find('span');      // 所有匹配的后代元素
$('.container').contents();   // 所有子节点（包含文本节点）

兄弟元素遍历

$('.item').siblings();        // 所有兄弟元素
$('.item').siblings('.active'); // 指定的兄弟元素
$('.item').next();            // 下一个兄弟
$('.item').nextAll();         // 之后所有兄弟
$('.item').prev();            // 上一个兄弟
$('.item').prevAll();         // 之前所有兄弟
$('.item').nextUntil('.end'); // 到指定元素为止

筛选方法

$('li').first();              // 第一个元素
$('li').last();               // 最后一个元素
$('li').eq(2);                // 索引为2的元素
$('li').filter('.active');    // 符合条件的元素
$('li').not('.disabled');     // 排除匹配的元素
$('li').has('span');          // 包含指定后代的元素
$('li').slice(1, 4);          // 索引 1 到 3 的元素

常用遍历方法一览

方法	说明	示例
.find()	查找所有匹配的后代元素	$('.list').find('li')
.closest()	查找最近的匹配祖先	$(this).closest('form')
.filter()	筛选符合条件的元素	$('li').filter(':even')
.end()	返回上一个破坏性操作前的集合	$('ul').find('li').end()

📝7. 表单操作

jQuery 提供了强大的表单处理能力，可以轻松获取、设置表单值，并进行表单验证和序列化。

获取与设置表单值

// 获取输入框的值
var username = $('#username').val();

// 设置输入框的值
$('#username').val('新用户名');

// 获取多选下拉框的值（返回数组）
var selected = $('#multiSelect').val();

// 设置多选下拉框的选中项
$('#multiSelect').val(['option1', 'option2']);

复选框与单选框

// 检查复选框是否选中
var isChecked = $('#agree').prop('checked');

// 设置复选框选中状态
$('#agree').prop('checked', true);

// 获取选中的单选框的值
var gender = $('input[name="gender"]:checked').val();

// 获取所有选中的复选框的值
var hobbies = [];
$('input[name="hobby"]:checked').each(function() {
    hobbies.push($(this).val());
});

表单序列化

// 序列化表单为 URL 编码字符串
var formData = $('form').serialize();
// 结果: "username=John&email=john@example.com"

// 序列化为数组对象
var formArray = $('form').serializeArray();
// 结果: [{name: "username", value: "John"}, ...]

// 将对象序列化为 URL 参数
var params = $.param({name: 'John', age: 30});
// 结果: "name=John&age=30"

表单验证示例

$('form').submit(function(e) {
    var isValid = true;
    var errors = [];
    
    // 验证用户名
    var username = $('#username').val().trim();
    if (username.length < 3) {
        isValid = false;
        errors.push('用户名至少需要3个字符');
        $('#username').addClass('error');
    }
    
    // 验证邮箱
    var email = $('#email').val();
    var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
        isValid = false;
        errors.push('请输入有效的邮箱地址');
        $('#email').addClass('error');
    }
    
    if (!isValid) {
        e.preventDefault();
        alert(errors.join('\n'));
    }
});

表单事件

// 输入时实时验证
$('#username').on('input', function() {
    var value = $(this).val();
    if (value.length >= 3) {
        $(this).removeClass('error').addClass('valid');
    }
});

// 失去焦点时验证
$('#email').on('blur', function() {
    var email = $(this).val();
    // 执行验证...
});

// 下拉框变化时
$('#category').on('change', function() {
    var selected = $(this).val();
    console.log('选中:', selected);
});

// 表单提交
$('form').on('submit', function(e) {
    e.preventDefault();
    // 处理表单提交...
});

👆8. 事件处理

基础事件绑定

$('.btn').click(function() {
    alert('按钮被点击!');
});

$('.input').focus(function() {
    $(this).css('border-color', 'blue');
});

事件委托 (推荐)

// 为动态添加的元素绑定事件
$(document).on('click', '.dynamic-btn', function() {
    console.log('动态按钮被点击');
});

// 事件委托到父元素
$('.list').on('click', 'li', function() {
    $(this).toggleClass('selected');
});

常用事件方法

$('.element').on('click', handler);     // 绑定事件
$('.element').off('click');             // 解绑事件
$('.element').one('click', handler);    // 只触发一次
$('.element').trigger('click');         // 手动触发事件

✨9. 动画与效果

基础动画

$('.box').hide();              // 隐藏
$('.box').show();              // 显示
$('.box').toggle();            // 切换显示/隐藏

$('.box').fadeIn(500);         // 淡入
$('.box').fadeOut(500);        // 淡出
$('.box').fadeToggle(500);     // 切换淡入/淡出

$('.box').slideDown(300);      // 下滑显示
$('.box').slideUp(300);        // 上滑隐藏
$('.box').slideToggle(300);    // 切换滑动

自定义动画

$('.box').animate({
    width: '300px',
    height: '300px',
    opacity: 0.5
}, 1000, function() {
    console.log('动画完成!');
});

动画队列控制

$('.box')
    .slideUp(300)
    .delay(500)           // 延迟500ms
    .slideDown(300)
    .animate({left: '100px'}, 500)
    .queue(function(next) {
        $(this).css('background', 'red');
        next();           // 继续队列
    });

🔄10. Ajax 异步操作

基础 Ajax 请求

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

简化方法

// GET 请求
$.get('/api/user', function(data) {
    console.log(data);
});

// POST 请求
$.post('/api/user', {name: 'John', age: 30}, function(response) {
    console.log(response);
});

// 加载 JSON
$.getJSON('/api/data.json', function(json) {
    console.log(json);
});

Promise 风格 (jQuery 3.x)

$.ajax({
    url: '/api/data',
    type: 'GET'
})
.done(function(data) {
    console.log('成功:', data);
})
.fail(function(xhr, status, error) {
    console.error('失败:', error);
})
.always(function() {
    console.log('请求完成');
});

🛠️11. 工具方法

jQuery 提供了许多实用的工具方法，帮助处理数组、对象、字符串等常见操作。

数组与对象操作

// 遍历数组或对象
$.each([1, 2, 3], function(index, value) {
    console.log(index + ': ' + value);
});

// 遍历对象
$.each({name: 'John', age: 30}, function(key, value) {
    console.log(key + ' = ' + value);
});

// 映射数组
$.map([1, 2, 3], function(value, index) {
    return value * 2;  // [2, 4, 6]
});

// 合并数组
$.merge([1, 2], [3, 4]);  // [1, 2, 3, 4]

// 去重
$.unique(array);  // 移除重复的 DOM 元素

// 过滤数组
$.grep([1, 2, 3, 4], function(value) {
    return value > 2;  // [3, 4]
});

// 查找元素索引
$.inArray('b', ['a', 'b', 'c']);  // 1

对象扩展与合并

// 浅拷贝合并对象
var obj1 = {a: 1, b: 2};
var obj2 = {b: 3, c: 4};
$.extend(obj1, obj2);  // obj1 = {a: 1, b: 3, c: 4}

// 深拷贝合并
var deep1 = {a: {x: 1}};
var deep2 = {a: {y: 2}};
$.extend(true, deep1, deep2);  // {a: {x: 1, y: 2}}

// 创建新对象（不修改原对象）
var newObj = $.extend({}, obj1, obj2);

类型检测

$.isArray([1, 2, 3]);       // true
$.isFunction(function(){}); // true
$.isNumeric('42');          // true
$.isNumeric(42);            // true
$.isPlainObject({});        // true
$.isEmptyObject({});        // true
$.type(obj);                // 'array', 'object', 'function' 等

字符串与其他工具

// 去除字符串两端空白
$.trim('  hello world  ');  // 'hello world'

// 序列化表单数据
$('form').serialize();      // 'name=John&age=30'
$.param({a: 1, b: 2});      // 'a=1&b=2'

// 解析 JSON
$.parseJSON('{"name":"John"}');  // {name: 'John'}

// 解析 HTML
$.parseHTML('
Hello
');  // DOM 节点数组

// 检查元素是否在集合中
$.contains(document.body, element);  // true/false

// 创建代理函数
$.proxy(function, context);  // 改变 this 指向

数据存储

// 在元素上存储数据
$('#box').data('key', 'value');
$('#box').data('key');        // 'value'
$('#box').removeData('key');

// 存储对象数据
$('#box').data('info', {name: 'John', age: 30});
var info = $('#box').data('info');

// 从 data-* 属性读取
// 

$('#box').data('userId');     // 123
$('#box').data('config');     // {theme: 'dark'}

🚀12. 性能优化策略

选择器优化

// ❌ 慢速
$('.container .item .link');

// ✅ 快速 - 使用 ID 选择器
$('#container').find('.link');

// ✅ 缓存选择器结果
var $items = $('.item');
$items.addClass('active');
$items.css('color', 'red');

事件委托

// ❌ 为每个元素绑定事件
$('.item').click(handler);

// ✅ 使用事件委托
$('.container').on('click', '.item', handler);

链式调用

// ❌ 多次查询 DOM
$('.box').css('color', 'red');
$('.box').addClass('active');
$('.box').fadeIn(300);

// ✅ 链式调用，只查询一次
$('.box')
    .css('color', 'red')
    .addClass('active')
    .fadeIn(300);

jQuery 3.7.1 新特性

🧩13. 插件开发

jQuery 插件是扩展 jQuery 功能的最佳方式。通过编写插件，可以封装可重用的代码，并保持 jQuery 的链式调用风格。

基础插件结构

// 基本插件模板
(function($) {
    $.fn.myPlugin = function(options) {
        // 默认配置
        var settings = $.extend({
            color: 'blue',
            fontSize: '14px'
        }, options);
        
        // 返回 this 以支持链式调用
        return this.each(function() {
            $(this).css({
                'color': settings.color,
                'font-size': settings.fontSize
            });
        });
    };
})(jQuery);

// 使用插件
$('.text').myPlugin({
    color: 'red',
    fontSize: '16px'
});

带方法的插件

(function($) {
    var methods = {
        init: function(options) {
            return this.each(function() {
                var $this = $(this);
                var data = $this.data('tooltip');
                
                if (!data) {
                    $this.data('tooltip', {
                        target: $this,
                        options: options
                    });
                }
            });
        },
        show: function() {
            return this.each(function() {
                // 显示提示框逻辑
            });
        },
        hide: function() {
            return this.each(function() {
                // 隐藏提示框逻辑
            });
        },
        destroy: function() {
            return this.each(function() {
                $(this).removeData('tooltip');
            });
        }
    };
    
    $.fn.tooltip = function(method) {
        if (methods[method]) {
            return methods[method].apply(this, 
                Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('方法 ' + method + ' 不存在');
        }
    };
})(jQuery);

// 使用
$('.tip').tooltip({position: 'top'});
$('.tip').tooltip('show');
$('.tip').tooltip('destroy');

插件开发最佳实践

完整插件示例：模态框

(function($) {
    $.fn.modal = function(options) {
        var defaults = {
            title: '提示',
            content: '',
            width: 400,
            onOpen: function() {},
            onClose: function() {}
        };
        
        var settings = $.extend({}, defaults, options);
        
        return this.each(function() {
            var $trigger = $(this);
            
            // 创建模态框 HTML
            var $modal = $('<div class="modal-overlay">');
            var $dialog = $('<div class="modal-dialog">')
                .css('width', settings.width);
            
            $dialog.append(
                '<div class="modal-header">' + settings.title + '</div>',
                '<div class="modal-body">' + settings.content + '</div>',
                '<div class="modal-footer"><button class="close-btn">关闭</button></div>'
            );
            
            $modal.append($dialog).appendTo('body').hide();
            
            // 绑定事件
            $trigger.on('click', function(e) {
                e.preventDefault();
                $modal.fadeIn(300);
                settings.onOpen.call(this);
            });
            
            $modal.on('click', '.close-btn, .modal-overlay', function(e) {
                if (e.target === this) {
                    $modal.fadeOut(300);
                    settings.onClose.call(this);
                }
            });
        });
    };
})(jQuery);

🎓14. 学习总结

jQuery 3.7.1 作为一个成熟稳定的 JavaScript 库，为开发者提供了简洁优雅的 API 来操作 DOM、处理事件、创建动画和进行 Ajax 请求。 虽然现代前端框架（React、Vue）越来越流行，但 jQuery 在快速开发、维护旧项目和简单交互场景中仍然具有不可替代的价值。

核心要点：
✓ 掌握选择器系统，高效定位元素
✓ 善用链式调用，提升代码可读性
✓ 使用事件委托，优化性能
✓ 理解动画队列机制
✓ 采用 Promise 风格处理异步操作
✓ 善用遍历方法导航 DOM 树
✓ 掌握表单操作与验证技巧
✓ 理解工具方法简化开发流程
✓ 学会开发自定义插件扩展功能