jQuery工具函数

概览

jQuery工具函数是直接挂载在jQuery全局对象（$或jQuery）上的方法，不依赖于任何DOM元素选择。它们为常见的编程任务提供了实用功能，涵盖了数组与对象操作、类型检测、字符串处理等多个方面。这些jQuery工具函数扩展了JavaScript原生能力，是编写简洁、高效代码的重要辅助。本章节将系统介绍最核心的工具函数，包括迭代、合并、过滤、类型判断等，并通过示例展示其应用场景。

数组与对象操作

jQuery提供了一系列强大的工具函数，用于遍历、处理、合并和过滤数组及对象。这些函数极大地简化了数据结构的操作。

$.each()：通用迭代器

$.each() 函数用于遍历数组或对象，对每个元素执行一个函数。它不同于 jQuery 对象的 .each() 方法，可以直接用于任何数组或对象。

语法

jQuery.each( collection, callback )

collection：要遍历的数组或对象。
callback(index, value)：为每个元素执行的函数。对于数组，index 是数字索引；对于对象，index 是键名。

示例：遍历数组和对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>$.each() 示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <div id="array-output"></div>
    <div id="object-output"></div>

    <script>
        var $arrayOutput = $('#array-output');
        var $objectOutput = $('#object-output');
        var fruits = ['苹果', '香蕉', '橙子'];
        var person = { name: '张三', age: 30, city: '北京' };

        // 遍历数组
        $.each(fruits, function(index, value) {
            $arrayOutput.append('<p>索引 ' + index + ': ' + value + '</p>');
        });

        // 遍历对象
        $.each(person, function(key, value) {
            $objectOutput.append('<p>键 "' + key + '": ' + value + '</p>');
        });
    </script>
</body>
</html>

此示例展示了 $.each() 在处理不同类型集合时的灵活性。无论遍历数组还是对象，回调函数都能接收到当前的索引/键和对应的值。

$.map()：转换数组或对象

$.map() 函数用于对数组或对象的每个元素执行一个函数，并将返回值组成一个新的数组。它非常适合进行数据转换。

语法

jQuery.map( collection, callback )

collection：要转换的数组或对象。
callback(value, index/key)：为每个元素执行的转换函数。返回值将被添加到新数组中。

示例：转换数据

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>$.map() 示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <div id="original"></div>
    <div id="mapped"></div>

    <script>
        var numbers = [1, 2, 3, 4, 5];
        $('#original').text('原始数组: ' + numbers.join(', '));

        // 将每个数字乘以2，并只保留偶数
        var doubledEven = $.map(numbers, function(value) {
            return value * 2;
        });
        $('#mapped').append('<p>每个数字乘以2: ' + doubledEven.join(', ') + '</p>');
    </script>
</body>
</html>

在这个示例中，$.map() 接收原始数组，并将每个元素乘以2，最终生成一个转换后的新数组。如果转换函数返回 null 或 undefined，该元素会被从最终数组中移除。

$.grep()：过滤数组

$.grep() 函数用于过滤数组，返回一个新数组，其中仅包含通过测试函数的元素。

语法

jQuery.grep( array, callback [, invert ] )

array：要过滤的数组。
callback(value, index)：测试函数，如果返回 true，则保留元素。
invert（可选）：如果为 true，则反转筛选条件，保留返回 false 的元素。

示例：筛选数字

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>$.grep() 示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <div id="original"></div>
    <div id="filtered"></div>

    <script>
        var scores = [85, 42, 73, 91, 55, 68];
        $('#original').text('原始分数: ' + scores.join(', '));

        // 筛选出及格（>=60）的分数
        var passed = $.grep(scores, function(score) {
            return score >= 60;
        });
        $('#filtered').text('及格分数: ' + passed.join(', '));
    </script>
</body>
</html>

此示例使用 $.grep() 从分数数组中筛选出及格的分数。这是一个典型的 jQuery工具函数 应用，用于数据筛选。

$.extend()：合并对象

$.extend() 函数是一个强大的工具，用于将一个或多个对象的属性合并到目标对象中。它常用于处理插件选项（如之前章节所述）和深拷贝对象。

语法

jQuery.extend( [deep], target, object1 [, objectN ] )

deep（可选）：布尔值，如果为 true，则执行递归合并（深拷贝）。
target：目标对象，接收其他对象属性的对象。
object1…objectN：一个或多个源对象，其属性将被合并到目标对象中。

示例：合并配置项

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>$.extend() 示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <pre id="result"></pre>

    <script>
        var defaultSettings = {
            color: 'blue',
            size: 12,
            visible: true
        };

        var userSettings = {
            color: 'red',
            text: 'Hello World'
        };

        // 合并默认配置和用户配置
        var finalSettings = $.extend({}, defaultSettings, userSettings);

        $('#result').text(JSON.stringify(finalSettings, null, 2));
    </script>
</body>
</html>

在这个示例中，$.extend() 创建了一个新对象（空对象 {} 作为目标），然后将 defaultSettings 和 userSettings 的属性合并进去。userSettings 中的 color 覆盖了默认值，并添加了 text 属性。这种模式是 jQuery工具函数 在配置管理中的经典应用。

$.merge()：合并数组

$.merge() 函数用于合并两个数组的内容到第一个数组中。它会修改第一个数组，并返回它。

语法

jQuery.merge( first, second )

first：第一个数组，合并的目标。
second：第二个数组，其元素将被追加到第一个数组中。

示例：合并两个数组

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>$.merge() 示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <div id="output"></div>

    <script>
        var arr1 = ['a', 'b', 'c'];
        var arr2 = ['d', 'e', 'f'];

        $('#output').append('<p>合并前 arr1: ' + arr1.join(', ') + '</p>');
        $('#output').append('<p>合并前 arr2: ' + arr2.join(', ') + '</p>');

        var merged = $.merge(arr1, arr2);

        $('#output').append('<p>合并后返回值: ' + merged.join(', ') + '</p>');
        $('#output').append('<p>合并后 arr1 (已被修改): ' + arr1.join(', ') + '</p>');
    </script>
</body>
</html>

此示例显示 $.merge() 直接将 arr2 的元素追加到 arr1 的末尾，并返回修改后的 arr1。这是一个原地操作，理解这一点对于避免意外副作用很重要。

类型检测

jQuery 提供了一系列工具函数，用于检测 JavaScript 数据的内部类型。这些函数比 typeof 操作符更可靠，能区分 数组、对象、函数 等不同类型。需要注意的是，在 jQuery 4.0 中，部分函数已被标记为弃用，推荐使用原生方法。

函数	jQuery 4.0 状态	描述	原生替代方案
`$.isArray()`	已移除	判断是否为数组。	`Array.isArray()`
`$.isFunction()`	已移除	判断是否为函数。	`typeof value === "function"`
`$.isNumeric()`	已移除	判断是否为数值（或数值字符串）。	`!isNaN(parseFloat(value)) && isFinite(value)`
`$.isWindow()`	已移除	判断是否为 window 对象。	`obj !== null && obj === obj.window`
`$.isEmptyObject()`	保留	判断对象是否为空（无可枚举属性）。	`Object.keys(obj).length === 0`
`$.isPlainObject()`	保留	判断是否为“纯粹”的对象（通过 `{}` 或 `new Object` 创建）。	无直接完美替代，可结合 `typeof` 和 `constructor` 判断。
`$.type()`	已移除	更准确地检测数据类型，返回 `"array"`、`"date"`、`"regexp"` 等。	`Object.prototype.toString.call(obj).slice(8, -1).toLowerCase()`

示例：类型检测

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>类型检测示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <pre id="output"></pre>

    <script>
        var $out = $('#output');
        var testDate = new Date();
        var testArray = [1, 2, 3];
        var testObject = { a: 1 };
        var emptyObject = {};

        var output = '';

        // 使用保留的函数 (jQuery 3.x 及以下兼容)
        output += '$.isEmptyObject(emptyObject): ' + $.isEmptyObject(emptyObject) + 'n';
        output += '$.isPlainObject(testObject): ' + $.isPlainObject(testObject) + 'n';

        // 在 jQuery 4.0 之后，推荐使用原生方法
        output += 'n--- 原生替代方案 (推荐) ---n';
        output += 'Array.isArray(testArray): ' + Array.isArray(testArray) + 'n';
        output += 'typeof testDate === "object" && testDate instanceof Date: ' + (typeof testDate === 'object' && testDate instanceof Date) + 'n';
        output += 'Object.keys(emptyObject).length === 0: ' + (Object.keys(emptyObject).length === 0) + 'n';

        $out.text(output);
    </script>
</body>
</html>

这个示例展示了部分 jQuery工具函数 在类型检测中的应用，并指出了在现代开发中向原生 JavaScript 迁移的趋势。了解这些函数的目的是为了维护旧代码，而在新项目中，应优先使用原生方法。

字符串与数据操作

jQuery 还提供了一些实用的函数，用于处理字符串和解析数据。同样，许多功能在现代 JavaScript 中已有原生等价物。

$.trim()：移除字符串两端的空白

$.trim() 函数用于移除字符串开头和结尾的空白字符（包括空格、制表符、换行符等）。

语法

jQuery.trim( string )

string：要处理的字符串。

示例：清理用户输入

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>$.trim() 示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <input type="text" id="userInput" placeholder="  输入一些内容  ">
    <button id="process">处理</button>
    <div id="result"></div>

    <script>
        $('#process').on('click', function() {
            var rawValue = $('#userInput').val();
            var trimmedValue = $.trim(rawValue);

            $('#result').html('<p>原始值: "' + rawValue + '" (长度: ' + rawValue.length + ')</p>' +
                              '<p>处理后值: "' + trimmedValue + '" (长度: ' + trimmedValue.length + ')</p>');
        });
    </script>
</body>
</html>

在 jQuery 4.0 中，$.trim() 已被移除，推荐使用原生 String.prototype.trim() 方法。此示例展示了其典型的应用场景：清理表单输入。

$.parseJSON()：解析 JSON 字符串

在原生 JSON.parse() 出现之前，$.parseJSON() 是 jQuery 提供的解析 JSON 字符串的标准方法。它要求传入的字符串格式严格有效。

语法

jQuery.parseJSON( jsonString )

jsonString：一个格式良好的 JSON 字符串。

示例：解析 JSON（已弃用）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>$.parseJSON() 示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <pre id="output"></pre>

    <script>
        var jsonStr = '{"name": "李四", "age": 28, "skills": ["JavaScript", "Python"]}';

        // 在 jQuery 3.x 及以下版本中使用
        // var data = $.parseJSON(jsonStr);

        // 推荐的原生方法 (适用于所有现代浏览器和 Node.js)
        var data = JSON.parse(jsonStr);

        $('#output').text('解析后的对象: n' + JSON.stringify(data, null, 2));
    </script>
</body>
</html>

此示例明确指出，在 jQuery 4.0 中 $.parseJSON() 已被移除。所有现代开发都应使用原生的 JSON.parse()，它更快、更安全。

工具函数对比

下表总结了核心 jQuery工具函数 的分类与作用。

分类	函数名	核心用途	jQuery 4.0 状态
数组/对象操作	`$.each()`	遍历数组或对象	保留
	`$.map()`	转换数组或对象为新的数组	保留
	`$.grep()`	过滤数组	保留
	`$.extend()`	合并对象（可深拷贝）	保留
	`$.merge()`	合并数组	保留
类型检测	`$.isArray()`	检测是否为数组	移除，用 `Array.isArray()`
	`$.isFunction()`	检测是否为函数	移除，用 `typeof`
	`$.isNumeric()`	检测是否为数值	移除，自行实现
	`$.isEmptyObject()`	检测对象是否为空	保留
	`$.isPlainObject()`	检测是否为纯粹对象	保留
	`$.type()`	获取精确的数据类型	移除，用 `Object.prototype.toString`
字符串/数据	`$.trim()`	移除字符串两端空白	移除，用 `String.prototype.trim()`
	`$.parseJSON()`	解析 JSON 字符串	移除，用 `JSON.parse()`

版本变更记录

版本	变更内容
1.0	引入了大部分核心工具函数，如 `$.each`、`$.extend`、`$.grep`、`$.trim` 等。
1.2	引入了 `$.parseJSON` 以应对日益增长的 JSON 数据交换需求。
1.4	增强了对 `$.isNumeric` 等类型检测函数的精确度。
1.7	内部性能优化，但函数签名保持稳定。
3.0	开始标记部分函数为弃用，并引导用户使用原生替代方案。
4.0	正式移除多个已弃用的函数：`$.isArray`、`$.parseJSON`、`$.trim`、`$.type`、`$.isNumeric`、`$.isFunction`、`$.isWindow` 等。

浏览器兼容性

jQuery工具函数 不依赖 DOM，因此其兼容性主要受限于 jQuery 核心库本身。对于 jQuery 3.x 及更早版本，这些函数旨在所有支持浏览器中工作一致，包括对原生方法缺失的浏览器提供回退。对于 jQuery 4.x，建议使用原生替代方案，这意味着开发者需要确保目标环境支持这些原生方法，或提供相应的 polyfill。

浏览器	最低支持版本 (jQuery 3.x)	原生替代方案要求
Chrome	30+	无特殊要求
Edge	12+	无特殊要求
Firefox	25+	无特殊要求
Opera	18+	无特殊要求
Safari	7+	无特殊要求
Chrome Android	30+	无特殊要求
Firefox for Android	25+	无特殊要求
Opera Android	18+	无特殊要求
Safari on iOS	7+	无特殊要求
Samsung Internet	4.0+	无特殊要求
WebView Android	4.4+	无特殊要求
WebView on iOS	7+	无特殊要求

注：对于需要支持非常古老浏览器（如 IE 6-8）的项目，必须使用 jQuery 1.x 或 2.x 版本。在这些版本中，所有工具函数都可用，其内部实现为缺失的浏览器功能提供了必要的兼容层。

掌握 jQuery工具函数 是深入理解和使用 jQuery 的关键一步。它们不仅在日常开发中提供了大量便利，也是许多复杂插件和框架的内部基础。随着 Web 标准的演进，jQuery 正逐步将一些通用的工具函数职责交还给原生 JavaScript，这种趋势促使开发者不断学习标准 API，同时也使代码更加轻量和面向未来。无论是继续在 jQuery 生态中工作，还是向现代 JavaScript 迁移，理解这些工具函数的核心概念都是极有价值的。

简介与入门

jQuery 选择器

DOM操作与遍历

HTML元素操作

动画与特效

事件处理

实用函数

回调、延迟与异步

jQuery Ajax

jQuery 插件

优化与实践

与现代前端开发

综合实战项目

参考手册