Javascript jQuery 对象和 DOM 元素

jQuery object and DOM element

提问by testndtv

I would like to understand relationship between jQuery object and DOM element..

我想了解 jQuery 对象和 DOM 元素之间的关系..

When jQuery returns an element it shows up as [object Object]in an alert. When getElementByIDreturns an element it shows up as [object HTMLDivElement]. What does that mean exactly? I mean are both of them objects with a difference ?

当 jQuery 返回一个元素时，它会显示为[object Object]警报。当getElementByID返回一个元素时，它显示为[object HTMLDivElement]. 这究竟是什么意思？我的意思是他们两个对象都有区别吗？

Also what methods can operate on jQuery object vs DOM element? Can a single jQuery object represent multiple DOM elements ?

还有哪些方法可以对 jQuery 对象和 DOM 元素进行操作？一个 jQuery 对象可以代表多个 DOM 元素吗？

回答by Andrew Whitaker

I would like to understand relationship between jQuery object and DOM element

我想了解 jQuery 对象和 DOM 元素之间的关系

A jQuery object is an array-like object that contains DOM element(s). A jQuery object can contain multiple DOM elements depending on the selector you use.

jQuery 对象是一个类似数组的对象，其中包含 DOM 元素。一个 jQuery 对象可以包含多个 DOM 元素，具体取决于您使用的选择器。

Also what methods can operate on jQuery object vs DOM element? Can a single jQuery object represent multiple DOM elements ?

还有哪些方法可以对 jQuery 对象和 DOM 元素进行操作？一个 jQuery 对象可以代表多个 DOM 元素吗？

jQuery functions (a full list is on the website) operate on jQuery objects and not on DOM elements. You can access the DOM elements inside a jQuery function using .get()or accessing the element at the desired index directly:

jQuery 函数（完整列表在网站上）操作 jQuery 对象而不是 DOM 元素。您可以使用.get()或直接访问所需索引处的元素来访问jQuery 函数内的 DOM 元素：

$("selector")[0] // Accesses the first DOM element in this jQuery object
$("selector").get(0) // Equivalent to the code above
$("selector").get() // Retrieve a true array of DOM elements matched by this selector

In other words, the following should get you the same result:

换句话说，以下应该得到相同的结果：

<div id="foo"></div>

alert($("#foo")[0]);
alert($("#foo").get(0));
alert(document.getElementById("foo"));

For more information on the jQuery object, see the documentation. Also check out the documentation for .get()

有关 jQuery 对象的更多信息，请参阅文档。另请查看文档.get()

回答by James Allardice

When you use jQuery to obtain an DOM element, the jQuery object returns contains a reference to the element. When you use a native function like getElementById, you get the reference to the element directly, not contained within a jQuery object.

当您使用 jQuery 获取 DOM 元素时，jQuery 对象返回包含对该元素的引用。当您使用像 一样的本机函数时getElementById，您将直接获得对元素的引用，而不是包含在 jQuery 对象中。

A jQuery object is an array-like object that can contain multiple DOM elements:

jQuery 对象是一个类似数组的对象，可以包含多个 DOM 元素：

var jQueryCollection = $("div"); //Contains all div elements in DOM

The above line could be performed without jQuery:

上面的行可以在没有 jQuery 的情况下执行：

var normalCollection = document.getElementsByTagName("div");

In fact, that's exactly what jQuery will do internally when you pass in a simple selector like div. You can access the actual elements within a jQuery collection using the getmethod:

事实上，这正是 jQuery 在您传入一个简单的选择器（如div. 您可以使用以下get方法访问 jQuery 集合中的实际元素：

var div1 = jQueryCollection.get(0); //Gets the first element in the collection

When you have an element, or set of elements, inside a jQuery object, you can use any of the methods available in the jQuery API, whereas when you have the raw element you can only use native JavaScript methods.

当您在 jQuery 对象中有一个元素或一组元素时，您可以使用 jQuery API 中可用的任何方法，而当您拥有原始元素时，您只能使用本机 JavaScript 方法。

回答by rkw

I just barely started playing with jQuery this last month, and I had a similar question running around in my mind. All the answers you have received so far are valid and on the dot, but a very precise answer may be this:

上个月我才刚刚开始玩 jQuery，我脑子里也有类似的问题。到目前为止，您收到的所有答案都是有效且准确的，但非常准确的答案可能是这样的：

Let's say you are in a function, and to refer to the calling element, you can either use this, or $(this); but what is the difference? Turns out, when you use $(this), you are wrapping thisinside a jQuery object. The benefit is that once an object is a jQuery object, you can use all the jQuery functions on it.

假设您在一个函数中，要引用调用元素，您可以使用this, 或$(this); 但有什么区别？事实证明，当您使用 时$(this)，您将包装this在一个 jQuery 对象中。好处是一旦一个对象成为一个 jQuery 对象，你就可以在它上面使用所有的 jQuery 函数。

It's pretty powerful, since you can even wrap a string representation of elements, var s = '<div>hello <a href='#'>world</a></div><span>!</span>', inside a jQuery object just by literally wrapping it in $(): $(s). Now you can manipulate all those elements with jQuery.

它非常强大，因为您甚至可以将元素的字符串表示，var s = '<div>hello <a href='#'>world</a></div><span>!</span>', 包装在 jQuery 对象中，只需将其直接包装在 $(): 中即可$(s)。现在您可以使用 jQuery 操作所有这些元素。

回答by FK82

Most jQuery member Functionsdo not have a return value but rather return the current jQuery Objector another jQuery Object.

大多数 jQuery 成员Functions没有返回值，而是返回当前jQuery Object或另一个jQuery Object.

---

---

So,

所以，

console.log("(!!) jquery >> " + $("#id") ) ; 

will return [object Object], i.e. a jQuery Objectwhich maintains the collection which is the result of evaluating the selector String("#id") against the Document,

将返回[object Object]，即 ajQuery Object维护集合，该集合是针对 评估选择器String( "#id") 的结果Document，

while ,

尽管 ，

console.log("(!!) getElementById >> " + document.getElementById("id") ) ;

will return [object HTMLDivElement](or in fact [object Object]in IE) because/if the return value is a divElement.

将返回[object HTMLDivElement]（或实际上[object Object]在 IE 中），因为/如果返回值是divElement.

---

---

Also what methods can operate on jQuery object vs DOM element? (1) Can a single jQuery object represent multiple DOM elements ? (2)

还有哪些方法可以对 jQuery 对象和 DOM 元素进行操作？(1) 单个 jQuery 对象能否代表多个 DOM 元素？(2)

(1) There is a host of member Functions in jQuery that pertain to DOM Objects. The best thing to do imo is search the jQuery API documentation for a relevant Functiononce you have a specific task (such as selecting Nodes or manipulating them).

(1) FunctionjQuery 中有许多与 DOM 相关的成员Object。imo 最好的做法是在Function您完成特定任务（例如选择Nodes 或操作它们）后，搜索相关的 jQuery API 文档。

• jQuery documentation

• jQuery 文档

(2) Yes, a single jQuery Objectmay maintain a list of multiple DOM Elements. There are multiple Functions(such as jQuery.findor jQuery.each) that build upon this automatic caching behaviour.

(2) 是的，单个jQuery Object可以维护多个 DOMElement的列表。有多个Functions（例如jQuery.find或jQuery.each）建立在这种自动缓存行为上。

回答by Halcyon

That's just your browser being clever. They're both objects but DOMElements are specialobjects. jQuery just wraps DOMElements in a Javascript object.

那只是你的浏览器很聪明。它们都是对象，但 DOMElements 是特殊对象。jQuery 只是将 DOMElements 包装在一个 Javascript 对象中。

If you want to get more debug info I recommend you look at debugging tools like Firebug for Firefox and Chrome's built-in inspector (very similar to Firebug).

如果您想获得更多调试信息，我建议您查看调试工具，例如 Firebug for Firefox 和 Chrome 的内置检查器（与 Firebug 非常相似）。

回答by Eugene

Besides what has been mentioned, I'd like to add something about why jQuery object is imported according to description from jquery-object

除了已经提到的内容，我想添加一些关于为什么根据jquery-object 的描述导入jQuery 对象的内容

• Compatibility

• 兼容性

The implementation of element methods varies across browser vendors and versions.

元素方法的实现因浏览器供应商和版本而异。

As an example, set innerHTMLof element may not work in most versions of Internet Explorer.

例如，innerHTML元素集在大多数版本的 Internet Explorer 中可能不起作用。

You can set innerHTML in jQuery way and jQuery will help you hide the differences of browser.

您可以通过 jQuery 方式设置 innerHTML，jQuery 将帮助您隐藏浏览器的差异。

// Setting the inner HTML with jQuery.

var target = document.getElementById( "target" );

$( target ).html( "<td>Hello <b>World</b>!</td>" );

• Convenience

• 方便

jQuery provides a list of methods bound to jQuery object to smooth developer's experience, please check some of them under http://api.jquery.com/. The website also provides a common DOM manipulation, let's see how to insert an element stored in newElementafter the targetelement in both way.

jQuery 提供了绑定到 jQuery 对象的方法列表，以简化开发人员的体验，请在http://api.jquery.com/下查看其中一些方法。网站还提供了常用的DOM操作，下面我们来看看如何在元素newElement后插入一个target元素，两种方式。

The DOM way,

DOM方式，

// Inserting a new element after another with the native DOM API.

var target = document.getElementById( "target" );

var newElement = document.createElement( "div" );

target.parentNode.insertBefore( newElement, target.nextSibling );

The jQuery way,

jQuery的方式，

// Inserting a new element after another with jQuery.

var target = document.getElementById( "target" );

var newElement = document.createElement( "div" );

$( target ).after( newElement );

Hope this is a supplement.

希望这是一个补充。