От автора: приветствую вас, друзья. В этой статье мы продолжим изучение библиотеки jQuery. Основа основ работы с jQuery заключается в умении выбрать нужные элементы со страницы, чтобы затем произвести с ними необходимые манипуляции. В статье мы рассмотрим основные селекторы jQuery, позволяющие гибко выбирать элементы страницы.
Итак, в прошлой статье мы научились выбирать элементы по тегу, по классу и идентификатору. Также мы можем совмещать выборку, перечисляя селекторы через запятую. Однако это далеко не вся мощь jQuery, на самом деле мы можем выбирать элементы куда гибче. Давайте поработаем со следующим набором элементов в верстке:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="content"> <p>Lorem ipsum dolor sit amet.</p> <p>Incidunt laudantium itaque, fuga sunt.</p> <div> <p>Вложенный параграф 1</p> <p>Вложенный параграф 2</p> </div> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul> <img src="//lorempixel.com/400/100" width="400" height="100" alt="" /> <img src="//lorempixel.com/400/200" width="400" height="200" alt="" /> <img src="//lorempixel.com/400/100" width="400" height="100" alt="" /> <form> <input type="text" name="name"> <input type="email" name="email"> <button type="submit">Go</button> </form> </div> |
Допустим, мы хотим выбрать все параграфы, которые находятся внутри блока, который в свою очередь вложен внутрь блока с классом content. Если мы попытаемся выбрать по тегу, тогда будут выбраны абсолютно все параграфы:
|
1 2 |
var elem = $('p'); console.log(elem); |
Такой вариант нам не подходит. Вспоминаем CSS и то, какой селектор используется для обращения к прямым потомкам. Точно так же и в jQuery:
|
1 2 |
var elem = $('.content > div > p'); // так var elem2 = $('.content div > p'); // или так |
Теперь рассмотрим примеры выборки элементов по их атрибутам. jQuery позволяет гибко выбирать элементы по значению любого атрибута или даже по его наличию. Это может быть действительно любой атрибут: width или height у картинки, name у элементов формы и т.д.
Давайте, к примеру, выберем все элементы с атрибутом height, это будут три картинки:
|
1 2 |
var elem = $('*[height]'); var elem = $('img[height]'); // или же явно укажем, что нужны именно картинки |
А что если нам нужны картинки только определенной высоты? Легко. Мы просто укажем дополнительно значение атрибута:
|
1 |
var elem = $('img[height=100]'); |
При желании дополнительно мы можем указать значение и других атрибутов, например ширины:
|
1 |
var elem = $('img[height=100][width=400]'); |
Для примера выберем поле формы с указанным значением атрибута name:
|
1 |
var elem = $('input[name="email"]'); |
Также мы можем инвертировать результат. Возьмем пример выше с картинками. Например, мы хотим взять любые изображения, высота которых не равна 100 пикселям. Это можно сделать так:
|
1 |
var elem = $('img[height!=100]'); |
Также мы можем использовать даже символы регулярных выражений для того, чтобы указать с чего начинается (^) или чем заканчивается значение атрибута ($). Примеры:
|
1 2 |
var elem = $('img[height^=1]'); // картинки с высотой, значение которой начинается с 1 var elem = $('img[height$=00]'); // картинки с высотой, значение которой заканчивается 00 |
Еще одним полезным при работе со значениями атрибутов символом, является символ звездочки (*). Он позволяет указать часть значения, подстроку. Давайте к списку добавим произвольный атрибут data-item:
|
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> |
А теперь попробуем выбрать тот элемент, в значении атрибута которого встречается буква «т»:
|
1 |
var elem = $('li[data-item*="т"]'); |
При наведении на элемент в консоли он будет подсвечен на странице:
Очень удобно, не так ли? Однако и это не все. Хотя используя уже изученные возможности мы можем выбрать практически любой элемент страницы, но в дополнение к этим возможностям jQuery предлагает нам еще более внушительный список для выборки элементов. С другими возможностями мы познакомимся уже в следующей статье.
На этом сегодня все. Больше о jQuerу вы можете узнать из наших уроков или курса. Удачи!
