📘 Урок 3: Селекторы в jQuery — как выбрать нужный элемент на странице

Цель урока: научиться правильно использовать селекторы jQuery для выбора HTML-элементов — по тегу, классу, ID, атрибутам и другим признакам. Это основа для последующей работы с контентом, стилями, событиями и анимациями.

---

🔹 Что такое селекторы jQuery?

Селекторы — это способ указать, с каким элементом HTML-страницы ты хочешь работать.

jQuery использует CSS-подобный синтаксис для выбора элементов. Это удобно и понятно: если ты умеешь писать CSS, то почти сразу сможешь писать и селекторы jQuery.

---

🔹 Основной синтаксис

В jQuery селекторы передаются в функцию $():

$('селектор')

Это создаёт объект jQuery, к которому ты можешь применять методы:

$('.button').hide();
$('#header').css('color', 'red');
$('p').text('Привет, мир!');

---

🔹 Селекторы по типу

1. По тегу

Выбирает все элементы указанного тега:

$('p') // все <p>
$('div') // все <div>

📌 Пример:

$('h1').css('color', 'blue');

---

2. По классу

Выбирает все элементы с заданным классом:

$('.menu') // все элементы с классом "menu"

📌 Пример:

$('.highlight').fadeOut();

---

3. По ID

Выбирает один элемент с указанным ID:

$('#header') // элемент с id="header"

📌 Пример:

$('#submitBtn').attr('disabled', true);

---

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

Ты можешь комбинировать селекторы, как в CSS:

$('div.note') // все <div class="note">
$('ul li') // все <li> внутри <ul>
$('h2, p') // все <h2> и все <p>

📌 Пример:

$('div.notice, div.warning').css('border', '1px solid red');

---

🔹 Селекторы по атрибутам

Выбирают элементы по значениям атрибутов:

$('input[type="text"]') // все текстовые поля
$('a[target="_blank"]') // все ссылки, открывающиеся в новой вкладке

📌 Пример:

$('img[alt]').addClass('has-alt');

---

🔹 Специальные селекторы jQuery

:first и :last

$('li:first').addClass('first-item');
$('li:last').addClass('last-item');

:even и :odd

$('tr:even').css('background-color', '#f0f0f0'); // чётные строки
$('tr:odd').css('background-color', '#e0e0e0');  // нечётные строки

:eq(n)

Выбирает элемент с конкретным индексом (от 0):

$('li:eq(2)').text('Третий элемент');

---

🔹 Контекстный выбор

Можно ограничить поиск элементов внутри другого элемента:

$('#menu li') // все <li> внутри #menu
$('form input[type="checkbox"]') // чекбоксы только в формах

📌 Пример:

$('#comments p').css('font-style', 'italic');

---

🔹 Фильтрация и уточнение выбора

После базового выбора можно использовать методы jQuery для уточнения:

.filter()

$('li').filter('.active').hide();

.not()

$('div').not('.no-style').css('padding', '10px');

.has()

$('div').has('p').addClass('has-paragraph');

---

🔹 Селекторы форм

$(':input') // все поля формы
$(':text') // текстовые поля
$(':checkbox') // чекбоксы
$(':checked') // отмеченные чекбоксы/радиокнопки
$(':selected') // выбранные элементы <option>
$(':submit') // кнопки submit

📌 Пример:

$(':checked').val(); // значение выбранного чекбокса

---

🔹 Практика: скрыть все абзацы, кроме первого

$('p:not(:first)').hide();

---

🔹 Практика: изменить цвет каждой второй строки таблицы

$('table tr:even').css('background-color', '#f9f9f9');

---

🔹 Ошибки при работе с селекторами

❌ Забыли символ # или .

// Неправильно
$('header') // это ищет <header>, а не id="header"

// Правильно
$('#header') // ID
$('.header') // класс

❌ Пытались выбрать элемент, которого нет на странице

$('.non-existent').text('ничего не произойдёт'); // jQuery молча проигнорирует

💡 Советы:

• Убедись, что элемент уже загружен в DOM.

• Проверяй результат: if ($('.something').length > 0) { ... }

---

📌 Заключение

Селекторы — это основа jQuery. Они позволяют легко и гибко выбирать элементы для дальнейшей работы. Если ты хорошо освоишь селекторы, тебе будет легко применять любые методы: менять текст, стили, реагировать на клики и так далее.

---

📋 Упражнения

1. Выбери все <a> внутри блока с id content.

2. Спрячь все абзацы, кроме первого.

3. Подсвети строки таблицы, где класс строки — highlight.

4. Поменяй текст во всех заголовках <h2> на "Новый заголовок".