jquery - запутался в селекторах

Question

Привет,

Этот новичок нуждается в разъяснении.Рассмотрим этот фрагмент сценария ...

   $("h3").click(function(){
        $(this).addClass("silver");
    });

Если это больше, чем один элемент h3 DOM на моей странице, приведенный выше сценарий будет применяться ко всем элементам, правильно?

Если это так, есть ли способ "нацелить" определенный элемент DOM (в моем примере), исключая при этом другие?Мне интересно, будут ли в этом случае применимы цепочечные селекторы, например

   $("h3 fieldset a").click(function(){
        $(this).addClass("silver");
    });

Будет ли это правильный подход?

Спасибо за ваш вклад.

Answer 1

Да, использование селектора «h3» добавит событие щелчка ко всем тегам h3 на странице.

Вы можете связывать селекторы, как вы делаете во втором примере, но вы будете подвергаться дополнительным издержкам в jQuery, когда он пытается проанализировать и найти в DOM соответствующие элементы. Лучше всего добавить идентификатор в тег h3, на который вы нацеливаетесь, и использовать что-то похожее на следующее:

$("#h3Id").click(function(){
    $(this).addClass("silver");
});

Answer 2

Чтобы ответить на ваш первый вопрос, да, $ ("h3") будет применяться ко ВСЕМ элементам H3.

Чтобы сузить свой выбор, у вас есть целый ряд вариантов.См. Все из них здесь: jQuery Selectors .Лучшим вариантом было бы назначить элемент, который вас интересует, для нацеливания идентификатора.

 <h3 id="firstSection">Headline!</h3>

И затем вы можете получить к нему доступ так:

 $("#firstSection")

Или вы можете сделать что-то ещебыстро и грязно, как это, если вы знаете, что хотите только первый элемент H3

 $("h3:first")

Answer 3

Поместите id на элемент, чтобы выбрать один элемент.

<h3 id="make-silver">text</h3>

$("h3#make-silver").click(function(){
    $(this).addClass("silver");
});

Answer 4

Именно так вы и поступите.

Старайтесь думать о своих селекторах так же, как если бы вы выбирали объект в css.

Часто хорошей идеей быть как можно более точным при применении селектора для сохранения jQuery zippy.

это основные правила

$("h3 fieldset a").click(function(){
        $(this).addClass("silver");
    });

выберет гиперссылку в наборе полей внутри тега h3 ... (хотя не уверен, что это правильный html)

1012 * тогда *

$("h3, fieldset, a").click(function(){
        $(this).addClass("silver");
    });

объявит класс silver для h3 набора полей и гиперссылки.

Simples!

Answer 5

Если это больше, чем один элемент h3 DOM на моей странице, приведенный выше скрипт будет применяться ко всем элементам, правильно?

Да

Если да, есть ли способ "нацелить" определенный элемент DOM (в моем примере), исключая при этом другие?

Да.Есть много способов.Прочтите документацию по селекторам jQuery , чтобы понять, как можно ограничить количество выбранных элементов.

Answer 6

Вы должны дать класс h3:

Таким образом, вы выберете этот элемент следующим образом: $ (". Reto").

Answer 7

ну, вы можете добавить класс к точному H3, на который хотите нацелиться. ИЛИ вы можете выбрать элемент, содержащий H3, на который вы хотите нацелиться, а затем использовать .find (), чтобы получить H3

пример кода:

$('.classOnTargetH3').click(....);

OR

$('elementImediatlySouroundingH3').find('h3').click(....);

Answer 8

Ваш вопрос неясен.

Возможно, вы ищете селектор :not() или пытаетесь фильтровать элементы по идентификатору или имени класса.

Документация содержитполный список селекторов , с примерами.