Question

说我有以下标记：

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

我使用以下内容来检索它们：

var divs = $('div');

我如何能够使用[]语法检索相应的DOM元素，也可以调用jQuery对象上的方法，例如{{1} }？

.first()

我问这个问题是因为我认为var div_one = divs[0];是jQuery 对象，而不是真正的JavaScript divs对象。

这是如何运作的？

Answer 1

数字索引只是返回对象的属性。它与此类似：

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

数组和伪数组对象几乎完全相同 - 唯一的区别是真实数组的length属性由JavaScript引擎自动管理。

Answer 2

您可以使用任何对象执行此操作。它与“阵列式”对象没有任何关系。

var myObj = {};

myObj[0] = 'some value';

alert( myObj[0] );

以下是创建类似Array的对象的示例：

示例： http://jsfiddle.net/8rgRM/

  // 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 );

长度属性的行为与实际数组中的行为一样可能很诱人，但事实并非如此。

例如，使用数组，您可以length = 0清除数组的内容，但它不能在上面的对象中工作。

在jQuery的源代码中，here is where Array.prototype.push被引用，here is where it is extended被引用到jQuery原型中。

Answer 3

这会让事情变得清晰起来。试一试，然后玩吧。

//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

这是你如何创建一个伪数组，一个巨大的评论是javascript中的数组不能被分类，即无法创建具有相同数组功能的子数组，主要原因是该行为的数组中的length属性，对JS程序员来说是隐藏的，但是有很多黑客和解决方法可以做到这一点，要了解更多信息，请阅读kangax这篇精彩的文章。 http://perfectionkills.com/how-ecmascript-5-still-does-not-allow-to-subclass-an-array/

Answer 4

在JavaScript中，您可以使用与array-index表示法相同的语法访问对象的属性：

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 elements或选择器匹配的其他原始javascript对象的映射，列出从0到n。

Answer 5

选择器的结果（开始帖子中的$("div")）返回结果with the type Jquery

引用jquery页面：

jQuery对象本身表现很多像一个数组;它有一个长度财产和财产中的要素对象可以通过他们的访问数字索引[0]到[length-1]。请注意，jQuery对象不是实际上是一个Javascript Array对象，所以它没有a的所有方法 true数组对象，例如join（）。

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

5 个答案: