И снова здравствуйте!
Продолжаем изучать каким образом происходит поиск элементов в структуре документа. А именно - как это сделать быстро и лаконично с помощью jQuery.
На прошлом уроке мы рассмотрели селекторы, с помощью них можно быстро составить выражение, чтобы получить практически любой элемент. Но можно сделать еще более тонкую и точную выборку, добавив к селекторам фильтры.
С помощью фильтров можно уточнить результат выборки по селекторам. То есть фильтры работают в паре с селекторами.
По своему назначению они очень смахивают на псевдоклассы в CSS и это не случайно. Авторы jQuery продублировали синтаксис почти всех псевдоклассов в CSS , ведь с ним многие знакомы и не придется изучать новый набор команд.
Итак, рассмотрим, какие бывают фильтры.
Простые фильтры
| Фильтр | Описание |
|---|---|
| :first | Вернет первый элемент. |
| :last | Вернет последний элемент. |
| :focus | Этот возвращает только элементы, которые находятся в фокусе |
| :eq(index) | Соответствует элементу, занимающему позицию под номером index. Нумерация элементов начинается с 0. То есть :eq(0) будет идентичен фильтру :first |
| :not(selector) | Исключает элементы удовлетворяющие селектору selector из найденных элементов. |
| :even | Вернет элементы с четными номерами позиций. *Но поскольку счет элементов начинается с 0 :even будет соответствовать 1, 3 и т. д. элементам. |
| :odd | Соответствует элементам с нечетными номерами позиций, но опять же из-за первого индекса 0 :odd будет соответствовать 2, 4 и т. д. элементам. |
| :gt(n) | Фильтрует набор выбранных элементов, оставляя только те, индекс которых превышает n. |
| :animated | Соответствует элементам, которые в данный момент участвуют в анимации. |
| :hidden | Соответствует всем скрытым элементам страницы. |
Иногда можно встретить такую запись $(":hidden"), хотя селектор здесь и не указывается явно , будет автоматически заменяться на $("*:hidden") - что означает, применить фильтр hidden абсолютно ко всем элементам DOM на странице * и это будет работать значительно медленнее чем любые другие выборки. Так мы делать не будем.
Проверим, как работают некоторые фильтры на практике. Для это изобразим простенький светофор.
<html>
<head>
<title>Фильтры</title>
<meta charset="UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
.circle{
width: 50px;
height: 50px;
border-radius: 25px;
border: 1px solid #555;
margin: 9px auto;
}
.semafor{
width: 80px;
height: 200px;
margin: 100px;
border: 1px solid #555;
}
</style>
</head>
<body>
<div class="semafor">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div>
<span>golos</span> - <span>это</span> <span>социальная</span> <span>платформа</span>, <span>основанная</span> на <span>блокчейне</span>
</div>
</body>
</html>
А теперь зажгем на нем зеленый свет
Запишем в наш документ скрипт, который добавляет стиль последнему блоку с классом .circle:
<script>
$(function(){
$('.circle:last').attr('style', 'background: green;');
});
</script>
Результат:
Применив фильтр :odd - зажгем желтый.
$('.circle:odd').attr('style', 'background: yellow;');
Мы помним, что нумерация элементов начинается с 0, поэтому :odd окрасил сразу второй элемент
Результат:
Фильтры по содержимому
| Фильтр | Описание |
|---|---|
| :contains(text) | Соответствует элементам, которые содержат строку text. Регистр учитывается. |
| :empty | Соответствует элементам, которые не содержат текста и других элементов. |
| :has(selector) | Выберет элементы, которые обладают потомками, удовлетворяющими селектору selector. |
| :parent | Выберет все непустые элементы. |
Проверим как работает фильтр :contains()
Для этого окрасим элемент, содержащий слово golos в красный цвет, а элемент со словом блокчейне в желтый
Код будет выглядеть так:
$('div span:contains(golos)').attr('style', 'background: #f55;');
$('div span:contains(блокчейне)').attr('style', 'background: yellow;');
Результат
Фильтры по дочерним элементам или child-фильтры
| Фильтр | Описание |
|---|---|
| :nth-child(n) | Выбираются все элементы, которые являются n-нными потомками своего родителя или четными/нечетными потомками. В качестве параметра можно передать число (порядковый номер) либо строку указывающую на правило выборки (index/even/odd/equation). |
| :first-child | Выбираются все элементы, которые являются первыми потомками своих родителей. |
| :last-child | Выбираются все элементы, которые являются последними потомками своих родителей. |
| :only-child | Выбираются все элементы, которые являются единственными потомками своего родителя. |
Вернемся к нашему светофору и заставим первый элемент .circle мигать красным цветом
Заметьте, что в фильтр :nth-child(1) для получения первого элемента необходимо передать 1, а не 0.
setInterval(function(){
$('.circle:nth-child(1)').attr('style', 'background: red;')
.animate({opacity:"hide"}, 500)
.animate({opacity:"show"}, 500);
}, 1000);
Результат:
Цепочка вызовов
Как вы наверное заметили, в последнем примере мы применили последовательный вызов метода animate - данный прием называется цепочка вызовов и широко применяется в написании скриптов на Javascript и jQuery.
Построение таких цепочек возможно благодаря тому, что большинство методов в библиотеке jQuery возвращают исходный набор выбранных элементов, к которому можно применять следующие методы, затем следующие и.т.д.
На этом пока остановимся, надеюсь, что урок был полезен для вас. На следующем уроке поговорим об оптимизации выборок элементов в jQuery
С предыдущими уроками можно ознакомиться по ссылкам:
Вступление
Селекторы и поиск элементов
Всегда рад Вашему вниманию, голосуйте и комментируйте.
Подписывайтесь, дальше здесь будет очень интересно.
Привет!
Этот пост был выбран Академией Голоса и попал в список программы поддержки качественных образовательных постов.
Ссылка на твой пост будет опубликована в отчете Академии.
Спасибо за полезный контент (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧
Спасибо