<think>我们正在讨论jQuery的功能函数（工具函数）。根据引用[3]，jQuery提供了一系列工具函数，这些函数通常以`$.`开头，可以直接通过jQuery对象调用，无需先选择DOM元素。常见的工具函数包括字符串操作、URL操作、数组操作、对象操作、检测操作等。
下面我将分类介绍jQuery中常用的工具函数：
### 1. 字符串操作
- **$.trim(str)**: 去除字符串两端的空白字符。
```javascript
var str = " hello world ";
console.log($.trim(str)); // 输出: "hello world"
```
### 2. URL操作
- **$.param(obj)**: 将对象或数组序列化成URL参数字符串。
```javascript
var params = { name: "John", age: 30 };
console.log($.param(params)); // 输出: "name=John&age=30"
```
### 3. 数组操作
- **$.inArray(value, array)**: 在数组中查找指定值，返回其索引（未找到返回-1）。
```javascript
var arr = [1, 2, 3, 4];
console.log($.inArray(3, arr)); // 输出: 2
```
- **$.merge(arr1, arr2)**: 合并两个数组，将第二个数组的元素添加到第一个数组中（改变第一个数组）。
```javascript
var arr1 = [1, 2];
var arr2 = [3, 4];
$.merge(arr1, arr2);
console.log(arr1); // 输出: [1, 2, 3, 4]
```
- **$.makeArray(obj)**: 将类数组对象（如arguments、NodeList）转换为真正的数组。
```javascript
var divs = document.getElementsByTagName('div');
var divArray = $.makeArray(divs);
console.log(Array.isArray(divArray)); // 输出: true
```
- **$.grep(array, function(element, index))**: 过滤数组，返回满足条件的元素组成的新数组。
```javascript
var numbers = [1, 2, 3, 4, 5];
var evenNumbers = $.grep(numbers, function(num) {
return num % 2 === 0;
});
console.log(evenNumbers); // 输出: [2, 4]
```
### 4. 遍历操作
- **$.each(collection, callback(index, value))**: 遍历数组或对象（类似循环，可遍历数组和对象）。
```javascript
$.each([10, 20, 30], function(index, value) {
console.log(index + ": " + value);
});
// 输出:
// 0: 10
// 1: 20
// 2: 30
$.each({ name: "John", age: 30 }, function(key, value) {
console.log(key + ": " + value);
});
// 输出:
// name: John
// age: 30
```
### 5. 对象操作
- **$.extend(target, obj1, obj2, ...)**: 合并多个对象到第一个对象（target）中（浅拷贝）。
```javascript
var target = {};
var obj1 = { name: "John" };
var obj2 = { age: 30 };
$.extend(target, obj1, obj2);
console.log(target); // 输出: { name: "John", age: 30 }
```
- **$.extend(true, target, obj1, ...)**: 深拷贝合并对象。
```javascript
var target = { person: { name: "Alice" } };
var obj1 = { person: { age: 25 } };
$.extend(true, target, obj1);
console.log(target.person); // 输出: { name: "Alice", age: 25 }
```
### 6. 检测操作
- **$.isFunction(obj)**: 判断是否为函数。
```javascript
console.log($.isFunction(function(){})); // true
```
- **$.isArray(obj)**: 判断是否为数组（内部使用Array.isArray，对于不支持的环境有降级方案）。
```javascript
console.log($.isArray([1,2,3])); // true
```
- **$.isEmptyObject(obj)**: 判断是否为空对象（没有可枚举的属性）。
```javascript
console.log($.isEmptyObject({})); // true
console.log($.isEmptyObject({ a: 1 })); // false
```
- **$.isPlainObject(obj)**: 判断是否为普通对象（通过{}或new Object创建）。
```javascript
console.log($.isPlainObject({})); // true
console.log($.isPlainObject(new Date())); // false
```
- **$.isWindow(obj)**: 判断是否为window对象。
```javascript
console.log($.isWindow(window)); // true
```
- **$.contains(container, contained)**: 判断一个DOM元素是否包含另一个DOM元素。
```javascript
console.log($.contains(document.body, document.getElementById('test'))); // 如果id为test的元素在body内则返回true
```
### 7. 其他实用函数
- **$.noop()**: 空函数，用于需要函数作为参数但不想执行任何操作的情况。
```javascript
var callback = $.noop;
callback(); // 什么都不做
```
- **$.now()**: 获取当前时间的时间戳（相当于`(new Date).getTime()`）。
```javascript
console.log($.now()); // 输出当前时间戳，如1630000000000
```
### 8. Ajax相关工具函数
- **$.parseJSON(jsonString)**: 将JSON字符串解析为JavaScript对象（在支持原生JSON.parse的浏览器中使用原生方法，否则使用eval）。
```javascript
var obj = $.parseJSON('{"name":"John"}');
console.log(obj.name); // 输出: John
```
- **$.parseXML(xmlString)**: 解析XML字符串为XML文档对象。
```javascript
var xmlDoc = $.parseXML("<root><item>value</item></root>");
console.log(xmlDoc.documentElement.nodeName); // 输出: root
```
以上是jQuery中一些常用的工具函数。它们提供了便捷的方法来处理字符串、数组、对象、类型检测等，使得开发更加高效[^3]。
§§相关问题§§
1. jQuery 的 `$.each` 和 JavaScript 的 `forEach` 有什么区别？
2. 如何使用 jQuery 的 `$.extend` 方法实现对象的深拷贝？
3. jQuery 的 `$.grep` 函数与数组的 `filter` 方法有何异同？
4. 如何用 jQuery 工具函数判断一个变量是否是数组？</think>jQuery 提供了丰富的功能函数（工具函数），这些函数以 `$.` 前缀调用，无需依赖 DOM 元素。以下是常用分类及示例：
### 一、字符串处理
1. **`$.trim()`**
去除字符串两端空格：
```javascript
$.trim(" Hello "); // 返回 "Hello" [^3]
```
### 二、URL 操作
2. **`$.param()`**
将对象序列化为 URL 参数字符串：
```javascript
$.param({ id: "Robin", type: "user" });
// 返回 "id=Robin&type=user" [^3][^2]
```
### 三、数组操作
3. **`$.grep()`**
数组过滤：
```javascript
$.grep([1,2,3,4], (n) => n > 2); // 返回 [3,4] [^3]
```
4. **`$.inArray()`**
查找元素索引：
```javascript
$.inArray(3, [1,2,3]); // 返回 2 [^3]
```
5. **`$.makeArray()`**
类数组对象转真数组：
```javascript
$.makeArray(document.querySelectorAll("div")); [^3]
```
### 四、对象操作
6. **`$.extend()`**
合并对象（浅拷贝）：
```javascript
$.extend({ name: "A" }, { age: 20 });
// 返回 {name: "A", age: 20} [^3]
```
7. **`$.each()`**
遍历对象/数组：
```javascript
$.each(["a","b"], (i, val) => console.log(val)); [^3]
```
### 五、类型检测
8. **`$.isFunction()`**
检测是否为函数：
```javascript
$.isFunction(() => {}); // true [^3]
```
9. **`$.isArray()`**
检测是否为数组：
```javascript
$.isArray([1,2]); // true [^3]
```
10. **`$.isEmptyObject()`**
检测空对象：
```javascript
$.isEmptyObject({}); // true [^3]
```
### 六、DOM 辅助
11. **`$.contains()`**
检查 DOM 包含关系：
```javascript
$.contains(document.body, document.getElementById("el")); [^3]
```
### 七、数据转换
12. **`$.parseJSON()`**
JSON 字符串转对象（兼容旧浏览器）：
```javascript
$.parseJSON('{"name": "John"}'); // {name: "John"}
```
### 八、Ajax 快捷方法
13. **`$.post()`**
POST 请求简化：
```javascript
$.post("regsiter.jsp", { id: "Robin" }, (data) => {
alert(data);
}, "json"); [^2]
```
---
### 使用场景示例
```javascript
// 合并对象并过滤数组
const merged = $.extend({}, { a: 1 }, { b: 2 });
const filtered = $.grep([10, 20, 30], (n) => n > 15);
// 检测并遍历
if ($.isPlainObject(merged)) {
$.each(merged, (key, val) => console.log(key, val));
}
```
这些工具函数覆盖了数据处理、类型检测、集合操作等场景，显著提升开发效率[^3][^2]。
本文探讨了JavaScript中两种常见的函数使用方式：立即执行的匿名函数和$(function(){...}
扫一扫
506
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
