在jQuery對象和純js對象之間轉換？

Question

$('#elementID')返回的對象與document.getElementById('elementID')返回的對象有什么document.getElementById('elementID') ？

而且，你怎么能輕易地從一個轉換到另一個？ 例如：

$('a').each(function(){
    // How can I access 'this' as a pure javascript object instead of as a jQuery object?
});

這已經困擾了我一段時間了。 我知道你不應該把兩者混為一談，但我只是想了解原理。

Answer 1

$('#elementID')返回的對象與document.getElementById('elementID')返回的對象有什么document.getElementById('elementID') ？

$('#elementID')返回一個具有大量函數的對象，這些函數都對document.getElementById('elementID')的結果進行操作。 把jQuery對象想象成document.getElementById('elementID')所在的巨型機器人。

您可以使用以下命令訪問包裝的DOM對象：

• $('#elementID').get()
• $('#elementID').get(0)
• $('#elementID')[0]

如果選擇器匹配多個元素，則可以使用$elements.get(1)或$elements[1]訪問第二個元素。

而且，你怎么能輕易地從一個轉換到另一個？

要使用jQuery的便捷函數包裝對象，只需將其傳遞給$函數：

$(document.getElementById('foo'))
$(document.querySelectorAll('.foo:not(.bar)'))

.get() ，使用.get()或括號表示法。

在您的特定示例中，您不需要執行任何特殊操作，因為this實際上是一個普通的DOM對象。 這就是為什么你經常看到滿滿$(this)回調。

Answer 2

jquery對象只是一個具有特殊功能的數組

// non-jquery -> jquery
var a = document.getElementById('some-link'); // one element
var $a = $(a);

// jquery -> non-jquery
a = $a[0]; // a jquery element holds all of its matches in the indices 0..(a.length) just like a  JS array

Answer 3

Jquery對象包含描述對象的屬性和與該對象交互的方法（函數）

Answer 4

我使用以下代碼創建一個簡單的javascript元素數組，但有些情況我發現我需要使用與jQuery對象相同的元素。 然后我發現以下解決方案來做到這一點。

var cboxes = document.getElementsByName('deletecheck');
var len = cboxes.length;
for (var i=0; i<len; i++) {
    if (cboxes[i].checked){
            jQuery(cboxes[i]).parent().parent().remove();
    }
}