Фильтры элементов

Фильтры элементов предназначены для фильтрации (я кэп хД) нужных элементов на HTML страницах. Ими пользуются редко, поскольку выгоднее обращаться к элементам по их id и class параметрам. Однако для обращения к элементам удаленной страницы (где мы сами не можем расставить айди и классы) фильтры могут оказаться очень полезными, если не сказать, незаменимыми.

eq(#) — передает элемент с нужным порядковым номером
p:eq(5) — обращается к шестому параграфу страницы. Почему к шестому, а не к пятому? Потому что отсчет идет с нуля. То есть, если вы захотите выделить шестой от начала страницы параграф красным цветом, то код будет выглядеть так: $('p:eq(5)').css('color','red');

lt(#) и gt(#) — передадут все аналогичные элементы до и после элемента с заданным порядковым номером
$('p:lt(5)').css('color','red'); — окрасит первый, второй, третий, четвертый и пятый параграфы красным цветом
$('p:gt(5)').css('color','blue'); — окрасит седьмой, восьмой, девятый и т.д. параграфы синим цветом

first и last — передадут первый и последний элементы страницы
$('p:first').css('color','red'); — окрасит самый первый параграф на странице в красный цвет
$('p:last').css('color','blue'); — окрасит самый последний параграф на странице в синий цвет

even и odd — вернет все четные и нечетные элементы страницы
$('p:even').css('color','red'); — окрасит первый, третий, пятый, седьмой и все нечетные параграфы в красный
$('p:odd').css('color','blue'); — окрасит второй, четвертый, шестой, восьмой и все четные параграфы в синий
Поскольку отсчет ведется с нуля (а 0 в jQuery считается четным числом), то четный и нечетный фильтр как бы поменялись местами О_о Но на практике вы быстро разберетесь и исправите фильтр под свои нужды. Его удобно использовать для оформления лент комментариев. Они такие полосатые получаются)

not(element) — обратится ко всем элементам страницы, кроме заданного
$('*:not(p)').css('color','red'); — окрасить все элементы страницы красным цветом, кроме параграфов
Этот фильтр очень гибкий. Я часто использую его для оформления элементов формы, где текстовые поля нужно оформлять не так, как чекбоксы и радио свитчеры.

header — обратится ко всем заголовкам страницы: h1, h2, h3, h4, h5, h6
$('*:header').css('color','red'); — окрасит заголовки всех размеров на странице в красный цвет
Оно вам надо? По-моему, лишнее. Это для тех, кому лень писать 12 символов, чтобы перечислить все заголовки хД

animated — обращение ко всем динамическим элементам страницы
$('*:animated').css('color','red'); — окрасит красным все динамические (то есть двигающиеся, анимированные элементы страницы). В общем, если на каких-то элементах страницы применены двигательные функции вроде слайда, то они окрасятся.

Для того, чтобы опробовать фильтры в деле, я сконструировала небольшой практический тестер. Отфильтрованные элементы будут выделены красным.

Параграф первый с порядковым номером 0 Параграф второй с порядковым номером 1 Параграф третий с порядковым номером 2 Заголовок H3 Параграф четвертый с порядковым номером 3 Параграф пятый с порядковым номером 4 Параграф шестой с порядковым номером 5 Анимированная фигнюшка ^^

СБРОС p:eq(2) параграф №2 p:lt(3) параграфы до №3 p:gt(2) параграфы после №2 p:first первый параграф p:last последний параграф p:even четные параграфы p:odd нечетные параграфы not(:header) не заголовок :header только заголовок :animated только анимация