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

Question

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

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

Answer 1

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

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

$("input[id='id']") 内部使用 document.getElementsByTagName() 获取所有匹配的 'Element tag' 和带有 id.

的过滤器

这两种操作的主要区别在于案例 1 return 仅匹配对象，而案例 2 return 与 prevObj 或包含对象一起。

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

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

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

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

I have a question on the part of jQuery ID Selector

javascript

jquery

selector

jquery-selectors