如何将一个jQuery对象转换为js对象

将jQuery对象转换为原生JavaScript对象主要有两种方法，一是通过索引直接访问，即使用 $(selector)[0] 或 $(selector).get(0) 获取DOM元素，二是使用 toArray() 方法返回数组，再通过索引取值，转换后，对象将变为原生JS对象，可以直接使用原生API进行操作。

jQuery对象转原生JS对象：高效转换指南

在现代Web开发中，jQuery曾一度是处理DOM操作的利器，但随着原生JavaScript（Vanilla JS）和现代前端框架（如Vue、React）的普及，我们有时需要在两者之间进行数据交互，最常见的需求之一就是：如何将一个jQuery对象转换为原生JS对象。

jQuery对象本质上是一个“数组包装器”（类似数组的对象，即伪数组），它并不直接继承自原生JS的DOM节点，直接调用原生JS的方法（如 addEventListener）可能会失败,以下是几种高效且常用的转换方法。

使用索引访问 [0]

这是最常用、最简单的方法，jQuery对象支持数组索引访问，[0] 会返回第一个DOM元素,即一个原生JS对象。

语法：

const $element = $('.target');
const jsElement = $element[0];

示例：

// 假设有一个按钮
const $btn = $('#myButton');
// 使用原生JS添加事件
$btn[0].addEventListener('click', function() {
    console.log('原生JS点击事件触发');
});

使用 .get(index) 方法

.get() 方法专门用于从jQuery对象中获取原生DOM元素，如果不传参数，它默认获取第一个元素，这与 [0] 效果一致。

语法：

const jsElement = $element.get(0);
// 或者获取所有元素
const jsElements = $element.get(); // 返回原生DOM数组

示例：

const $inputs = $('.input-field');
const firstInput = $inputs.get(0);
if (firstInput) {
    firstInput.focus(); // 调用原生focus方法
}

使用 Array.from() (ES6)

如果你需要将jQuery对象转换为真正的数组（以便使用 map、filter 等原生数组方法），Array.from 是最佳选择,它会遍历jQuery对象并提取所有DOM元素。

语法：

const jsArray = Array.from($element);

使用展开运算符 [...] (ES6)

与 Array.from 类似,展开运算符也可以将jQuery对象展开为一个包含所有DOM元素的新数组。

语法：

const jsArray = [...$element];

示例：

const $items = $('.list-item');
// 将jQuery对象转为原生数组后，使用原生forEach
[...$items].forEach(function(item) {
    console.log(item.innerText);
});

总结与建议

• 如果你只需要操作单个元素（例如修改样式、添加事件），使用 [0] 或 .get(0) 是最高效的。
• 如果你需要对多个元素进行批量处理（例如筛选、映射），请使用 Array.from($element) 或 [...$element] 将其转换为真正的数组。