Фильтры jQuery

Последнее обновление: 1.11.2015

В дополнение к селекторам применяются фильтры. Фильтры позволяют отфильтровать найденные элементы по определенному принципу.

Применять фильтры также просто, как и селекторы. Например, мы можем получить элементы только с четными индексами:

<!DOCTYPE html>
<html>
<head>
<title>Мир jQuery</title>
</head>
<body>
<table>
<tr><td>Слово</td><td>Перевод</td></tr>
<tr><td>Cabbage</td><td>Капуста</td></tr>
<tr><td>Carrot</td><td>Морковь</td></tr>
<tr><td>Potato</td><td>Картофель</td></tr>
<tr><td>Tomato</td><td>Помидор</td></tr>
</table>

<script src="jquery-1.10.1.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){

	$("tr:even").css('background-color', 'silver');
});
</script>
</body>
</html>

У нас есть таблица, и мы хотим выделить цветом все четные строки. В этом случае мы применяем фильтр :even. Фильтр ставится после селектора: $("tr:even"). В результате все четные строки будут окрашены серым цветом:

Поскольку нумерация объектов начинается с нуля, то поэтому первая строка будет нулевой и, таким образом, попадает в число четных.

Можно выделить следующий набор базовых фильтров:

Фильтр

Описание

:eq(n)

Выбирает n-й элемент выборки (нумерация начинается с нуля)

:even

Выбирает элементы с четными номерами

:odd

Выбирает элементы с нечетными номерами

:first

Выбирает первый элемент выборки

:last

Выбирает последний элемент выборки

:gt(n)

Выбирает все элементы с номером, большим n

:lt(n)

Выбирает все элементы с номером, меньшим n

:header

Выбирает все заголовки (h1, h2, h3)

:not(селектор)

Выбирает все элементы, которые не соответствуют селектору, указанному в скобках. Например, выражение $("tr:not(.even)") выберет все строки, у которых атрибут class не равен even.

Специальный род фильтров - фильтры контента обеспечивают доступ к элементам, имеющим определенное содержимое:

Фильтр

Описание

:contains('text')

Получает все элементы, которые содержат текст text..

:has('селектор')

Получает все элементы, которые содержат хотя бы один дочерний элемент, соответствующий селектору

:empty

Получает все элементы, которые не имеют дочерних элементов

:first-child

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

:last-child

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

:nth-child(n)

Получает все элементы, которые являются n-ными элементами в своих родителях (нумерация идет с единицы)

:nth-child(even)

Получает все элементы, которые являются четными элементами в своих родителях (нумерация идет с единицы). Так, в предыдущем примере с таблицей выражение $("tr:nth-child(even)") будет получать все те же элементы, что и выражение $("tr:odd")

:nth-child(odd)

Получает все элементы, которые являются нечетными элементами в своих родителях (нумерация идет с единицы)

:only-child

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

:parent

Получает все элементы, которые имеют, как минимум, один дочерний элемент

Например, если мы хотим получить все элементы, содержащие текст Капуста, мы можем применить следующее выражение: $(":contains('Капуста')"). Либо мы можем с помощью селекторов конкретизировать поиск, например, вести выборку только в строках: $("tr:contains('Капуста')")

И третья группа фильтров позволяют получить определенные элементы html-форм или используют их атрибуты:

Фильтр

Описание

:button

Получает все элементы button и элементы input с типом button

:checkbox

Получает все элементы checkbox

:checked

Получает все отмеченные элементы checkbox и radio

:disabled

Получает все элементы, которые находятся в неактивном состоянии

:enabled

Получает все элементы, которые находятся в активном состоянии

:file

Получает все элементы file (input type='file')

:input

Получает все элементы input

:hidden

Получает все скрытые элементы

:password

Получает все элементы password

:radio

Получает все элементы radio

:reset

Получает все элементы reset

:selected

Получает все отмеченные элементы option

:submit

Получает все элементы input с типом submit

:text

Получает все элементы input с типом text

:visible

Получает только видимые элементы

Мы можем комбинировать в одном выражении несколько селекторов и фильтров: $('#results:odd:has('img')'). В данном случае мы выбираем все нечетные элементы с id="results", которые содержат элементы img, то есть изображения.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850