Доброго времени суток, гики веб-разработки и гости моего обучающего блога. Сегодняшняя публикация будет посвящена очень важной теме, без изучения которой дальнейшая работа с библиотекой 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 часто совпадают на одной странице. Авторам надо быть внимательными. Как то ненадёжно к ним обращаться по одному имени класса.