jQuery选择器助手

Question

是否有像Firebug这样的工具，允许您点击页面上的元素，然后会显示该元素的jQuery选择器？ 这些工具要求您猜测选择器，然后它会告诉您是否正确，但它无论如何都无法构建选择器。 Firefinder-＆gt;不是点击 jQuery选择器 - ＆gt;不要点击

Answer 1

您可以通过多种方式选择元素，实际上是无限的方式。例如： <a id="a2" class="x" href="/home.php">hello</a> 可以通过id（$（“＃a2”）），类（$（“。x”）），类型（$（“a”）），href，作为某事物的孩子，或者a来选择某事物的父母，或者包含“你好”等等的父母。

Answer 2

我不认为任何这样的工具存在，并且由于很好的理由，有很多方法可以在页面上选择一个元素，给定它的标记，类，id和与其他元素的关系。

假设我们有以下内容：

<img src="foo.png" class="bar_1" />

我们可以通过以下方式选择：

$("img");
$("img:eq(0)");
$("img[src=foo.png]");
$("img[src^=foo]");
$("img[src$=.png]");
$("img.bar_1");
$("img.bar_1:eq(0)");
$("img[class=bar_1]");
$("img[class^=bar_]");

等等。正是由于这个原因，没有工具可以告诉你 选择器，因为对于任何给定的元素没有一个选择器，但是很多。

话虽这么说，你可以构建一个基于层次结构的选择器。 Chrome会告诉您DOM中元素所在的位置。 Firefox也会通过Firebug做同样的事情，我相信IEDeveloperToolbar会做同样的事情：

在上图中，您可以看到我的div#content元素可以选择如下：

// I don't recommend making a habit of this
$("body.question-page > div.container > div#content").doSomething();

当然，由于此元素具有ID，并且假设ID值每页只出现一次，我可以简化此选择器：

$("#content").doSomething();

然后，我们再次看到有很多方法可供选择 - 即使我们有指南。

Answer 3

Element Hiding Helper（需要Adblock Plus）可以满足您的要求。它允许您选择一个元素（简单点击不会这样做，因为有时您需要选择父元素），然后选择要包含在选择器中的属性/元素。然后通过将选择器添加到Adblock Plus来继续 - 但该步骤是可选的。