Селекторы
Селектор — строка, которая описывает, какие элементы нужны: по тегу, классу, идентификатору или атрибуту. Функция $ принимает те же селекторы, что и CSS, и возвращает объект jQuery — набор найденных элементов с методами для работы с ними.
Поиск по селектору
<ul id="tasks">
<li class="done">Купить хлеб</li>
<li>Позвонить Олегу</li>
<li>Написать отчёт</li>
</ul>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
console.log($('li').length); // 3
console.log($('.done').text()); // Купить хлеб
console.log($('#tasks li').length); // 3
</script>Свойство length показывает, сколько элементов нашлось. Метод text() возвращает текст элемента.
Какие селекторы бывают
| Селектор | Что находит |
|---|---|
li | Все теги li |
.done | Элементы с классом done |
#tasks | Элемент с id="tasks" |
#tasks li | Теги li внутри #tasks |
input[type="text"] | Поля с таким атрибутом |
li:not(.done) | Пункты без класса done |
h1, h2 | Все h1 и все h2 |
Любой селектор из CSS подходит и здесь.
Действие сразу над всеми
Метод, вызванный у набора, применяется к каждому элементу. Цикл писать не нужно:
<ul>
<li>Купить хлеб</li>
<li>Позвонить Олегу</li>
</ul>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$('li').css('color', 'green');
</script>Оба пункта стали зелёными.
Цепочки методов
Большинство методов, которые что-то меняют, возвращают тот же набор. Поэтому вызовы можно писать один за другим:
<h1>Мои задачи</h1>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$('h1').text('Список дел').css('color', 'royalblue');
</script>Заголовок получил новый текст и синий цвет.
Обычный элемент и объект jQuery
Объект jQuery — обёртка, а не сам элемент. Достать элемент DOM можно по индексу или методом get(), а обернуть обычный элемент — передав его в $:
<h1>Мои задачи</h1>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
const element = $('h1')[0]; // обычный элемент DOM
console.log(element.textContent); // Мои задачи
const wrapped = $(element); // снова объект jQuery
console.log(wrapped.text()); // Мои задачи
</script>Переменные с объектами jQuery часто называют со знаком доллара: const $list = $('#tasks'). Так сразу видно, какие методы у переменной есть.
То же на обычном JavaScript
$('li') соответствует document.querySelectorAll('li'), а $('#tasks') — document.querySelector('#tasks').
Частая ошибка
Проверять, нашёлся ли элемент, так: if ($('#tasks')). Объект jQuery создаётся всегда, даже пустой, поэтому условие всегда истинно. Проверяйте количество: if ($('#tasks').length > 0).