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

Селекторы jQuery

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

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

Мы научились с вами доставать дочерние элементы любого элемента, а также всех его потомков. А как насчет того, чтобы выбрать соседний элемент, который идет после указанного? Без проблем. В этом нам поможет селектор плюс (+).

Для примера возьмем следующий список:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

И попробуем выбрать в нет следующий элемент после элемента с кириллическим значением атрибута data-item:

Результат можно наблюдать в консоли:

Селекторы jQuery

Отлично! А что если мы захотим выбрать, скажем, первый и последний элементы списка? Нет ничего проще. Опять-таки, обратимся к спецификации CSS3 и вспомним о псевдоклассах :first-child и :last-child. Попробуем:

Код выше получит первый и последний элементы списка. Также мы можем инвертировать результат, выбрав все элементы, кроме первого и последнего в наборе. Для этого используем псевдокласс :not:

Такой записью мы указали взять все элементы списка, кроме первого и последнего. Но и этого может быть мало, возможно мы захотим получить абсолютно любой элемент списка. Для этого можно воспользоваться счетчиком элементов. Любой элемент коллекции имеет свой номер, индекс. Можете считать его индексом массива. Соответственно, мы можем взять конкретный элемент с конкретным индексом. Сделать это поможет селектор :eq. В качестве примера возьмем третий элемент списка. Нумерация элементов начинается с нуля, соответственно, третий элемент будет иметь индекс 2:

Селекторы jQuery

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

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

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree