Поиск элементов

jQuery предоставляет мощный и гибкий механизм поиска элементов на странице, основанный на использовании CSS-селекторов. Основная функция для выбора элементов — $(), которая принимает строку селектора или DOM-элемент и возвращает объект jQuery, содержащий все найденные элементы.

var items = $('.menu-item'); // выбирает все элементы с классом menu-item
var header = $('#header');   // выбирает элемент с id header

Объект jQuery является массивоподобным: можно использовать индексацию, методы .each(), .first(), .last() и другие для работы с отдельными элементами.

Выбор по тегу, классу и идентификатору

  • По тегу: $('tagName') выбирает все элементы данного типа.

    $('p'); // все параграфы на странице

  • По классу: $('.className') выбирает все элементы с указанным классом.

  • По идентификатору: $('#id') выбирает уникальный элемент с данным id.

Особенности:

  • Выбор по идентификатору возвращает объект jQuery с одним элементом.
  • Классы и теги могут возвращать множество элементов, с которыми можно работать в цикле или методами jQuery.

Комбинированные селекторы

jQuery поддерживает сложные CSS-селекторы:

$('.menu li.active');      // все li с классом active внутри элементов с классом menu
$('div#content p.highlight'); // все параграфы с классом highlight внутри div с id content

Можно комбинировать селекторы через запятую:

$('h1, h2, h3'); // выбирает все заголовки h1, h2 и h3

Фильтрация найденных элементов

Методы фильтрации позволяют уточнить выборку:

  • .filter(selector) — оставляет элементы, соответствующие селектору:

    $('li').filter('.active'); // только активные элементы li

  • .not(selector) — исключает элементы, соответствующие селектору:

    $('li').not('.disabled'); // все li, кроме элементов с классом disabled

  • .eq(index) — выбирает элемент по индексу (нумерация с 0):

    $('li').eq(2); // третий элемент списка

  • .first() и .last() — выбирают первый и последний элемент выборки.

Поиск дочерних и родительских элементов

jQuery предоставляет удобные методы для навигации по дереву DOM:

  • .children(selector) — возвращает прямых потомков выбранного элемента, опционально с фильтром:

    $('#menu').children('li'); // прямые элементы li внутри #menu

  • .find(selector) — ищет все потомки на любом уровне вложенности:

    $('#menu').find('li.active'); // все активные элементы li внутри #menu

  • .parent() и .parents(selector) — переход к родительским элементам:

    $('li').parent();       // непосредственный родитель каждого li
$('li').parents('ul');  // все предки li, которые являются ul

  • .closest(selector) — возвращает ближайший подходящий элемент среди родителей, включая сам элемент:

    $(this).closest('form'); // ближайшая форма, к которой принадлежит элемент

Фильтры по состоянию и позиции

  • :first / :last — первый и последний элемент:

    $('li:first'); // первый li

  • :even / :odd — выбор элементов по четным/нечетным индексам:

    $('li:even'); // li с индексами 0, 2, 4...

  • :eq(index) — элемент с конкретным индексом:

    $('li:eq(3)'); // четвертый элемент

  • :gt(index) / :lt(index) — элементы с индексами больше или меньше заданного:

    $('li:gt(2)'); // все элементы с индексом > 2
$('li:lt(2)'); // все элементы с индексом < 2

  • :contains(text) — элементы, содержащие указанный текст:

    $('p:contains("jQuery")'); // все параграфы с текстом "jQuery"

Поиск элементов по атрибутам

  • [attr] — все элементы с указанным атрибутом:

    $('input[name]'); // все input с атрибутом name

  • [attr=value] — элементы с атрибутом, равным значению:

    $('input[type=text]'); // все текстовые поля

  • [attr^=value] / [attr$=value] / [attr*=value] — начинается с, заканчивается на, содержит:

    $('a[href^="https"]'); // ссылки на https
$('img[src$=".png"]'); // картинки в формате png
$('div[class*="menu"]'); // div с классом, содержащим menu

Прямое взаимодействие с DOM-элементами

jQuery-объекты можно преобразовать в чистые DOM-элементы через индекс или метод .get(index):

var domElement = $('#header')[0]; // первый элемент в виде DOM
var domElement2 = $('#header').get(0); // аналогично

Обратное создание jQuery-объекта из DOM:

var $element = $(domElement);

Особенности производительности

  • Использование ID-селекторов (#id) быстрее, чем классов и тегов, так как поиск оптимизирован браузером.
  • Для сложных селекторов рекомендуется сначала выбрать более общий контейнер, а затем применять методы .find() и фильтры, чтобы ограничить область поиска и повысить производительность.
var $activeItems = $('#menu').find('li.active'); // эффективнее, чем $('li.active') на всей странице

Динамический поиск и события

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

$('#menu').on('click', 'li', function() {
    $(this).toggleClass('selected');
});

Метод .on() гарантирует, что элементы, добавленные позже, также будут реагировать на события.

Эти инструменты обеспечивают полное управление выборкой элементов на странице, позволяют строить эффективные и читаемые цепочки действий, а также гибко фильтровать и манипулировать DOM-структурой.

Оглавление