什麼是jQuery的$（「＃東西」）在javascript

Question

我得到不同的控制檯輸出爲$（「＃列表」）和的document.getElementById（「名單」）的類似的代碼

我的控制檯打印是下面給出。

console.log($('#list')); 

console.log(document.getElementById("list")); 

但是在控制檯中輸出顯示不同。

[select#list.form-control] 

<select id="list" class="form-control" size="10"><option>PHP</option><option>JavaScript</option></select> 

但我需要像jQuery一樣的javascript輸出。

Answer 1

這是可以預料的，jQuery使用jQuery方法返回包裝在jQuery對象中的DOM節點，而像getElementById這樣的本機方法只會返回DOM節點。

如果你想要的DOM節點，你可以做

console.log($('#list').get(0)); 

有沒有辦法，雖然返回而不jQuery的jQuery對象，做

$(document.getElementById("list")) 

是沒有意義的，但如果你已經有一個本地DOM節點，你可以把它包裝在jQuery中 - >$(element)

Answer 2

不同之處是因爲$('#list')返回一個jQuery object和document.getElementById("list")返回Element。

如果您需要從jQuery對象獲取元素，請按索引訪問它，或使用get()。所有的下面將給出一個Element對象的相同的輸出：

console.log($('#list').get(0)); 
console.log($('#list')[0]); 
console.log(document.getElementById("list")); 

如果你想返回一個jQuery對象使用任何這些：

console.log($('#list')); 
console.log($(document.getElementId('list')); 

不過請注意，在這種情況下，第二個例子是完全多餘的，只是爲了完整而包含在內。