jQuery 选择器帮助 - 我可以通过单击元素生成选择器吗？答案

【问题标题】：jQuery selector help - Can I generate a selector from clicking on an element?jQuery 选择器帮助 - 我可以通过单击元素生成选择器吗？
【发布时间】：2009-12-10 23:30:08
【问题描述】：

我有 jQuery、FireFox、Firebug、IE 和 IE 开发工具栏。当我使用 FireBug 或 IE Dev 工具栏检查页面时，我可以单击一个元素，它会在 dom 中显示该元素所在的位置等...是否可以将该选择转换为有效的 jQuery 选择器？我知道我可以使用 ID、类和相对于其他元素的元素等...但是当我查看一些没有类或 ID 等的随机表格单元格时呢？我可以在就这样飞？我以为肯定有。任何想法或想法总是受到赞赏

谢谢， ~ck 在圣地亚哥

【问题讨论】：

我不认为有任何真正的方法可以做到这一点，因为任何元素都可以使用多个 jQuery 选择器来引用，但像 FireQuery 这样的工具可以提供帮助。

标签： jquery css-selectors firebug ie-developer-tools

【解决方案1】：

有几个免费工具可以帮助您找到您的选择器。一种称为 Selector Detector，另一种称为 SelectorGadget。

两者非常相似且易于实施。只需为 javascript 链接添加书签并在您的网站上打开它（就像 firebug lite 一样）。然后单击您的元素以显示其选择器。

我刚刚写了一篇比较两者的文章，其中包括演示和下载链接。如果您想了解更多信息，请在此处查看：http://www.heinencreative.com/archives/articles/selector-detector-vs-selectorgadget/

【讨论】：

【解决方案2】：

查看 Firebug 的 FireQuery 插件。

【讨论】：

【解决方案3】：

在 Firebug 中，您可以编写 $1，它是页面上最后选择的对象。

【讨论】：

很高兴知道，这是 firebug 特有的还是 jQuery 特有的功能？
刚刚在最新的 chrome 控制台中测试了这个作品！

【解决方案4】：

如果您希望将属性添加到 DOM 元素，即带有 Firebug 的 <td> 元素

右键单击页面上的<td> 元素并检查元素。
在 Firebug 的 HTML 选项卡上右键单击标签，即<td>
选择新属性
添加 id/类/等。

...仅此而已。

【讨论】：

【解决方案5】：

通常我所做的是在 Firebug 中加载 jQuery，将其包装为油脂猴脚本。下面是来自 http://joanpiedra.com/jquery/greasemonkey/ 的这样一个脚本

// Add jQuery
    var GM_JQ = document.createElement('script');
    GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
    GM_JQ.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(GM_JQ);

// Check if jQuery's loaded
    function GM_wait() {
        if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); }
    else { $ = unsafeWindow.jQuery; letsJQuery(); }
    }
    GM_wait();

// All your GM code must be inside this function
    function letsJQuery() {
        alert($); // check if the dollar (jquery) function works
    }

【讨论】：