Javascript jQuery如何允许您在jQuery对象上使用[]？

假设我有以下标记：

<div></div>
<div></div>
<div></div>

我如何能够通过使用

[]

语法检索相应的DOM元素，并且能够调用jQuery对象上的方法，例如

.first（）

我问这个问题是因为在我看来，

divs

是一个jQuery对象，而不是一个真正的JavaScript

Array

对象

---

这是如何工作的？

数字索引只是返回对象的属性。这类似于这样做：

var obj = {};
obj[0] = 'foo';
alert(obj[0]);

---

数组和伪数组对象几乎相同-唯一的区别是真正数组的

length

属性由JavaScript引擎自动管理。

在JavaScript中，您可以使用与数组索引表示法相同的语法访问对象的属性：

var o = {'foo':'bar'},
  fooVar = 'bar';

//these all alert 'bar'
alert(o.foo);
alert(o['foo']);
alert(o[fooVar]);

但是，您只能对有效名称使用点表示法

o[0]

工作，但

o.0

不工作

---

jQuery返回一个

jQuery.init

对象，该对象包含许多属性（即

length

），以及

dom元素的映射或选择器匹配的其他原始javascript对象，从
0
到
n
列出。您可以对任何对象执行此操作。它实际上与它是一个“类似数组”的对象没有任何关系


下面是创建类似数组的对象的示例：

示例：

length属性的行为可能与实际数组中的行为一样，但事实并非如此

例如，对于一个数组，可以执行
length=0
来清除数组的内容，但它在上面这样的对象中不起作用

在jQuery的源代码中，被引用，并被放入jQuery原型中。
这将稍微澄清一些问题。试试看，玩玩它

//used to produce pure classical inheritance
function clone(obj){
    function F(){};
    F.prototype=obj;
    return new F();
}
// Constructor function, used to instantiate a new object of myDivQuery Class
myDivQuery = function (){
    var div_list = document.getElementsByTagName('div');
    for (var i=0; i < div_list.length; i++){
        this[i] = div_list[i];
    }
    this.length = div_list.length;
};
//myDivQuery inherits from Array class
myDivQuery.prototype = clone( new Array );
//add new methods to myDivQuery class, which is not added to the orginal Array class
myDivQuery.prototype.first = function (){
    return this[0];
}

myDivQuery.prototype.last = function (){
    return this[this.length - 1]
}
divs = new myDivQuery();
divs[0]; // first div on the page;
divs[1]; // the second div on the page ....
divs instanceof Array; //true
divs instanceof myDivQuery; //true
divs.first() === divs[0]; //true
divs.last(); //last div on page
Array.prototype.first; //undefined
divs.slice(1); //but still can use array methods
divs.reverse(); //another array method

//用于生成纯经典继承
功能克隆（obj）{
函数F（）{}；
F.原型=obj；
返回新的F（）；
}
//构造函数，用于实例化myDivQuery类的新对象
myDivQuery=函数（）{
var div_list=document.getElementsByTagName（'div'）；
对于（变量i=0；i

这就是创建伪数组的方式，一个重要的注意事项是javascript中的数组不能被子类化，也就是说，不能创建具有相同数组特性的子数组，主要原因是数组中的length属性的行为，这对JS程序员来说是隐藏的，但是在这方面有很多技巧和解决方法，要了解更多信息，请阅读kangax的这篇精彩文章
 选择器的结果（
$（“div”）
在start post中）返回一个结果

要引用jquery页面中的内容，请执行以下操作：

jQuery对象本身的行为非常复杂
像一个阵列；它有一个长度
属性和
对象可以通过其
数值索引[0]到[length-1]。
请注意，jQuery对象不是
实际上是一个Javascript数组对象，所以
它并没有一个系统的所有方法
true数组对象，如join（）

@内森：没有。它返回一个对象，其中包含一些数组方法原型。这不是一个数组。@Nathan如果我可以调用
.eq（）
和
.first（）
等方法，它怎么可能是
数组呢？@patrickdw:我不知道这一点。我现在要再看一看资料来源。谢谢你纠正我。@patrickdw我在jQueryIRC频道与团队交谈，他们马上为我澄清了这一点。调用jQuery（）返回一个jQuery对象，该对象动态应用了索引器属性。调用属性时，它们返回对jQuery（）.get（）的调用，该调用返回jQuery对象中包含的DOM元素数组。正如您所说，jQuery对象上的所有数组方法都只是在其上进行原型化，并在DOM元素的内部数组上进行操作。@Nathan：我听到了您的说法，但我个人不喜欢诸如“数组…包含在jQuery对象中”和“内部数组”之类的术语。这意味着jQuery对象具有对实际数组的内部引用。调用
get（）
时，它通过
Array.prototype.slice
构造一个新的（实际的）数组。您可以对常规对象执行此操作，只要属性是数字，并且它也具有
length
属性。抱歉，我写在这里，我不知道向其他用户发送消息的其他方式。你为什么删除了我昨天问题的答案？它正在我需要的轨道上do@TheDisintegrator如你所愿取消删除。
var o = {'foo':'bar'},
  fooVar = 'bar';

//these all alert 'bar'
alert(o.foo);
alert(o['foo']);
alert(o[fooVar]);

var myObj = {};

myObj[0] = 'some value';

alert( myObj[0] );

  // create constructor
function MyObj(){}

  // extend it with an Array method
MyObj.prototype.push = Array.prototype.push;

  // create an instance
var inst = new MyObj;

  // use the push method
inst.push( 'some value' );

  // the instance automatically has a length property that was updated
alert( inst.length );

//used to produce pure classical inheritance
function clone(obj){
    function F(){};
    F.prototype=obj;
    return new F();
}
// Constructor function, used to instantiate a new object of myDivQuery Class
myDivQuery = function (){
    var div_list = document.getElementsByTagName('div');
    for (var i=0; i < div_list.length; i++){
        this[i] = div_list[i];
    }
    this.length = div_list.length;
};
//myDivQuery inherits from Array class
myDivQuery.prototype = clone( new Array );
//add new methods to myDivQuery class, which is not added to the orginal Array class
myDivQuery.prototype.first = function (){
    return this[0];
}

myDivQuery.prototype.last = function (){
    return this[this.length - 1]
}
divs = new myDivQuery();
divs[0]; // first div on the page;
divs[1]; // the second div on the page ....
divs instanceof Array; //true
divs instanceof myDivQuery; //true
divs.first() === divs[0]; //true
divs.last(); //last div on page
Array.prototype.first; //undefined
divs.slice(1); //but still can use array methods
divs.reverse(); //another array method