在 jQuery 对象和纯 js 对象之间进行转换

Converting between a jQuery object and a pure js object?

本文关键字：对象 之间 转换 jQuery js      更新时间：2023-09-26

$('#elementID')返回的对象和document.getElementById('elementID')返回的对象有什么区别？

此外，您如何轻松地从一个转换为另一个？例如：

$('a').each(function(){
    // How can I access 'this' as a pure javascript object instead of as a jQuery object?
});

这已经困扰了我一段时间了。我知道你不应该把两者混为一谈，真的，但我只是想了解这个原理。

$('#elementID')返回的对象和document.getElementById('elementID')返回的对象有什么区别？

$('#elementID')返回一个对象，其中包含大量函数，这些函数都对document.getElementById('elementID')的结果进行操作。把jQuery对象想象成document.getElementById('elementID')坐在里面的一个巨大的机器人。

您可以使用以下命令访问包装的 DOM 对象：

  • $('#elementID').get()
  • $('#elementID').get(0)
  • $('#elementID')[0]

例如，如果有多个元素与选择器匹配，则可以访问带有 $elements.get(1) 或 $elements[1] 的第二个元素。

此外，您如何轻松地从一个转换为另一个？

要使用jQuery的便利函数包装对象，只需将其传递到$函数中：

$(document.getElementById('foo'))
$(document.querySelectorAll('.foo:not(.bar)'))

要采用另一种方式，请使用.get()或括号表示法。

在您的特定示例中，您不需要执行任何特殊操作，因为this实际上是一个普通的 DOM 对象。这就是为什么您经常看到回调充斥着$(this)。

jquery 对象只是一个具有特殊函数的数组

// non-jquery -> jquery
var a = document.getElementById('some-link'); // one element
var $a = $(a);
// jquery -> non-jquery
a = $a[0]; // a jquery element holds all of its matches in the indices 0..(a.length) just like a  JS array

Jquery 对象既包含描述对象的属性，也包含与该对象交互的方法（函数）

我使用以下代码来创建一个简单的 javascript 元素数组，但在某些情况下，我发现我需要使用与 jQuery 对象相同的元素。 然后我找到了以下解决方案来做到这一点。

var cboxes = document.getElementsByName('deletecheck');
var len = cboxes.length;
for (var i=0; i<len; i++) {
    if (cboxes[i].checked){
            jQuery(cboxes[i]).parent().parent().remove();
    }
}
相关文章：