什么是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')); 

不过请注意，在这种情况下，第二个例子是完全多余的，只是为了完整而包含在内。