jQuery значительно упрощает выбор и манипуляции с элементами DOM. В этой статье мы разберём все типы селекторов, их особенности, а также лучшие практики для эффективной работы.
1. Основные селекторы
Эти селекторы используются в 90% случаев:
| Селектор | Описание | Пример |
|---|---|---|
*
|
Все элементы на странице |
$("*")
|
элемент
|
Все элементы с указанным тегом |
$("div"), $("p")
|
.class
|
Элементы с указанным классом |
$(".myClass")
|
#id
|
Элемент с указанным ID |
$("#header")
|
селектор1, селектор2
|
Комбинирование нескольких селекторов |
$("div, p")
|
Совет:
-
$("#id")работает быстрее всего, так как используетdocument.getElementById(). -
$("div.class")эффективнее, чем$(".class")(ограничивает поиск по тегу).
2. Выбор элементов по атрибуту
Полезно, когда нельзя добавить класс или ID:
| Селектор | Описание | Пример |
|---|---|---|
[attr]
|
Элементы с атрибутом attr
|
$("a[href]")
|
[attr="value"]
|
Атрибут равен value
|
$("input[type='text']")
|
[attr!="value"]
|
Атрибут не равен value
|
$("div[class!='hide']")
|
[attr^="value"]
|
Атрибут начинается с value
|
$("a[href^='https']")
|
[attr$="value"]
|
Атрибут заканчивается на value
|
$("img[src$='.jpg']")
|
[attr*="value"]
|
Атрибут содержит value
|
$("div[class*='error']")
|
Пример:
// Выбор всех ссылок, ведущих на Google
$("a[href*='google.com']"); 3. Выбор элементов по содержимому
Позволяет искать элементы по тексту или структуре:
| Селектор | Описание | Пример |
|---|---|---|
:contains("текст")
|
Элементы, содержащие текст (регистрозависимо) |
$("p:contains('Hello')")
|
:has(селектор)
|
Элементы, содержащие другой элемент |
$("div:has(p)")
|
:empty
|
Пустые элементы (без дочерних узлов) |
$("div:empty")
|
:parent
|
Элементы с содержимым (противоположность :empty)
|
$("td:parent")
|
4. Иерархические селекторы
Основаны на отношениях между элементами:
| Селектор | Описание | Пример |
|---|---|---|
родитель > ребенок
|
Прямые потомки (children)
|
$("ul > li")
|
предок потомок
|
Все вложенные элементы (find)
|
$("div p")
|
элемент + сосед
|
Следующий соседний элемент |
$("h2 + p")
|
элемент ~ siblings
|
Все следующие соседи |
$("h2 ~ p")
|
:first-child
|
Первый дочерний элемент |
$("li:first-child")
|
:last-child
|
Последний дочерний элемент |
$("li:last-child")
|
:nth-child(n)
|
n-й дочерний элемент (можно even, odd, формулу)
|
$("tr:nth-child(2n)")
|
5. Селекторы форм
Упрощают работу с элементами <form>:
| Селектор | Описание | Пример |
|---|---|---|
:input
|
Все поля формы (input, textarea, select, button)
|
$("form :input")
|
:text
|
Текстовые поля (type="text")
|
$("input:text")
|
:checkbox
|
Чекбоксы |
$("input:checkbox")
|
:radio
|
Радиокнопки |
$("input:radio")
|
:checked
|
Выбранные чекбоксы/радиокнопки |
$("input:checked")
|
:selected
|
Выбранные <option>
|
$("option:selected")
|
:disabled
|
Отключённые поля |
$("input:disabled")
|
6. Селекторы по позиции в выборке
Фильтруют уже отобранные элементы:
| Селектор | Описание | Пример |
|---|---|---|
:first
|
Первый элемент в выборке |
$("p:first")
|
:last
|
Последний элемент в выборке |
$("p:last")
|
:eq(n)
|
Элемент с индексом n (начиная с 0)
|
$("li:eq(2)")
|
:lt(n)
|
Элементы с индексом меньше n
|
$("li:lt(3)")
|
:gt(n)
|
Элементы с индексом больше n
|
$("li:gt(1)")
|
:even
|
Элементы с чётными индексами (0, 2, 4...) |
$("tr:even")
|
:odd
|
Элементы с нечётными индексами (1, 3, 5...) |
$("tr:odd")
|
Совет:
Вместо :eq(), :first, :last лучше использовать методы:
$("li").eq(2); // Аналог :eq(2)
$("li").first(); // Аналог :first
$("li").last(); // Аналог :last Они работают быстрее и читабельнее.
7. Дополнительные полезные селекторы
| Селектор | Описание | Пример |
|---|---|---|
:not(селектор)
|
Исключение элементов |
$("p:not(.hidden)")
|
:visible
|
Видимые элементы |
$("div:visible")
|
:hidden
|
Скрытые элементы (display: none, width=0 height=0, <input type="hidden">)
|
$("div:hidden")
|
:header
|
Заголовки (h1, h2, ..., h6)
|
$(":header")
|
:animated
|
Элементы в процессе анимации |
$("div:animated")
|
8. Оптимизация производительности
1. Сужайте область поиска
-
$("#sidebar .menu-item")→ быстрее, чем$(".menu-item"). -
$("div.class")→ быстрее, чем$(".class").
2. Кэшируйте выборки
const $items = $(".items"); // Сохраняем в переменную
$items.hide(); 3. Используйте нативные методы для простых запросов
document.querySelector(".myClass"); // Быстрее, чем $(".myClass")
document.querySelectorAll("div.highlight"); 4. Избегайте избыточных селекторов
Плохо: $("div#header") (ID уникален, тег не нужен).
Лучше: $("#header").
Заключение
jQuery предоставляет мощные селекторы для работы с DOM. Чтобы код работал быстро:
-
Используйте конкретные селекторы (
#id,tag.class). -
Кэшируйте результаты выборок.
-
В простых случаях применяйте нативные
querySelector/querySelectorAll. -
Используйте методы
.first(),.eq(),.last()вместо:first,:eq().
Теперь вы знаете, как эффективно выбирать элементы в jQuery!
Официальная документация: jQuery Selectors
