Сегодня в этом посте я собираюсь обсудить несколько способов, с помощью которых мы можем найти элементы DOM, используя jQuery.
Мы все используем селекторы jQuery, чтобы выбирать элементы для работы. Большинство наших селекторов обычно основаны на идентификаторе, классе или каком-либо другом атрибуте, а иногда даже структуре выбранных элементов. Однако, помимо этих селекторов, jQuery также позволяет вам выбирать элементы совершенно по-другому, как все братья и сестры элемента, все дочерние элементы элемента. Это также позволяет вам искать в контексте другого элемента.
Давайте посмотрим, что я имею в виду под этим. Рассмотрим следующую структуру DOM.
<ul class="container"><li class="item1">a</li> <li class="item2">b</li> <li class="item3">c <ul><li class="item1">c1</li> <li class="item2">c2</li> </ul></li> </ul>
Как видно из структуры, у меня есть один главный ul, который имеет три элемента li. этот ul действует как основной контейнер. Третий элемент li в основном контейнере, в свою очередь, имеет еще один элемент ul, имеющий три подэлемента li.
Для обоих элементов ul элементам li были назначены классы, относящиеся к их расположению в списке. Таким образом, мы получили в общей сложности четыре элемента li, имеющих один и тот же класс для элемента li — item1 и item2.
Теперь давайте посмотрим, как мы можем выбрать различные элементы в этой структуре.
Как обычно, мы будем писать весь наш код в функции загрузки jQuery, которая выглядит следующим образом.
<div style="text-align: justify;">$(function(){</div>//All our code goes here.
});
Предположим, что мы хотим закрасить все элементы, которые имеют класс ‘item2’ в нашем ul, который имеет класс ‘container’
Есть на самом деле три способа достичь этого.
Вот первый.
$(".container .item2").css({"background-color":"blue"});
Этот способ прост, и мы используем обычные селекторы CSS, чтобы найти все подэлементы в DOM в нашем .container, у которых есть класс с именем .item2. В нашем случае это установит цвет фона обоих элементов li, имеющих класс item2.
Теперь давайте посмотрим на второй способ сделать это.
$(".item2",".container").css({"background-color":"blue"});
Это также эквивалентно предыдущему фрагменту. Этот селектор использует «контекст поиска». Контекст поиска — это не что иное, как контекст, в котором будут выполняться поиск элементов. Итак, если бы я должен был прочитать выражение селектора, это было бы прочитано что-то вроде этого
«Выберите все элементы, которые имеют класс с именем item, которые существуют внутри элемента, который имеет класс с именем container»
Это означает, что первый аргумент, который передается селектору, является фактическим поисковым выражением, тогда как второй аргумент, который мы передали селектору, становится контекстом нашего поиска.
Это также означает, что когда мы не передаем второй аргумент, вся структура DOM ищется по умолчанию.
Вот третий способ сделать это.
$(".container").find(".item2").css({"background-color":"blue"})
В приведенном выше коде мы используем функцию find () jQuery для поиска элементов. Если бы я прочитал это вслух, это было бы читать как
«Сначала выберите элементы с классом« контейнер », а внутри всех этих выбранных контейнеров выберите элементы с классом« пункт2 ».
Иногда, если ваши классы уникальны, вы можете не чувствовать необходимости находить элементы, используя контекст. Или, во многих случаях, можно найти элементы, используя обычный селектор, который будет проходить через весь DOM. Зачем использовать контексты и путать вещи?
Однако, когда ваша структура усложняется, может оказаться чрезвычайно удобным использовать контексты для поиска элементов. Потому что, когда вы обнаруживаете использование контекстов, jQuery вынужден обходить меньшее количество элементов DOM, чтобы получить элементы, которые вы хотите искать, тем самым экономя ваше время и улучшая общую производительность.
Иногда лучше использовать контекст, когда у вас уже есть часть поиска контекста, уже сделанного для вас.
Например, давайте предположим, что вы зарегистрировали функцию щелчка для своего контейнера. А внутри функции click вам нужно сделать то же самое, что мы сделали выше.
Вот как это можно сделать обычным способом
$(".container").click(function(){
$(".item2",".container").css({"background-color":"blue"});
});
Но здесь есть одна вещь, на которую следует обратить внимание. Мы уже находимся в стороне обработчика кликов контейнера. Это означает, что jQuery уже искал DOM для нашего контейнера. Тогда зачем нам снова запрашивать jQuery для поиска контейнера в DOM? Вместо этого мы можем использовать текущий контекст и просто искать нужный элемент.
Вот как это можно сделать.
$(".container").click(function(){
$(".item2",$(this)).css({"background-color":"blue"});
});
Контекст в обработчике кликов определяется значением переменной this. Таким образом, поиск элементов может быть проще для jQuery, если вы просто знаете, когда и где вы можете уменьшить количество запросов, которые должен делать jQuery, используя существующий контекст.
Это все на данный момент. Я буду обсуждать больше способов поиска элементов с использованием jQuery в следующих статьях.
До тех пор, пока!
Счастливого программирования 🙂
Подписание