Доброго времени суток, гики веб-разработки и гости моего обучающего блога. Сегодняшняя публикация будет посвящена очень важной теме, без изучения которой дальнейшая работа с библиотекой jQuery будет неполноценной и даже бессмысленной. Это выборка jQuery — элементов.
Я постарался уместить в одну статью все важные моменты работы с ней. Поэтому после прочтения вы освоите базовые селекторы, узнаете, как можно вытащить объекты по их атрибутам, тегу, по классу, идентификатору и даже содержимому. Давайте поскорее приступать к делу!
Селекторы бывают разные: общие, идентификационные, классные…
Разработчик обсуждаемой библиотеки Джон Резиг и позже его команда действительно создали прекрасный программный продукт. Благодаря продуманному функционалу мы с вами можем всего лишь одной короткой строкой кода найти любой элемент по абсолютно различным параметрам. И для этого были разработаны базовые селекторы. Я перечислил их в таблице.
Общий вид селектора | Выполняемые действия |
$(«*») | Выбирает все объекты на веб-странице. |
$(«SomeElement») | Указывает, что действия будут происходить над тегом. |
$(«.SomeClass») | Выбирается указанный класс. |
$(«#SomeId») | Дальнейшие действия будут производиться с элементом с выбранным id. |
$("elem1, …, elemN ") | Выбираются все перечисленные объекты. |
Для закрепления теоретического материала разберите следующую программу.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html> <head> <title>Селекторы</title> <script src=" https://code.jquery.com/jquery-2.2.4.min.js "></script> <style> body { text-align: center; font-size: 29px; width: 23%; margin-left: 39%; } </style> </head> <body> <h2>Фрукты</h2> <div class="apple">Яблоки</div> <div class="cherry">Вишни</div> <div class="watermelon">Арбузы</div> <div class="plum">Сливы</div> <script type="text/javascript"> jQuery(document).ready(function(){ $(".cherry, .plum").css('background-color', 'pink'); }); </script> </body> </html> |
Как видите, задний фон поменялся только у второго и четвертого пункта.
Помимо базовых селекторов, можно вызывать иерархические. Их всего два вида.
Иерархический селектор | Выполняемые действия |
Объект-предок > объект-потомок | Благодаря такой записи выбираются все объекты-потомки с указанным селектором, которые унаследованы от конкретного объекта-предка. |
selectorX ~ selectorY | Создается выборка из всех селекторов «selectorY», которые находятся после элементов «selectorX». |
Давайте реализуем практически второй пункт таблицы. Выделим все отзывы кроме положительных красным цветом.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html> <html> <head> <title>Иерархия</title> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <style> body { text-align: center; font-size: 29px; width: 23%; margin-left: 39%; } </style> </head> <body> <div id="opinion"> <p class="good">Food</p> <p class="bad">The way to hotel</p> <p class="bad">Staff</p> <p class="good">Beach</p> <p class="bad">Clubs</p> </div> <script> jQuery(document).ready(function(){ $(".good ~ .bad").css('background-color', 'red'); }); </script> </body> </html> |
Но и это еще не все. В данной библиотеке предусмотрены еще и селекторы атрибутов. Зачем же они нужны? А затем, чтобы сделать работу с различными элементами веб-страницы еще более гибкой и простой.
Общий вид | Выполняемые действия |
[attr] | Вытягиваются все объекты с указанным атрибутом. |
[attr=’SomeValue’] | Выбираются элементы, у которых атрибут равен (в данном случае) ’SomeValue’. |
[attr^=’SomeValue’] | Определяются те объекты, у которых ’SomeValue’ расположен в самом начале. |
[attr$=’SomeValue’] | Аналогично предыдущему, только расположение в конце. |
[attr~=’SomeValue’] | Выбирает все объекты, у которых в атрибуте есть значение, состоящее из ’SomeValue’. Т.е после данного селектора через пробел могут находиться еще слова, например, $(«a[id~='ColBlue']„) => id=“ColBlue selected». |
[attr*=’SomeValue’] | Находит элементы с подстрокой ’SomeValue’. |
[attr|=’SomeValue’] | Выборка из объектов либо с указанным селектором, либо с перечнем, написанным через дефис, где ’SomeValue’ стоит первым. |
Всевозможные методы фильтрации
Несмотря на обширный список инструментов управления выборками, в jQuery предусмотрены и методы. Я расскажу о некоторых из них.Filter (condition)
Параметром данного метода выступает условие, по которому будет производиться фильтрация. Элементы, которые не подходят под правила отбора, просто исключаются из выборки. В качестве условия можно указать любой селектор, jQuery или функцию.
Slice (x, y)
Благодаря данному механизму можно указывать диапазон значений, с которыми будут производиться какие-то действия. Заметьте, что отсчет начинается с нуля. При этом если не указан параметр y, то «ползунок» метода выбора диапазона захватывает все объекты, начиная с позиции x и заканчивая концом выборки.
has (embedded element)
Этот метод проверяет, есть ли прописанный вложенный элемент в блоке/объекте, который проверяется. К примеру, вот такой строкой кода
«$('div').has ('ol').css (…);»
будет совершен поиск тега <ol> в <div>.
find (SomeObject)
Обычный метод для поиска выбранных селекторов, элементов или объектов jQuery. После выполнения он возвращает новую сформированную выборку, состоящую из результатов поиска.
Работа с коллекциями
Напоследок хочу рассказать об очень удобном инструменте управления выборками. Своей работой он напоминает цикл перебора элементов, только вот пишется в одну строку. Это метод each ().
В качестве параметра он принимает function (i, param), где i – индексы, а param – выборка. Его очень часто используют во различных задачах, например, для выбора каждой картинки слайдера или форматирования каждого поля формы регистрации.
В данной программе проанализируйте работу метода each.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html> <html> <head> <title>actions</title> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <style> body { text-align: center; font-size: 29px; width: 23%; margin-left: 39%; } </style> </head> <body> <div id="options"> <p >Talking</p> <p >Walking</p> <p >Studing</p> <p >Running</p> <p >Sleeping</p> </div> <script> $(function(){ $("p").each(function(index, elem){ $(this).css('background-color', 'orange'); }); }); </script> </body> </html> |
Также реокмендую курс Евгения Попова Javascript + jQuery для начинающих, по ссылке. Я сам начинал учиться по нему и поэтому рекомендую и вам. Евгений объясняет все понятно и подробно, для новичков.
На этом публикация подошла к концу. Вступайте в ряды моих подписчиков и рассказывайте о моем блоге друзьям. Пока-пока!
С уважением, Роман Чуешов
Имена классов cherry и plum засовываются в переменную. Вобще-то имена классов особенно тега div часто совпадают на одной странице. Авторам надо быть внимательными. Как то ненадёжно к ним обращаться по одному имени класса.