我最近在 CodeSchool 的网站上学习了 JQueryAir 类(class)，该类(class)具有基于 Web 的文本编辑器，该编辑器实时显示在您编写 JQuery 代码时选择了哪些 DOM 元素。它通过以浅灰色突出显示 html 页面的选定元素来实现此目的。
有谁知道可以重新创建该功能的文本编辑器(或插件)？我主要是想将它用于练习目的。或者，如果您知道一个网站可以让我做同样的事情，那也很棒。
这是一个屏幕截图，可以让您了解我的意思:
随着底部面板中的 JQuery 发生变化，上面的 html 会突出显示。
感谢任何建议 - 谢谢!
最佳答案
一个简单的方法(虽然可能不像您希望的那样动态)是使用 FireBug 的控制台(或 Chrome、IE9 等中的类似控制台)。在 FireFox 中加载包含 jQuery 引用的页面后，转到 FireBug 的控制台选项卡并粘贴它。
$("p").css("background-color", "gray");
按回车键。您可以更改选择器以查看结果，但在您刷新页面之前它们将是累加的。使用向上箭头返回最近的选择器进行编辑。
编辑:好的，这是在您添加显示所需 HTML 源突出显示的屏幕截图之前。尽管如此，也许这种方法在某些时候会派上用场。
关于javascript - 实时显示选定 DOM 元素的 JQuery 工具，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7971157/