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

Question

我对jQuery有点新，所以原谅我的密度。我要选择通过Chrome浏览器的JS控制台为特定页面上的所有<td>元素：

$('td') 

然而，当我这样做，我得到下面的输出：

<td>Apples</td> 

是不是jQuery的应该返回元素数组与<td>标签？为什么我只看到符合这个标准的第一个元素？

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

编辑：我想补充一点，当我输入一个jQuery功能到浏览器的控制台，我没有得到一个jQuery对象回来。我得到一个普通的HTML元素。 Chrome设置/配置的方式肯定有问题。

Answer 1

如果jQuery是不存在的网页，当然没有其他的代码将东西$，Chrome的JS控制台分配$一个快捷方式到document.querySelector()。

你可以用$$()来达到你想要的效果，这是由控制台分配的一个快捷方式document.querySelectorAll()。

要知道页面是否包含jQuery，您可以在控制台中执行jQuery。要知道jQuery是否被分配到$，您可以执行$().jquery，如果是这种情况，那么将返回jQuery版本。

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

Answer 2

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

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

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

$('td').get(); 

将返回DOM元素的数组。

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

Answer 3

此外，如果您试图对每个td做些什么，您需要使用.each()来遍历它们。例如：

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

Answer 4

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

添加书签到包含以下的一行代码URL字段（它美化了可读性）Chrome浏览器：

javascript: (function() { 
    var s = document.createElement('script'); 
    s.setAttribute('src', 'http://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)}的内容，如输入$。

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

PS：代码片段不是我的，因为我使用它一段时间，不记得我从哪里得到。

希望它有帮助。