От автора: приветствую вас, друзья. В этой статье мы продолжим изучение библиотеки jQuery. Основа основ работы с jQuery заключается в умении выбрать нужные элементы со страницы, чтобы затем произвести с ними необходимые манипуляции. В статье мы рассмотрим основные селекторы jQuery, позволяющие гибко выбирать элементы страницы.
Итак, продолжим изучать способы выборки элементов с помощью jQuery. Как видите, способов очень много, что безусловно говорит в пользу данной библиотеки и указывает на удобство ее использования.
Мы научились с вами доставать дочерние элементы любого элемента, а также всех его потомков. А как насчет того, чтобы выбрать соседний элемент, который идет после указанного? Без проблем. В этом нам поможет селектор плюс (+).
Для примера возьмем следующий список:
|
1 2 3 4 5 6 7 |
<ul> <li data-item="item 1"><a href="#">Item 1</a></li> <li data-item="item 2"><a href="#">Item 2</a></li> <li data-item="атрибут 3"><a href="#">Item 3</a></li> <li data-item="item 4"><a href="#">Item 4</a></li> <li data-item="item 5"><a href="#">Item 5</a></li> </ul> |
И попробуем выбрать в нет следующий элемент после элемента с кириллическим значением атрибута data-item:
|
1 2 |
var elem = $('li[data-item*="т"] + li'); console.log(elem); |
Результат можно наблюдать в консоли:
Отлично! А что если мы захотим выбрать, скажем, первый и последний элементы списка? Нет ничего проще. Опять-таки, обратимся к спецификации CSS3 и вспомним о псевдоклассах :first-child и :last-child. Попробуем:
|
1 2 3 4 |
var liFirst = $('li:first-child'), liLast = $('li:last-child'); console.log(liFirst); console.log(liLast); |
Код выше получит первый и последний элементы списка. Также мы можем инвертировать результат, выбрав все элементы, кроме первого и последнего в наборе. Для этого используем псевдокласс :not:
|
1 |
var li = $('li:not(:first-child, :last-child)'); |
Такой записью мы указали взять все элементы списка, кроме первого и последнего. Но и этого может быть мало, возможно мы захотим получить абсолютно любой элемент списка. Для этого можно воспользоваться счетчиком элементов. Любой элемент коллекции имеет свой номер, индекс. Можете считать его индексом массива. Соответственно, мы можем взять конкретный элемент с конкретным индексом. Сделать это поможет селектор :eq. В качестве примера возьмем третий элемент списка. Нумерация элементов начинается с нуля, соответственно, третий элемент будет иметь индекс 2:
|
1 |
var li = $('li:eq(2)'); |
Супер, все получилось! Но если вы думаете, что на этом способы выборки элементов закончились, тогда вы ошибаетесь 🙂 На самом деле мы не рассмотрели и половины доступных селекторов jQuery для выборки элементов. Однако уже рассмотренных хватит вам в большинстве случаев. В следующей статье мы познакомимся с некоторыми из селекторов для работы с формами.
На этом сегодня все. Больше о jQuerу вы можете узнать из наших уроков или курса. Удачи!
