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

Question

我对jQuery还不太熟悉，请原谅我比较迟钝。我想通过Chrome的JS控制台选择特定页面上的所有<td>元素：

$('td')

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

<td>Apples</td>

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

这是相关网站：http://www.w3schools.com/html/html_tables.asp

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

- fbonetti

---

它确实选择每个元素。元素选择器 - Fallup

Answer 1

如果网页上没有jQuery，当然也没有其他代码将某些内容指定为$时，Chrome的JS控制台将会将$指定为document.querySelector()的快捷方式。

你可以使用$$()实现所需操作，这被控制台指定为document.querySelectorAll()的快捷方式。

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

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

- Gras Double

---

小修正：$ 不是 document.getElementById 的别名，而是 document.querySelector 的别名。https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#queryselector - fbonetti

这个更改绝对不是次要的 :-) 实际上，这种行为已经被更改了。通过一些谷歌搜索，我找到了WebKit票号92648。感谢指出这个更改。 - Gras Double

如果你想对每一个进行操作，可以使用[].forEach.call($$(".ClassName"), function(fe){ fe.click();})。 - Mark

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。但是，如果您直接将代码片段复制粘贴到JS控制台中，该代码片段也可以正常工作。

PS：该代码片段的来源不是我，因为我已经使用它一段时间了，无法记得从哪里获取的。

希望能够帮助到您。

- rdonatoiop

---

我该如何将代码保持为URL？一旦我按下Enter键，它就会在Google上进行搜索（我的omni栏设置为Google搜索）。 - akki

使用Chrome浏览器时，当代码片段输入到地址栏中时，字符串开头的"javascript:"部分会被奇怪地省略，导致命令被解释为搜索项。我已经在Firefox上进行了测试，但这种情况并没有发生。请确保在将代码片段直接输入到地址栏时，在函数声明之前输入"javascript:"。 - rdonatoiop

是的，这也发生在我身上...虽然我手动添加了“javascript:”，但敲回车后什么也没发生，页面重新加载或者其他操作...没有什么可以收藏夹。 - akki

书签是一种简便的方式，用于存储网址以备将来使用。当您需要在浏览某个网页时本地注入jQuery（以防它尚未加载）时，可以使用该书签。运行代码片段后（无论是通过单击书签代码、在地址栏中键入还是在控制台中键入），预计会为您加载jQuery，以便您可以使用浏览器控制台进行操作。由于这是jQuery库的简单动态包含，因此页面不会发生任何实际请求。希望对您有所帮助。 - rdonatoiop

Answer 3

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

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

如果您想获取实际的DOM元素数组，可以执行以下操作：

$('td').get();

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

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

- jfriend00

---

也许问题出在我的Chrome配置上？当我输入 $（'td'）时，我没有得到一个jQuery对象...我只得到了一个普通的HTML元素。同样，当我输入 $（'td'）.get（）时，我会收到错误消息“TypeError：Object＃<HTMLTableCellElement>没有方法'get'”。 - fbonetti

@effbott - 这可能是Chrome调试器将$重写为调试快捷方式。请尝试使用 jQuery('td')。 - jfriend00

@effbott - 你链接的w3schools页面似乎没有安装jQuery。因此，你不能在该页面上使用jQuery。 - jfriend00

在那个对象里是一个DOM ID的数组，而不是像DOM元素一样的数组。 （我相信你知道。） 注：DOM（文档对象模型） - nnnnnn

这是另一个例子，说明我告诉人们不要使用w3schools网站的原因。他们有大量错误，并且与标准组织无关。相反，应该使用jQuery API网站获取jQuery示例（http://api.jquery.com/），并使用w3联盟的网站获取CSS / HTML标准和示例（http://www.w3.org）。 - Zappa

Answer 4

如果您想对每个进行操作，您需要使用.each()进行循环。例如：

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

- Zappa