jQuery選擇幫手

Question

是否有類似Firebug的工具，那讓你在頁面上點擊一個元素，它然後演示了該元素的jQuery選擇？ 這些工具需要你來猜選擇，然後它會告訴你是正確與否，但它不以任何方式來構造選擇有所幫助。 Firefinder->不通過點擊 jQuery選擇器 - >不通過點擊

Answer 1

有很多方法可以選擇一個元素，實際上是無限的。例如： <a id="a2" class="x" href="/home.php">hello</a> 可以通過ID（$（ 「＃A2」））被選擇，按類別（$（） 「× 」）中，由式（$（「 A」）），通過HREF，通過作爲某事或某物的父母子女，或通過含有它的「你好」等

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會告訴你一個元素在哪裏。 Firefox將通過螢火蟲做同樣的，我相信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來繼續 - 但該步驟是可選的。