Изучаем jQuery. Часть 4. Фильтры

Ромчик
0

Уроки по jQuery

Доброго времени суток. И мы продолжаем изучать столь замечательную библиотеку JavaScript — jQuery. Так мы с Вами уже умеем подключать jQuery к проекту, познакомились с основными принципами jQuery , рассмотрели основные методы выбора элементов в jQuery. А в данной статье мы остановимся на изучении фильтров, которые в дополнении к методам выборки элементов существенно помогают сузит круг выбранных элементов. Тем самым сделать выборку более точной.

Как я уже говорил фильтры являются дополнением к методам выбора элементов. И используя их мы можем наиболее эффективно выбирать элементы. И сейчас мы это увидим :). Фильтр прописывается сразу после выбора элемента через двоеточие:


$("<выбор элемента>:<фильтр>");

1. Выбор четных элементов

Самый простой пример. У нас есть таблица и мы хотим выделить четные строки, например серым цветом.

У нас есть код:


<table id="example">

<tr>

    <td>1</td>

</tr>

<tr>

    <td>2</td>

</tr>

<tr>

    <td>3</td>

</tr>

<tr>

    <td>4</td>

</tr>

</table>

Стандартным методом выбора элементов мы это сделать никак не сможем. Вот в таких случаях и используются фильтры. Для выбора четных элементов используется фильтр even. Для выбора четных строк используем следующий код:


$("#example tr:even");

Что мы сделали? Первое указали id элемента, который выбираем, в нем выбираем tr. Т.о. мы выбрали все строки в таблице с id равным example. И теперь к этой выборке мы применяем фильтр even. И в выборке у нас остаются только четные строки.

Тут будьте внимательны четные строки с позиции рассмотрения JavaScript. А в JavaScript отсчет начинается с 0. Т.е. в нашем случае будет выделена строка 1 и 3.

2. Выбор нечетных элементов

Для выбора нечетных элементов используется фильтр odd, который противоположен по назначению предыдущему.


$("#example tr:odd");

3. Фильтр отрицания

Иногда необходимо выбрать какие-то элементы, например div, кроме div, которые имеют определенный класс. Для этого используется фильтр not().

Допустим у нас есть код:


<div>1</div>

<div>2</div>

<div></div>

И мы хотим выбрать все div, кроме div с классом равным example


$('div:not(.example)');

4. Фильтр элементов, которые содержат другие элементы

Например нам необходимо выбрать div, в которых содержаться ссылки. Для этого используется фильтр has().

Например у нас есть код:


<div><a href="#">1</a></div>

<div>2</div>

Теперь нам необходимо выбрать первый div, который содержит ссылку. Для этого используем следующую конструкцию:


$('div:has(a)');

Т.е. выбираем все div, а затем из выборки оставляем с помощью фильтра has только те div, которые содержат ссылку.

5. Фильтр по содержанию определенного текста

Для этого используется фильтр contains().

Например, у нас есть код:


<p>web-programming</p>

<p>изучаем jQuery</p>

И нам надо выбрать второй абзац, в котором есть слово jQuery. Для этого используем следующий код:


$('p:contains(jQuery)');

6. Фильтр первого элемента

Иногда необходимо выбрать первый элемент, в каком-то элементе. Для этого используется фильтр first.


$('div:first');

7. Фильтр последнего элемента

Для выбора последнего элемента используется фильтр last


$('div:last');

8. Фильтр первого элемента в родительском элементе

Для того, чтобы выбрать первый элемент в родительском элементе используется фильтр first-child


$('div:first-child');

В отличие от фильтра first, который ищет первый встретившийся элемент, ищет первый элемент в родительском элементе.

9. Фильтр последнего элемента в родительском элементе

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


$('div:last-child');

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

10. Выбор скрытых элементов

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


$('div:hidden');

11. Выборка видимых элементов

Для того, чтобы из выбрать только видимые элементы используется фильтр visible. По действию аналогичен с предыдущим, а по назначению противоположен ему.


$('div:visible');

12. Выбор элемента на котором находиться фокус

Для выбора элемента который находиться в фокусе используется фильтр focus.


$("input:focus");

13. Выбор элемента по номеру в выборке

Для того, чтобы выбрать элемент по его номеру из выборки, необходимо использовать следующий код:


$("a:eq(0)") ;

В данном случае мы получим первую ссылку на странице.

14. Выбор элементов с номера больше заданного

Для тог, чтобы из выборки получить элементы с порядковым номером больше заданного используют фильтр gt(n), n — порядковый номер. Например, мы хотим получить все элементы из элемента с классом class, кроме первых 5:


$(".class:gt(4)")

15. Выбор элементов с номером меньше заданного

Противоположный фильтр предыдущему lt(n), который применяется для выбора элементов с индексом меньше заданного.

Например, мы хотим получить первые четыре элемента в элементе с классом class:


$(".class:lt(4)");

Т.е. мы получим элементы с индексами 0, 1, 2 и 3.

16. Выбор элементов, которые являются заголовками (h1, h2 …)

Если нам необходимо выбрать из выборки элементы, которые являются заголовками, то применяется фильтр header. Например мы хотим получить элементы класса class, которые являются заголовками:


$(".class:header");

Тут я бы хотел привести еще один пример:


$(".class :header");

Между .class и :header стоит пробел. И в этом случае мы получим все заголовки находящиеся в элементе с классом class. Как видите пробел между селекторм и фильром имеет огромное значение. Так, что будьте внимательны.

17. Выбор элементов, которые участвуют в анимации

Если необходимо выбрать элементы, которые на данный момент участвуют в анимации, то применяется фильтр animated. Например, нам необходимо выбрать элементы с классом class, которые на данный момент участвуют в анимации:


$(".class:animated")

18. Выбор пустых элементов

Для того, чтобы выбрать пустой элемент (не содержит ни текста, ни других элементов) используется фильтр empty.

Например нам надо выбрать все пустые div:


$("div:empty");

19. Выбор не пустого элемента

Противоположный фильтр предыдущему parent, который отбирает не пустые элементы. Внимание, если элемент содержит пробел, то он является не пустым. Например, нам надо выбрать все не пустые div:


$("div:parent");

20. Фильтр активных элементов формы

Если необходимо выбрать активные элементы формы, то применяется фильтр enabled. Например, нам необходимо выбрать все активные элементы из формы с классом class:


$(".class :enabled");

21. Фильтр неактивных элементов

Противоположный фильтр предыдущему disabled, который выбирает отключенные элементы формы. Например нам надо выбрать все отключенные элементы из формы с классом class:


$(".class :disabled");

22. Фильтр button

Используется для выбора элементов с тегом button или типом button. Например, нам необходимо выбрать все button в форме с классом class:


$(".class :button");

23. Фильтр reset

Если необходимо выбрать элемент, который сбрасывает введенные данные в форму используется фильтр reset


$("input:reset");

Данный код вернет все элементы, которые сбрасывают введенные в форму данные.

24. Фильтр submit

Для выделения кнопок, отправляющих данные формы на сервер используется фильтр submit.


$('.class :submit')

Данный код выделит все кнопки отправляющие данные формы с классом class на сервер.

25. Фильтр radio

Для выделения переключателя используется фильтр radio

26. Фильтр checkbbox

Для выделения флажков используется фильтр checkbox

27. Фильтр text

Для выделения текстовых полей используется фильтр text

28. Фильтр password

Фильтр password используется для выделения поля предназначенного для ввода пароля.

29. Фильтр file

Фильтр file используется для выделения поля предназначенного для загрузки файла

30. Фильтр input

Фильтр input вернет все элементы формы.

31. Фильтр selected

Фильтр selected вернет все выбранные элементы формы (соответствует элементам типа option)

32. Фильтр checked

Фильтр checked служит для выделения всех выбранных элементов из элемета типа checkbox.

33. Фильтр image

Фильтр image — возвращает элемент input с типом image, который при нажатии отправляет данные на сервер.

34. Фильтр расположения элемента определенным образом в родительском элементе

Для выделения дочернего элемента, который расположен в родительском определенным образом используется фильтр nth-child()

Например:


$('div:nth-child(3)')

Вернет все div, которые являются третьими по счету в родительских элементах


$('div:nth-child(odd)')

Вернет все div, которые находятся на нечетных позициях в родительском элементе.

На этом мы рассмотрели фильтры jQuery, которые в сочетании с методами выбора позволяют нам сделать более точную выборку необходимых элементов. Таким образом мы с Вами рассмотрели одну из основных частей jQuery — выбор элементов.

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

©2012-2017 По всем вопросам обращайтесь через форму обратной связи

Яндекс.Метрика