javascript - 实时显示选定 DOM 元素的 JQuery 工具

Question

我最近在 CodeSchool 的网站上学习了 JQueryAir 类(class)，该类(class)具有基于 Web 的文本编辑器，该编辑器实时显示在您编写 JQuery 代码时选择了哪些 DOM 元素。它通过以浅灰色突出显示 html 页面的选定元素来实现此目的。

有谁知道可以重新创建该功能的文本编辑器(或插件)？我主要是想将它用于练习目的。或者，如果您知道一个网站可以让我做同样的事情，那也很棒。

这是一个屏幕截图，可以让您了解我的意思:

随着底部面板中的 JQuery 发生变化，上面的 html 会突出显示。

感谢任何建议 - 谢谢!

Answer 1

一个简单的方法(虽然可能不像您希望的那样动态)是使用 FireBug 的控制台(或 Chrome、IE9 等中的类似控制台)。在 FireFox 中加载包含 jQuery 引用的页面后，转到 FireBug 的控制台选项卡并粘贴它。

$("p").css("background-color", "gray");

按回车键。您可以更改选择器以查看结果，但在您刷新页面之前它们将是累加的。使用向上箭头返回最近的选择器进行编辑。

编辑:好的，这是在您添加显示所需 HTML 源突出显示的屏幕截图之前。尽管如此，也许这种方法在某些时候会派上用场。