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

Posted 2023-05-09

【中文标题】我有一个关于 jQuery ID 选择器的问题 [关闭]

【英文标题】：I have a question on the part of jQuery ID Selector [closed]

【发布时间】：2019-09-02 20:43:03

【问题描述】：

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

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

【问题讨论】：

不清楚你在问什么

$("input#id").val() 怎么样？可能有多个元素的 id 为id。

我们需要查看您的 html。

猜猜你有另一个元素 id="id" 但它不是输入。

你 should not 对多个元素使用相同的 id（即使它们是不同的类型），如果你认为需要它，你可以使用 class 代替。

【参考方案1】：

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

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

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

这两种操作的主要区别在于 case 1 只返回匹配的对象，但 case 2 与 prevObj 或包含对象一起返回。

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

【讨论】：

但实际上第一个选择器并没有找到，第二个选择器只取到了值。

【参考方案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"/>

...如果是这种情况，那么以下应该可以工作（我已经包含了 vanilla 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 标记，以便我们更好地了解您要解决的问题。

【讨论】：

<input type=‘hidden’ id=‘modlId’ />