简单的 jQuery 选择器只选择 Chrome 中的第一个元素..？

Question

我对 jQuery 有点陌生，所以请原谅我太密集了。我想通过 Chrome 的 JS 控制台选择特定页面上的所有 <td> 元素：

$('td')

然而，当我这样做时，我得到以下输出：

<td>Apples</td>

jQuery 不应该返回带有<td> 标签的元素数组吗？为什么我只看到符合此条件的第一个元素？

这里是有问题的网站：http://www.w3schools.com/html/html_tables.asp

编辑：我想补充一点，当我在 Chrome 控制台中键入一个 jQuery 函数时，我没有得到一个 jQuery 对象。我得到一个普通的 HTML 元素。我的 Chrome 设置/配置方式一定有问题。

Answer 1

如果网页上没有 jQuery，当然也没有其他代码为 $ 分配内容，Chrome 的 JS 控制台会为 $ 分配一个快捷方式到 document.querySelector()。

您可以使用$$() 来实现您想要的，控制台为document.querySelectorAll() 分配了一个快捷方式。

要知道页面是否包含jQuery，可以在控制台执行jQuery。要知道 jQuery 是否分配给 $，您可以执行 $().jquery，如果是这样，它将返回 jQuery 版本。

此外，还有浏览器插件可以在每个网页中注入 jQuery。

Answer 2

似乎没有正确包含 jQuery 以在您的目标页面上运行。我遇到了类似的问题，并针对 Google Chrome 解决了如下问题。

在您的 Chrome 浏览器中添加一个书签，其中包含以下单行代码作为 URL 字段（为了便于阅读而对其进行了美化）：

javascript: (function () {
    var s = document.createElement('script');
    s.setAttribute('src', 'https://code.jquery.com/jquery-latest.min.js');
    if (typeof jQuery == 'undefined') {
        document.getElementsByTagName('head')[0].appendChild(s);
    }
    jQuery("td.edit select option[value=BN]").attr("selected", "");
})();

然后只需单击该书签即可运行它。当您输入$ 时，预计会正常包含jQuery 并使控制台返回function (e,t){return new b.fn.init(e,t,r)} 之类的内容。

创建书签（也称为书签）的过程是在您希望使用控制台处理的每个页面中注入 jQuery 的简写。但是，如果您将 sn-p 代码直接复制粘贴到 JS 控制台中，也可以使用。

PS：sn-p 的积分不是我的，因为我用了一段时间，不记得我从哪里得到的。

希望对你有帮助。

Answer 3

如果安装了 jQuery，并且 $ 符号是 jQuery 的简写，则 $('td') 返回一个 jQuery 对象。但是，在您链接的 w3schools 页面中，我看不到 jQuery 甚至存在。

如果 jQuery 存在并且调试器没有覆盖 $ 符号，那么 $('td') 将返回一个 jQuery 对象。 jQuery 对象是一个类似数组的对象（具有数组的一些属性），但它不是一个实际的数组。如果您在控制台中查看内容，则必须确保查看的是 DOM 元素本身，而不是包含的 jQuery 对象。

如果你想得到一个实际的 DOM 元素数组，你可以这样做：

$('td').get();

这将返回一个 DOM 元素数组。

如果这不起作用，那么您应该检查调用$('td').get() 的时间，以确保您想要的所有td 项目都在页面中，然后再搜索它们。

Answer 4

此外，如果您尝试对每个 td 执行某些操作，则需要使用 .each() 循环遍历它们。例如：

$('td').each(function() {
   //do something relevant here
});