jQuery в деталях. Фильтры.

И снова здравствуйте!
Продолжаем изучать каким образом происходит поиск элементов в структуре документа. А именно - как это сделать быстро и лаконично с помощью 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

С предыдущими уроками можно ознакомиться по ссылкам:
Вступление
Селекторы и поиск элементов

Всегда рад Вашему вниманию, голосуйте и комментируйте.
Подписывайтесь, дальше здесь будет очень интересно.