jquery对象与DOM对象转化

在前端开发中，jQuery 是一个非常流行的 JavaScript 库，它提供了许多方便的操作 DOM 的方法。然而，有时我们需要与原生 DOM 对象交互，因此需要掌握如何将 jQuery 对象和 DOM 对象相互转换。

什么是 jQuery 对象？

jQuery 对象是由 jQuery 函数返回的对象，它包装了一个或多个 DOM 元素，并提供了一组方便的方法来操纵这些元素。通常情况下，我们使用 $ 符号来表示 jQuery 对象。例如：

var $div = $('div');

上面的代码创建了一个包含所有 div 元素的 jQuery 对象。我们可以使用 jQuery 对象的方法来操纵这些元素，例如：

$div.hide(); // 隐藏所有 div 元素
$div.addClass('my-class'); // 给所有 div 元素添加 my-class 类

什么是 DOM 对象？

DOM（Document Object Model）对象代表着文档中的元素、属性和文本内容。在 JavaScript 中，每个 HTML 元素都是一个 DOM 对象。我们可以使用原生的 JavaScript 来操纵 DOM 对象，例如：

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  divs[i].style.display = 'none'; // 隐藏所有 div 元素
  divs[i].classList.add('my-class'); // 给所有 div 元素添加 my-class 类
}

如何将 jQuery 对象转换为 DOM 对象？

我们可以使用 jQuery 对象的 get 方法将其转换为一个原生的 DOM 对象。例如：

var $div = $('div');
var divs = $div.get(); // 获取所有 div 元素的数组
for (var i = 0; i < divs.length; i++) {
  divs[i].style.display = 'none'; // 隐藏所有 div 元素
  divs[i].classList.add('my-class'); // 给所有 div 元素添加 my-class 类
}

注意，get 方法返回的是一个包含所有元素的数组，而不是一个 jQuery 对象。因此，在对这些元素进行操作时，我们需要使用原生的 JavaScript 方法。

如何将 DOM 对象转换为 jQuery 对象？

我们可以使用全局的 $ 或 jQuery 函数将其包装成一个 jQuery 对象。例如：

var divs = document.getElementsByTagName('div');
var $divs = $(divs); // 将所有 div 元素包装成一个 jQuery 对象
$divs.hide(); // 隐藏所有 div 元素
$divs.addClass('my-class'); // 给所有 div 元素添加 my-class 类

注意，如果我们只想包装单个元素，可以直接传递该元素作为参数：

var div = document.getElementById('my-div');
var $div = $(div); // 将 my-div 元素包装成一个 jQuery 对象
$div.hide(); // 隐藏 my-div 元素
$div.addClass('my-class'); // 给 my-div 元素添加 my-class 类

总结

在前端开发中，我们经常需要与 DOM 对象打交道。学会如何将 jQuery 对象和 DOM 对象相互转换，可以帮助我们更方便地操纵文档中的元素。记住：

• 使用 get 方法将 jQuery 对象转换为 DOM 对象。
• 使用全局的 $ 或 jQuery 函数将 DOM 对象转换为 jQuery 对象。

以上是本文的全部内容，希望对读者有所帮助！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2305