JQuery селектор помощник

Question

Существует ли такой инструмент, как Firebug, который позволяет щелкнуть элемент на странице , а затем показывает вам селектор jQuery для этого элемента? Эти инструменты требуют от вас угадать селектор, а затем он говорит, правы вы или нет, но это никак не помогает построить селектор. Firefinder-> не нажав Селекторы jQuery -> не нажатием

Answer 1

Я не думаю, что такой инструмент существует, и по очень веской причине, существует так много способов выбрать элемент на странице, учитывая его тег, класс, идентификатор и отношение к другим элементам.

Предположим, у нас есть следующее:

<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();

Конечно, поскольку этот элемент имеет идентификатор, а значения идентификаторов должны появляться только один раз на страницу, я мог бы упростить этот селектор:

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

Опять же, мы снова видим, что есть много способов выбора - даже когда у нас есть руководство.

Answer 2

Есть много способов, которыми вы можете выбрать элемент, на самом деле, бесконечные способы. Например: <a id="a2" class="x" href="/home.php">hello</a> Может быть выбран по id ($ ("# a2")), по классу ($ (". X")), по типу ($ ("a")), по href, будучи потомком чего-либо или родитель чего-либо, или с его помощью, содержащий «привет» и т. д.

Answer 3

Помощник по сокрытию элементов (требуется Adblock Plus) делает то, что вы просите.Он позволяет вам выбрать элемент (простой щелчок не подходит, потому что иногда вам нужно выбрать родительский элемент), а затем выбрать атрибуты / элементы, которые вы хотите включить в селектор.Затем он добавляет селектор в Adblock Plus, но этот шаг не является обязательным.