jQuery對象和DOM元素

Question

我想了解jQuery對象和DOM元素之間的關係..

當jQuery的返回它顯示爲一個警報[object Object]的元素。 當getElementByID返回一個元素時，它顯示爲[object HTMLDivElement]。這是什麼意思？我的意思是他們都有不同的對象？

還有哪些方法可以對jQuery對象與DOM元素進行操作？單個jQuery對象可以表示多個DOM元素嗎？

Answer 1

我想了解jQuery對象和DOM元素

甲jQuery對象是包含DOM元素（多個）類似陣列的對象之間的關係。一個jQuery對象可以包含多個DOM元素，具體取決於您使用的選擇器。

還有什麼方法可以對jQuery對象與DOM元素進行操作？單個jQuery對象可以表示多個DOM元素嗎？

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 

換句話說，下面應該讓你同樣的結果：

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

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

對於更多關於jQuery對象的信息，see the documentation。還檢查了文檔.get()

Answer 2

這就是你的瀏覽器很聰明。他們都是對象，但DOMElements是特殊對象。 jQuery只是將DOMElements包裝在一個Javascript對象中。

如果你想獲得更多的調試信息，我建議你看一下像Firebug for Firefox和Chrome的內置檢查器（非常類似於Firebug）的調試工具。

Answer 3

大多數jQuery的成員Functions沒有返回值，而是返回當前jQuery Object或其他jQuery Object。

---

所以，

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

將返回[object Object]，即jQuery Object其保持收集這是評估對Document選擇String（"#id"）的結果，

同時，

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

將返回[object HTMLDivElement]（或實際上在IE中[object Object]），因爲/如果返回值是divElement。

---

還什麼方法可以VS DOM元素的jQuery對象進行操作？ （1）單個jQuery對象是否可以表示多個DOM元素？ （2）

（1）jQuery中有許多成員Function s屬於DOM Object s。一旦你有特定的任務（例如選擇Node或操作它們），最好的做法是搜索相關的Function的jQuery API文檔。

• jQuery documentation

（2）是，單個jQuery Object可以維護多個DOM Element s的列表。有多個Functions（例如jQuery.find或jQuery.each）構建於此自動緩存行爲上。

Answer 4

當您使用jQuery獲取DOM元素時，jQuery對象返回包含對元素的引用。當你使用像getElementById這樣的本地函數時，你可以直接獲得對元素的引用，不包含在jQuery對象中。

甲jQuery對象是類似陣列的對象，該對象可以包含多個DOM元素：

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

可以在沒有jQuery的被進行上述行：

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

實際上，這正是jQuery的當你通過一個簡單的選擇器如div時，會在內部完成。您可以使用get方法的jQuery的訪問集合中的實際元素：

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

當你有一個元素，或一組元素，jQuery對象裏面，你可以在jQuery的API中使用任何可用的方法，而當你有了原始元素時，你只能使用本地JavaScript方法。

Answer 5

我上個月纔剛剛開始使用jQuery，並且在腦海中出現了類似的問題。到目前爲止您收到的所有答案都是有效的，並且在點上，但一個非常準確的答案可能是這樣的：

假設您在函數中，並且指向調用元素，您可以使用this，或$(this);但有什麼區別？事實證明，當你使用$(this)時，你正在將this包裝在一個jQuery對象中。好處是一旦一個對象是一個jQuery對象，就可以使用它上面的所有jQuery函數。

這是非常強大的，因爲你甚至可以在jQuery對象中包裝元素的字符串表示，即var s = '<div>hello <a href='#'>world</a></div><span>!</span>'，只需將它簡單地包裝在$（）中：$(s)。現在你可以用jQuery來操縱所有這些元素。