Question

我创建了一个滑块和一个标签来显示其值：

<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属性，但是无法弄清楚如何访问它。

因此，看起来上述两种方法返回滑块对象的方式有所不同。每种返回什么，以及每种查找对象的方式的优缺点是什么？

Answer 1

jQuery对象：包装的集合：选择器返回一个称为“包装的集合”的jQuery对象，它是一个包含所有选定DOM元素的类似数组的结构。您可以像数组一样遍历包装的集合，也可以通过索引器访问单个元素（例如$（sel）[0]）。更重要的是，您还可以将jQuery函数应用于所有选定的元素。

// 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)

Answer 2

jQuery返回一个jQuery对象。您需要访问正确的索引以获取类似这样的值：

$("#SelectDate")[0].value

或使用.val()方法

$("#SelectDate").val()

jQuery vs. getElementId-返回值的差异

2 个答案: