3. Селекторы

Селекторы — это основа jQuery. Они позволяют находить элементы на странице.

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

$(selector)

Примеры

$('div')           // Все <div>
$('.classname')    // Все с классом .classname
$('#id')           // Элемент с id="id"
$('div.class')     // Div с классом .class
$('div, p, span')  // Множественный выбор

📝 Базовые селекторы

По тегу

$('p')      // Все параграфы
$('h1')     // Все заголовки h1
$('button') // Все кнопки

По классу

$('.warning')      // Все с классом warning
$('.btn.primary')  // Элементы с обоими классами

По ID

$('#header')   // Элемент с id="header"
$('#main-nav') // id="main-nav"

🔍 Селекторы отношений

Дочерние элементы

$('ul > li')        // Прямые дочерние li внутри ul
$('div p')          // Все p внутри div (любой вложенности)
$('.container > *') // Все прямые дети .container

Соседние элементы

$('h2 + p')    // p сразу после h2
$('h2 ~ p')    // Все p после h2 на том же уровне

⚙️ Селекторы атрибутов

$('[type]')              // С любым атрибутом type
$('[type="text"]')       // type="text"
$('[type!="submit"]')    // type НЕ равен submit
$('[href^="https"]')     // href начинается с https
$('[href$=".pdf"]')      // href заканчивается на .pdf
$('[title*="jquery"]')   // title содержит jquery

🎨 Селекторы состояния

$(':checked')     // Отмеченные чекбоксы/радио
$(':selected')    // Выбранные <option>
$(':disabled')    // Отключенные элементы
$(':enabled')     // Активные элементы
$(':focus')       // Элемент в фокусе
$(':empty')       // Пустые элементы

📍 Позиционные селекторы

$('li:first')        // Первый li
$('li:last')         // Последний li
$('li:eq(2)')        // li с индексом 2 (третий)
$('li:gt(1)')        // li с индексом больше 1
$('li:lt(3)')        // li с индексом меньше 3
$('li:even')         // Четные li (0, 2, 4...)
$('li:odd')          // Нечетные li (1, 3, 5...)

🧩 Составные селекторы

$('div.container > p:first-child')
$('input[type="text"]:not(.readonly)')
$('ul li:nth-child(odd)')

🆚 jQuery vs Vanilla JS

jQuery	Vanilla JS
$('.class')	document.querySelectorAll('.class')
$('#id')	document.getElementById('id')
$('div')	document.getElementsByTagName('div')
$('.a, .b')	document.querySelectorAll('.a, .b')

⚡ Производительность

Быстрые селекторы

$('#id')       // Самый быстрый
$('tag')       // Быстро
$('.class')    // Медленнее

Медленные селекторы

$(':hidden')         // Медленно
$('[attr*="value"]') // Медленно
$(':not(selector)')  // Медленно

💡 Лучшие практики

✅ Хорошо

// Кеширование селектора
const $buttons = $('.btn');
$buttons.addClass('active');
$buttons.on('click', handler);

// Контекст поиска
$('.item', '#container'); // Ищем только внутри #container

❌ Плохо

// Повторный поиск
$('.btn').addClass('active');
$('.btn').on('click', handler); // Ищем заново!

// Слишком сложный селектор
$('body > div.container > ul.list > li.item:first-child > a')

🚀 Практика

Попробуй разные селекторы: