我有一个关于jQuery ID选择器的问题

Question

$(“#id”).val() : No find
$(“input[id=‘id’]”).val() : OK

你知道以上两种情况的区别吗？你为什么要这样做？

Answer 1

要回答这个问题，我们需要了解 Jquery 选择器是如何工作的。

$("#id") 内部使用document.getElementById();

$("input[id='id']") 内部使用document.getElementsByTagName()来获取所有匹配的"元素标签"和带有 id 的过滤器。

这两个操作之间的主要区别是情况 1 仅返回匹配的对象，但情况 2 与 prevObj 或包含对象一起返回。

因此，从技术上讲，带有val()的操作应该返回相同的结果。

Answer 2

你在问为什么吗：

$(“#id”).val() // <--- This doesn't work,
// and
$(“input[id=‘id’]”).val()  // <--- ... and this does work?

假设您的标记如下所示：

<label for="id"> Input </label> <br />
<input id="id" type="text" value="test"/>

。如果是这种情况，那么以下内容应该可以工作(我已经包含了香草JS比较作为参考，无论如何，这与jQuery在引擎盖下的工作方式非常接近(。

// The jQuery Way
const firstCase = $("#id").val() // "test"
const secondCase = $("input[id='id']").val() // "test"
// The Vanilla Way
const thirdCase = document.getElementById("id").value; // "test"
const fourthCase = document.querySelector("input[id='id']").value; // "test"

请提供您尝试与之交互的HTML标记，然后我们将更好地了解您尝试解决的问题。