Урок 2: Селекторы и манипуляции с DOM в jQuery

Мы продолжаем наше изучение библиотеки jQuery. В первом уроке мы разобрались, что это за библиотека, зачем она нужна и как правильно «пригласить» её в свой проект. Теперь, когда наш инструмент готов к работе, пришло время научиться им пользоваться. Самый главный навык в jQuery, это умение находить нужные элементы на странице и управлять ими. Именно этим мы сегодня и займемся. Итак, добро пожаловать на второй урок, посвященный селекторам и манипуляциям с DOM.

Базовые селекторы: по тегу, классу, ID

Давайте представим, что веб-страница это огромный склад, а вы его управляющий. Чтобы что-то сделать с товаром (например, перекрасить, переместить или удалить), вы сначала должны его найти. В jQuery для этого существуют селекторы. По сути, это адреса или описания элементов, которые мы хотим «поймать».

Синтаксис всегда прост: $("селектор"). Всё, что находится внутри кавычек, это и есть наш «поисковый запрос». Давайте разберем три самых главных и часто используемых типа селекторов.

Селектор по тегу, это самый простой способ выборки. Вы просто указываете название HTML-тега. Допустим, на вашей странице много параграфов <p> и вы хотите с ними что-то сделать. Вот как это выглядит:

$("p").css("color", "red");

Эта строка кода найдет ВСЕ параграфы на странице и перекрасит текст внутри них в красный цвет. Мощно и просто, не правда ли?

Селектор по классу еще более полезный инструмент. В HTML мы часто помечаем элементы классами (атрибут class), чтобы группировать их по функциональности или стилю. В jQuery для выборки по классу используется точка (.). Например, у вас есть несколько кнопок с классом .btn:

<button class="btn">Кнопка 1</button>
<button class="btn">Кнопка 2</button>
<button class="btn-special">Особая кнопка</button>

$(".btn").css("background-color", "blue");

Этот код затронет только первые две кнопки, так как у третьей другой класс. Фон этих кнопок станет синим.

Селектор по ID самый точный инструмент. ID (идентификатор) должен быть уникальным на странице, то есть принадлежать только одному элементу. Для выборки по ID используется решетка (#). Допустим, у нас есть заголовок с id="main-title":

<h1 id="main-title">Главная страница моего сайта</h1>

$("#main-title").fadeOut(2000); // Плавно скроет заголовок за 2 секунды

Поскольку ID уникален, мы точно знаем, что воздействуем именно на этот, конкретный элемент.

Практическая задача 1:
Создайте простую HTML-страницу с несколькими элементами: 3-4 параграфа <p>, 2-3 дива с классом .box и одной кнопкой с id="#action-btn". Напишите код на jQuery, который:

• Всем параграфам задает зеленый цвет текста.

• Всем элементам с классом .box задает рамку: 1px solid black.

• Кнопку с id="#action-btn" делает неактивной: $("#action-btn").prop("disabled", true);.

Более сложные селекторы: вложенность, атрибуты, псевдоклассы

Когда базовых селекторов становится недостаточно, на помощь приходят их более продвинутые «старшие братья». Они позволяют описывать элементы с хирургической точностью.

Вложенность (комбинаторы) позволяет находить элементы внутри других элементов. Это как сказать: «Найди мне все картинки, но только те, что лежат внутри дива с классом gallery».

• Пробел. $("div p") найдет все параграфы <p>, которые находятся ВНУТРИ любого <div> (на любом уровне вложенности).

• Символ > (прямой потомок). $("ul > li") найдет только те <li>, которые являются прямыми детьми <ul>. Элементы <li>, вложенные в другой список внутри этого <ul>, найдены не будут.

Селекторы по атрибутам позволяют искать элементы не только по имени, классу или ID, но и по любым другим атрибутам. Синтаксис: [атрибут="значение"].

• $('input[type="text"]') найдет все текстовые поля.

• $('a[target="_blank"]') найдет все ссылки, открывающиеся в новом окне.

• $('img[alt]') найдет все картинки, у которых ЕСТЬ атрибут alt (не важно, с каким значением).

Псевдоклассы это ключевые слова, которые добавляются к селектору и определяют особое состояние элемента.

• :first и :last: $("p:first") найдет самый первый параграф на странице.

• :even и :odd: $("tr:even") найдет все четные строки таблицы (индексация с 0!).

• :not(селектор): $("input:not(:checked)") найдет все неотмеченные чекбоксы.

• :has(селектор): $("div:has(p)") найдет все <div>, внутри которых есть хотя бы один параграф <p>.

Практическая задача 2:
Добавьте на вашу страницу список <ul> с 5-6 пунктами <li> и несколько ссылок <a>, одна из которых ведет на https://google.com. Напишите код jQuery, который:

• Первому и последнему пункту списка задает жирный шрифт.

• Всем четным пунктам списка задает светло-серый фон.

• Всем ссылкам, ведущим на google.com, добавляет специальную иконку (например, маленький значок «внешняя ссылка») с помощью псевдоэлемента или просто меняет их цвет.

Методы для обхода DOM: .find(), .parent(), .children(), .siblings()

Иногда найти элемент проще в несколько шагов. Представьте, что вы нашли определенный элемент (например, кнопку) и теперь хотите работать с элементами, которые находятся рядом с ним: его родителем, детьми или соседями. Для этого в jQuery есть методы обхода DOM.

Допустим, у нас есть такая структура:

<div class="post">
    <h2>Заголовок поста</h2>
    <p>Текст поста...</p>
    <div class="actions">
        <button class="like">Лайк</button>
        <button class="share">Поделиться</button>
    </div>
</div>

Мы можем «поймать» кнопку с классом .like и начать путешествие по DOM от неё.

• .parent() поднимается на один уровень вверх. Если мы находимся на кнопке .like, то $(".like").parent() найдет блок div.actions. Если бы мы применили .parent() к div.actions, мы бы попали в div.post.

• .parents(селектор) более сильный метод. Он поднимается вверх по дереву DOM, пока не найдет элемент, соответствующий селектору. $(".like").parents(".post") сразу найдет блок div.post, пропустив div.actions.

• .children(селектор) возвращает всех прямых потомков. $(".post").children() вернет коллекцию [<h2>, <p>, div.actions]. Если указать селектор, $(".post").children("h2"), то вернется только заголовок.

• .find(селектор) один из самых полезных методов. Он ищет все элементы, соответствующие селектору, среди всех потомков (не только прямых!) текущего элемента. $(".post").find("button") найдет обе кнопки и .like и .share. Это гораздо эффективнее, чем писать длинный селектор с вложенностью.

• .siblings(селектор) находит всех соседей выбранного элемента (элементы на одном уровне вложенности). $(".like").siblings() найдет кнопку .share. А $("h2").siblings("p") найдет параграф, являющийся соседом заголовка.

Практическая задача 3:
Создайте древовидную структуру, список вложенных списков (<ul> внутри <li>). Напишите код, который по клику на любом пункте списка (<li>):

1. Добавляет ему класс active.

2. Убирает класс active у всех его «братьев и сестер» (соседей).

3. Находит его родительский элемент <ul> и добавляет ему класс has-active (чтобы, например, подсветить всю ветку, где есть активный элемент).

Находим нужные элементы на странице

Давайте закрепим все полученные знания на более комплексном примере. Мы создадим простую таблицу пользователей и добавим ей немного интерактивности.

Шаг 1: Создаем HTML-структуру

<table id="user-table" border="1">
    <thead>
        <tr>
            <th>ID</th>
            <th>Имя</th>
            <th>Email</th>
            <th>Действия</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Иван Иванов</td>
            <td>ivan@example.com</td>
            <td><button class="btn-delete">Удалить</button></td>
        </tr>
        <tr>
            <td>2</td>
            <td>Мария Петрова</td>
            <td>maria@example.com</td>
            <td><button class="btn-delete">Удалить</button></td>
        </tr>
        <tr>
            <td>3</td>
            <td>Алексей Сидоров</td>
            <td>alexey@example.com</td>
            <td><button class="btn-delete">Удалить</button></td>
        </tr>
    </tbody>
</table>

Шаг 2: Пишем jQuery-код

Наша цель:

1. Подсветить строку таблицы при наведении на нее курсора.

2. Сделать так, чтобы при клике на строку она выделялась цветом.

3. Реализовать удаление строки по клику на кнопку «Удалить».

$(document).ready(function() {

    // 1. Подсветка при наведении (используем псевдокласс :hover в CSS проще, но для практики сделаем так)
    $("#user-table tbody tr").on({
        mouseenter: function() {
            // При входе курсора добавляем класс
            $(this).addClass("highlight");
        },
        mouseleave: function() {
            // При уходе курсора убираем класс
            $(this).removeClass("highlight");
        }
    });

    // 2. Выделение строки по клику
    $("#user-table tbody tr").click(function() {
        // Убираем выделение со всех строк
        $("#user-table tbody tr").removeClass("selected");
        // Добавляем выделение текущей строки
        $(this).addClass("selected");
    });

    // 3. Удаление строки по клику на кнопку
    // Вешаем обработчик на ВСЕ кнопки с классом .btn-delete
    $("#user-table").on("click", ".btn-delete", function(event) {
        // Останавливаем всплытие события, чтобы не сработал клик по строке
        event.stopPropagation();
        // Находим родительскую строку <tr> и удаляем её
        $(this).parents("tr").remove();
    });

});

Шаг 3: Добавляем CSS-стили

.highlight {
    background-color: #f0f0f0 !important; /* Светло-серый при наведении */
}
.selected {
    background-color: #d4edda !important; /* Светло-зеленый при выделении */
}

Разбор кода:

• Мы использовали комбинаторы #user-table tbody tr, чтобы точно выбрать только строки тела таблицы, не затрагивая заголовок.

• Использовали метод .on() для обработки нескольких событий (mouseenter и mouseleave) сразу.

• Ключевое слово this внутри обработчика всегда указывает на DOM-элемент, с которым произошло событие. $(this) это его jQuery-обёртка.

• Для удаления мы применили делегирование событий: $("#user-table").on("click", ".btn-delete", function(...). Это лучшая практика, особенно для динамически добавляемых элементов. Мы вешаем один обработчик на статический родитель (#user-table), который «ловит» события, всплывающие от динамических кнопок .btn-delete.

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

Эта практика отлично показывает, как комбинируя разные селекторы и методы обхода, можно создавать интерактивные и отзывчивые интерфейсы.

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

В следующем уроке мы научимся не только находить элементы, но и управлять их содержимым, атрибутами и внешним видом. До встречи.

Полный курс с уроками по jQuery для начинающих вы можете найти здесь: jQuery для начинающих