Персональный блог Мэдисон jQuery Фильтры элементов
Разделы Сайта АниДо

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

Фильтры элементов предназначены для фильтрации (я кэп хД) нужных элементов на 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

Анимированная фигнюшка ^^

параграф №2
параграфы до №3
параграфы после №2
первый параграф
последний параграф
четные параграфы
нечетные параграфы
не заголовок
только заголовок
только анимация

Рубрика: jQuery | Просмотров: 3821 | Автор: Shizuku | Рейтинг: 5.0/1
Теги: first, even, selector, Filter, Last, Not, jQuery, lt, GT, odd


Комментарии:

0 good bad
no avatar Ghandi | 20.11.13 02:34
Анимированная фигнюшка =)
Спасибо, очень помогло!

Имя:
E-mail:
Сайт:
Текст:
Каптча:
0

Категории Разделов АниДо
HTML [0]
HyperText Markup Language
XML [0]
Extensible Markup Language
XSL [0]
Extensible Stylesheet Language
CSS [1]
Cascading Style Sheets
PHP [0]
PHP: Hypertext Preprocessor
SQL [0]
Structured Query Language
ASP [0]
Active Server Pages
ActionScript [0]
Action Script
JavaScript [0]
Java Script
jQuery [3]
jQuery
0

Новые Посты АниДо
0

Аниме Наруто

В этом блоге публикуются полезные заметки о
программировании, дизайне и сайтостроении, а также
переводы манги, видео и электронных книг на русский.
Все права на текстовый контент принадлежат хозяйке сайта. При копировании материалов с этого сайта обязательна активная ссылка на источник!
Google · Автор дизайна Evan Eckard, а Хостинг от uCoz