Выбор элементов и взаимодействие с DOM — это то, для чего вы, вероятно, будете использовать jQuery чаще всего. К счастью, это действительно легко сделать, потому что синтаксис выбора элемента или набора элементов точно такой же, как выбор элемента в CSS.
jQuery также упрощает выполнение действий со многими элементами одновременно, что невероятно полезно.
В приведённом ниже примере $(‘.note’) выбираются все элементы с классом note на странице, а затем мы устанавливаем фон для всех полей note красным, а их высоту ─ 100 пикселей.
$('.note').css('background', 'red').height(100);
jQuery использует действительно аккуратный цепной синтаксис, который позволяет использовать код, подобный приведённому выше. Это работает, потому что для любого метода “настройки” jQuery возвращает то же самое, что и функция selector (“$”): $ это функция, которая возвращает оболочку jQuery вокруг элемента. .css это метод этой оболочки jQuery, и он тоже возвращает ту же оболочку. .height задает высоту (duh) выбранного элемента, и, конечно, есть эквивалент ширины.
Средства получения и настройки
В приведённом выше примере мы использовали .css и .height для установки значения элемента, но эти методы также являются получателями.
Вызов .height без какого-либо значения возвращает высоту текущего элемента, а вызов .css только с именем свойства CSS возвращает значение свойства.
var currentHeight = $('.note').height(), currentColor = $('.note').css('color');
Если у вас выбрано более одного элемента (скажем, у вас много элементов note), программа получения извлекёт значение для первого из них.
Контекст
Иногда полезно ограничить область DOM, из которой может быть выбран элемент. Используемая область DOM также известна как другой контекст.
Чтобы указать jQuery, из какой области вы хотите выбрать, вы передаёте второй аргумент, который может быть элементом DOM, строковым селектором (выбор элемента, который jQuery найдёт и использует) или объектом jQuery. jQuery будет искать ваш селектор только в этом контексте.
Вот пример. Обратите внимание, что переменные, которые используются для хранения объектов jQuery, начинаются с доллара. Это соглашение, помогающее вам и читателям вашего кода понять, что это сохраняемый объект jQuery.
var $header = $('header'), $headerBoxes = $('.note', $header);
Страницы в тему:
- Следующая страница: jQuery: AJAX
- Предыдущая страница: jQuery