jquery对象如何使用索引来访问像数组一样的DOM？

Question

我知道jQuery函数$("selector")会返回一个对象。

var divTest = $(".test"); // returns object
Array.isArray(divTest); // false
typeof divTest; // "object"

使用jQuery函数包装的此对象，我们可以使用jQuery的API。

我无法理解的一点是我们如何使用jQuery对象中的索引来访问本机DOM元素，就像我们在数组中一样。

<div class="test first"></div>
<div class="test second"></div>
<div class="test third"></div>

//...
var divTest = $(".test");
console.log(divTest[0]); // <div class="test first"></div>
console.log(divTest[1]); // <div class="test second"></div>
console.log(divTest[2]); // <div class="test third"></div>

我打开了未压缩的jQuery源文件。我认为这个问题与以下方法有关。

方法jQuery.fn.init返回jQuery.makeArray(selector, this)。 makeArray已从jQuery延长。

有人可以发表评论以帮助我理解这个问题吗？

Answer 1

没有问题。对象$(".test")返回的是类似于数组的（行为类似于数组），因此您可以使用与使用本机函数{{1}时相同的方式访问它包含的元素}}

没有什么特别之处。 document.querySelectorAll(".test")所做的是使用本机函数来获取元素，然后将每个元素注入到类似数组的对象中。查看下面的示例，了解如何制作简单的jQuery函数。

示例：

＆＃13;

＆＃13;

jQuery-like

＆＃13;

/* ----- JavaScript ----- */

function $ (selector) {
  /* Check whether the context is a $ instance. */
  if (this instanceof $) {
    /* Get the elements matching the given selector. */
    var elements = document.querySelectorAll(selector);

    /* Set the length property of the object. */
    this.length = 0;

    /* Iterate over every element gotten. */
    for (var i = 0, l = elements.length; i< l; i++) {
      /* Inject each element in the object. */
      this[i] = elements[i];

      /* Increment the length. */
      this.length++;
    }

    /* Cache the selector as a public property of the object. */
    this.selector = selector;
  }
  else return new $(selector);
}


/* --- Use --- */

var elements = $(".test");
console.log(typeof elements);
console.log(elements[0]);
console.log(elements[1]);
console.log(elements[2]);

＆＃13;

＆＃13;

＆＃13;

备注：

1. 通过阅读<!----- HTML -----> <div id = "e1" class = "test"></div> <div id = "e2" class = "test"></div> <div id = "e3" class = "test"></div>源代码尝试学习JavaScript是一个坏主意。
2. 为了使对象类似，它必须具有：
   • 数字属性（索引），
   • 数字jQuery属性和
   • length方法（可选，在控制台中记录为数组）。