Доброго времени суток, дорогие гости моего блога и верные подписчики. Если вы решили разобрать основные селекторы jQuery, то текущая статья именно то, что вам нужно.
Я расскажу, что такое селекторы и какими они бывают в библиотеке языка JavaScript, опишу работу с дочерними элементами, а также каким образом можно вытаскивать значения нужных объектов и сами объекты по атрибуту, по классу или по идентификатору. Конечно же в статье вы найдете множество практических примеров. Ну а теперь вперед за дело!
Что такое селекторы и для чего они используются
Библиотека jQuery так полюбилась девелоперам из-за своих преимуществ, которые заключаются в удобном доступе ко всем существующим на веб-странице элементам. Все это стало возможным благодаря появлению селекторов.
Если вы хоть когда-то работали с css-файлом, то знаете, что данный язык также имеет такой термин, как селектор. И с его помощью разработчик может выбрать конкретные теги или пользовательские элементы и задать им определенные стилевые правила.
Точно также названный инструмент работает и в jQuery. Вы просто по определенным правилам написания (об этом чуть позже) указываете, какой объект необходимо выбрать, и далее производите с ним нужные действия: изменяете данные, добавляете html-разметку, удаляете ненужную информацию и т.д.
Знакомство с базовыми селекторами библиотеки
Чтобы создать описываемый инструмент, необходимо вначале строки указать знак доллара, а после в круглых скобках и двойных кавычках указать название тега, класса и т.д. Это выглядит следующим образом:
$(«Selector»)
Существует всего пять базовых типов, которые чаще всех используются в программном коде. Все они представлены в таблице чуть ниже.
| Тип селектора | Описание | Контрольный пример |
| $(“*”) | Выбираются все созданные объекты на странице. | Я решил изменить цвет всего текста с черного на зеленый: $(«*»).css ('color', 'green'); |
| $(“Element”) | Отбираются все элементы с тегом, который указан в двойных кавычках. | Весь текст, содержащийся в тегах «p» будет отображаться в желтых цветах: $(«p»).css ('color', 'yellow'); При нажатии на один из input-ов выполнится функция: $(«input»).click (function (){ … }); |
| $(“.class”) | Выбор всех объектов, в которых прописан указанный класс. | При ответе на вопрос и нажатии на определенную клавишу последняя будет подсвечиваться цветом: <script> $(document).ready (function (){ $(«.first»).click (function (){ $(«.first»).css («background», «green»); $(«.second»).css («background», «buttonface»); }); $(«.second»).click (function (){ $(«.second»).css («background», «red»); $(«.first»).css («background», «buttonface»); }); }); </script> <h2>Вы любите зиму?</h2> <button class="first">Да</button> <button class="second">Нет</button> |
| $(“#id”) | Выбор элемента (наименование id по правилам может быть только уникальным), которому приписан указанный в двойных кавычках идентификатор. | <script> $(document).ready (function (){ $(«#name»).click (function (){ $(this).val («Тыцнул!»); });
}); </script> <input type="button" id="name" value="Тыцни на меня!"> |
| $(“sel_name1, sel_name2,…,sel_nameN”) | Выбираются все элементы, созданные благодаря указанным селекторам. | А теперь хочу выделить желтым цветом все блоки, где указаны фрукты с соответствующим цветом: $(«.apple, .banana»).css («background»,"yellow");
<div class="apple">apple</div> <div class="strawberry">strawberry</div> <div class="banana">banana</div> |
Также вы можете комбинировать между собой перечисленные типы селекторов, усложняя тем самым структуру написания, однако делая выбор элементов более гибким.
Так, например, при написании
$(“#goods .fruits”)
будут выбираться все объекты, найденные начиная с вхождения в id-шник #goods всех классов с наименованием .fruits.
Поиск элементов веб-страницы по атрибутам
Сама по себе jQuery включает в себя множество различных конструкций для поиска определенных элементов по их атрибутам.
Опять-таки, для удобства я структурировал всю информацию в таблицу.
| Запись атрибута | Описание | Контрольный пример |
| [SomeAttribute] | Выбор всех объектов с указанным атрибутом. | Если нам необходимо везде изменить атрибут color в теге “p”, то стоит написать это следующим образом $(“p[color]”). |
| [SomeAttribute= ‘SomeValue’] | Выборка всех элементов страницы, где значение заданного атрибута совпадет с указанным. | В качестве примера можно привести следующую строку кода: $(“p[color=’blue’]”). |
| [SomeAttribute^= ‘SomeValue’] | Выбираются все объекты, у которых значение конкретного атрибута начинается именно с указанного параметра. | Так, к примеру, если расширить запись выше ($(“p[color^=’blue’]”)), то в результате получим все варианты со словом «blue» сначала. |
| [SomeAttribute$= ‘SomeValue’] | В данном случае все с точностью да наоборот. Т.е. на указанное значение должен оканчиваться параметр. | $(“h2[font-size$=2]”) определит все параметры с 2-ой в конце значения. |
| [SomeAttribute~= ‘SomeValue’] | Определяет все элементы, которые содержат в себе SomeValue, разделенное в свою очередь пробелом с другими параметрами. | Так запись $(“button[class~='big']”) учтет параметр следующего вида записи: «Super big». |
| [SomeAttribute*= ‘SomeValue’] | Находит заданную строку в значениях атрибута. | Повторюсь с примером. $(“button[class*='big']”) определит, как правильный ответ следующий результат «Megabig». |
| [SomeAttribute|= ‘SomeValue’] | Определяет за истину выборку (группировку) элементов, значение атрибута которых выводится через дефис. При этом первый элемент в найденной записи должен быть именно SomeValue. | $(“div[class|=super]”) отвечает за следующую запись: «super-build» |
Но это еще не самое интересное! Существуют также селекторы, которые используют для поиска упрощенные записи для input-ов и select-ов. Как, например,
$(«input:image») или $(«option:selected»)
Или же искать элементы можно в зависимости от их позиционирования на странице. Для этого существует целых семь видов подобных инструментов, среди которых наиболее часто используются такие ключевые слова:
- :first;
- :last;
- :even;
- :odd.
Обо всем этом вы сможете подробнее прочесть в моих следующих статьях. А на сегодня обучение подошло к концу. Не забывайте рассказывать своим друзьям о моем блоге и подписываться на обновления. Пока-пока!
С уважением, Роман Чуешов
При внесении новых тегов в разметку страницы селекторы автоматически скорректируются на предыдущие теги или самому править надо?
Заумная для меня статья, хотя тематика интересная. Роман, приведи пример написания селектора подзаголовка на этой странице «Знакомство с базовыми селекторами библиотеки». Мне понятнее станет.