javascript - JQuery 与 getElementbyId - 返回内容的差异

Question

这个问题已经有答案了:

What does jquery $ actually return? (9 个回答)

What's the difference between a jQuery object and a DOM element? Difference between .get() and .index()? (7 个回答)

jQuery object and DOM element (6 个回答)

已关闭 4 年前。

我创建了一个 slider 和一个标签来显示其值:

<div style="display:table-cell; outline:5px dotted green; width:100%;"><input type="range" min="1" max="100" value="50" class="slider" id="SelectDate"></div>
<div id="visDate" style="display:table-cell; outline:5px dotted green; vertical-align:middle;"></div>

当我编写脚本来自动使用值更新标签时，这是有效的:

var slider = document.getElementById("SelectDate");

(意味着我可以使用 .value 来获取值)，但这不会:

var slider = $("#SelectDate");

当我输出slider时到控制台，我看到了该对象，并且可以看到其中的 value 属性，但无法弄清楚如何访问它。

因此，上面的两种方法返回 slider 对象的方式似乎有所不同。每种方法返回什么，每种查找对象的方法有哪些优缺点？

Answer 1

The jQuery Object: The Wrapped Set: Selectors return a jQuery object known as the "wrapped set," which is an array-like structure that contains all the selected DOM elements. You can iterate over the wrapped set like an array or access individual elements via the indexer ($(sel)[0] for example). More importantly, you can also apply jQuery functions against all the selected elements.

// Vanilla JS
var slider = document.getElementById('SelectDate');
var val = slider.value;

// jQuery
var $slider = $('#SelectDate');
var $val = $slider.val();
var val = $slider[0].value; // Vanilla JS (using jQuery object)