Jquery returns a list using id selector

I'm having trouble with jquery and selectors using the following code:

<div id="test"></div>
console.log($('#test'));

This always returns a list like [<div id=​"test">​</di开发者_如何学运维v>​] instead of the single element.

This results on always having to write $('#test')[0] for every operations instead of only $('#test'). Any idea on why?

Regards

---

Jquery will not return the HtmlElement, it returns a jQuery object.

A jQuery object contains a collection of Document Object Model (DOM) elements that have been created from an HTML string or selected from a document. Since jQuery methods often use CSS selectors to match elements from a document, the set of elements in a jQuery object is often called a set of "matched elements" or "selected elements"

The jQuery object itself behaves much like an array; it has a length property and the elements in the object can be accessed by their numeric indices [0] to [length-1]. Note that a jQuery object is not actually a Javascript Array object, so it does not have all the methods of a true Array object such as join(). http://api.jquery.com/Types/#jQuery

This is an example of the Composite Design Pattern

The Composite Pattern describes a group of objects that can be treated in the same way a single instance of an object can. Implementing this pattern allows you to treat both individual objects and compositions in a uniform manner. In jQuery, when we're accessing or performing actions on a single DOM element or a group of DOM elements, we can treat both in a uniform manner. http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#designpatternsjquery

---

jQuery encapsulates any objects found for a number of reasons. For one, it ensures that no matter what, null will never be returned for example. Rather, the elements found are inserted into a list. The fact that even though you're searching for a single element, the mechanism always remains the same and therefore the results will be placed into an array of one element rather than the element itself.

---

In jQuery it is better to think of selectors as matching multiple items, and your solution would be best if you use the each syntax to iterate through the matches items...

$('#test').each(function() { 
  console.log($(this));
});

---

As ID is not unique, jQuery looks for every element with such ID. So it's always returns a list, because threre is no guarantee that the element is exactly one