为什么我的jQuery选择器返回n.fn.init[0]，它是什么？

如果你曾经使用过jQuery来选取元素，你可能会遇到这样的情况，在控制台输出一个选择器，而结果会显示 n.fn.init [0]。虽然这看起来很奇怪，但实际上它并不是错误信息，而是jQuery对象的一个正常行为。

jQuery对象

在jQuery中，当你使用选择器来选取一个或多个元素时，它将返回一个jQuery对象。这个对象其实是一个HTML元素数组的包装器，使得你可以使用jQuery提供的方法来操作这些元素。jQuery对象具有一系列的属性和方法，例如 .css()，.text()，.html() 等等，这些方法让你可以直接对选中的元素进行操作。

下面是一个使用jQuery选择器并打印结果的示例代码：

var myElement = $(".my-class");
console.log(myElement);

如果页面上有一个类名为 “my-class” 的元素，那么以上代码将会输出以下内容：

n.fn.init [1]
  0: <div class="my-class">...</div>
  length: 1
  __proto__: n.fn.init[0]

n.fn.init[0]

我们看到，输出结果是 n.fn.init [1]，其中的 [1] 表示选中了一个元素。如果有多个符合条件的元素，它们都会被包装成一个数组。

在这个结果中，我们注意到了 n.fn.init[0]。这是一个指向 jQuery 的原型对象的引用，它提供了一系列的方法和属性。因此，当你使用jQuery选择器来选取元素时，它会返回一个包含所选元素的数组，并将该数组的原型设置为 n.fn.init[0]。这也就是为什么你看到的结果是 n.fn.init [1]。

如何访问选中元素

现在我们知道了 n.fn.init[0] 是什么，但我们还需要知道如何访问选中元素。可以通过以下两种方式之一完成：

1. 通过数组索引访问

由于jQuery对象包含一个数组，你可以通过下标来访问其中的元素。例如，如果你只想获取第一个元素，你可以使用 myElement[0] 这样的语法：

var myElement = $(".my-class");
console.log(myElement[0]);

上面的代码将输出选中的元素本身，而不是 n.fn.init[0]。如果你想对多个元素执行相同的操作，你可以使用一个循环来遍历每一个元素。

2. 使用jQuery方法访问

另外一种访问选中元素的方式是使用jQuery提供的方法，这些方法通常会作用于所有选中元素。例如，如果你想隐藏所有类名为 “my-class” 的元素，你可以使用以下代码：

var myElement = $(".my-class");
myElement.hide();

上面的代码将隐藏所有选中的元素，而不仅仅是第一个元素。

结论

n.fn.init [0] 是一个指向 jQuery 的原型对象的引用，它提供了一系列的方法和属性。当你使用jQuery选择器来选取元素时，它会返回一个包含所选元素的数组，并将该数组的原型设置为 n.fn.init[0]。要访问选中的元素，你可以使用数组索引或者使用jQuery提供的方法。希望这篇文章能够帮助你更好地理解 jQuery 对象的工作原理。

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