Селекторы jQuery. Часть 1

Селекторы jQuery

От автора: приветствую вас, друзья. В этой статье мы продолжим изучение библиотеки jQuery. Основа основ работы с jQuery заключается в умении выбрать нужные элементы со страницы, чтобы затем произвести с ними необходимые манипуляции. В статье мы рассмотрим основные селекторы jQuery, позволяющие гибко выбирать элементы страницы.

Итак, для начала нам необходима простенькая страничка HTML с несколькими элементами, на которых мы и будем тренироваться в выборке. Возьмем примерно такую страничку:

Попробуем выбрать заголовки. Для этого достаточно передать в функцию jQuery — $() –наименование нужного тега:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Селекторы jQuery

Как результат, в консоли мы видим единственный заголовок H1 и все заголовки H2 на странице. Все это мы можем сократить при желании и до одной строки кода. Вспоминаем, как это делается в CSS, когда мы хотим одинаково оформить сразу несколько элементов – для этого элементы перечисляются через запятую:

Теперь в коллекцию попадают все перечисленные элементы:

Селекторы jQuery

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Также элементы можно выбирать по их классу или идентификатору, точно также, как и в CSS. Выберем все блоки с классом и идентификатором content:

Селекторы jQuery

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

Селекторы jQuery

Абсолютно все элементы документа нам, конечно же, вряд ли понадобятся, поэтому мы можем указать, что хотим выбрать все элементы какого-то конкретного элемента документа. Например, выберем все элементы body и отдельно формы:

Селекторы jQuery

Как видим, все очень просто. Но на самом деле это далеко не все возможности по выборке, это лишь их малая часть. В следующей статье мы познакомимся с другими селекторами jQuery для получения коллекции элементов. Исходники к уроку можно скачать по ссылке.

На этом сегодня все. Больше о jQuerу вы можете узнать из наших уроков или курса. Удачи!

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

jQuery: основы

Изучите jQuery с нуля!

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий