Фильтры для выбора элементов в jQuery

Для выбора элементов, кроме селекторов можно ещё использовать фильтры. Рассмотрим базовые фильтры, фильтры по дочерним элементам и содержимому, фильтры видимости и для элементов формы.
Базовые фильтры jQuery
В jQuery имеются следующие базовые фильтры:
:animated
– выбирает элементы, которые в данный момент находятся в процессе анимации;:header
– выбирает элементы, которые являются заголовками, т.е.<h1>
,<h2>
,<h3>
и т.д.;:lang
– выбирает элементы, имеющие указанный язык;:not
– выбирает элементы, не соответствующие заданному селектору;:root
– выбирает элемент являющийся корневым в документе (в HTML – это<html>
);:target
– выбирает элемент, идентификатор которого равен хэшу URL.
Фильтры :animated
и :header
не являются стандартным CSS селекторами. Они реализованы в jQuery. При их использовании снижается производительность, поэтому в выборке не рекомендуется их использовать. Вместо этого предпочтительнее воспользоваться методом filter
и выполнить фильтрацию с помощью них уже после получения набора элементов:
.filter(':animated') .filter(':header')
Примеры
1. Получим <div>
, которые в данный момент находятся в процессе анимации:
var $set1 = $('div:animated'); // лучше так var $set2 = $('div').filter(':animated');
2. Выберем заголовки, расположенные в <main>
:
var $set1 = $('main :header'); // лучше так var $set2 = $('main *').filter(':header');
3. Найдём все <p>
, имеющие lang="ru"
:
<p lang="ru">...</p> <p lang="fr">...</p> <p>...</p> <script> var $p = $(':lang("ru")'); </script>
Для элементов значение языка определяется атрибутом lang
и, возможно, информацией из <meta>
или заголовка HTTP.
4. Выполним поиск <span>
, которые расположены сразу же после <input>
на одном уровне вложенности за исключением тех у которых <input>
в состоянии checked
:
<form> <div> <input type="checkbox" name="a"> <span>A</span> </div> <div> <input type="checkbox" name="b" checked="checked"> <span>B</span> </div> </form> <script> var $span = $('input:not(:checked) + span'); </script>
При этом внутри :not
принимаются все селекторы, например: :not(section div)
, :not(section, div)
.
5. Выведем в начало <body>
имя узла, который является корневым для этого документа:
$('body').prepend($(':root').eq(0).prop('nodeName')); // Корень этого документа: HTML
6. Найдём элемент на который указывает хэш URL #section-2
:
<div id="section-1">...</div> <div id="section-2">...</div> <div id="section-3">...</div> <script> var $target = $(':target'); </script>
Фильтр по дочерним элементам
В jQuery имеются следующие фильтры по дочерним элементам:
:first-child
– выбирает все элементы, которые являются первыми дочерними элементами своего родителя;:first-of-type
– выбирает все элементы, которые являются первыми элементами указанного типа своего родителя;:last-child
– выбирает все элементы, которые являются последними дочерними элементами своего родителя;:last-of-type
– выбирает все элементы, которые являются последними элементами указанного типа своего родителя;:nth-child
– выбирает элементы по их порядковому номеру в родителе;:nth-last-child
– выбирает элементы по их порядковому номеру в родителе, но в отличие от:nth-child
отсчёт вёдется не с начала, а с конца;:nth-last-of-type
– предназначен для выбора элементов по их порядковому номеру в родителе с учетом их типа, при этом в отличие от:nth-of-type
отсчёт ведётся с конца;:nth-of-type
– предназначен для выбора элементов по их порядковому номеру в родителе с учетом их типа;:only-child
– выбирает все элементы, которые являются единственными дочерними элементами своего родителя;:only-of-type
– выбирает элементы, которые являются единственными дочерними элементами данного типа своего родителя.
Примеры
1. Выберем все <div>
, которые являются единственными дочерними элементами данного типа своего родителя:
<section> <div>...</div> <div> <div>...</div> <div>...</div> </div> <div>...</div> </section> <script> var $elements = $('div:first-child'); </script>
2. Найдём все <div>
, являющиеся первыми дочерними элементами указанного типа своего родителя:
<section> <h2>...</h2> <div>...</div> <div>...</div> </section> <script> var $elements = $('div:first-of-type'); </script>
3. Выполним поиск <p>
, являющиеся последними дочерними элементами своего родителя:
<div> <h2>...</h2> <p>...</p> <p>...</p> </div> <script> var $elements = $('p:last-child'); </script>
4. Выберем все <h2>
, являющиеся последними дочерними элементами указанного типа своего родителя:
<section> <h2>...</h2> <p>...</p> <h2>...</h2> <p>...</p> </section> <script> var $elements = $('h2:last-of-type'); </script>
5. Найдём <li>
, являющиеся 2 дочерними элементами своего родителя:
<ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> <script> var $elements = $('li:nth-child(2)'); </script>
Кроме указания порядкового номера элемента, в :nth-child
ещё можно использовать odd
, even
и формулу an+b
.
odd
используется для выбора нечётных элементов, even
– чётных, an+b
– по формуле.
В формуле вместо a
и b
указываются числа, а n
выступает в качестве счётчика (0, 1, 2, ...).
Например, 2n+1
выберет элементы, которые имеют следующие порядковые номера в своём родителе: 1, 3, 5, 7 и т.д.
Фильтры :nth-last-child
, :nth-of-type
, :nth-last-of-type
в качестве аргумента могут принимать такие же значения как :nth-child
.
6. Найдём <p>
, являющиеся дочерними элементами своего родителя и имеющие порядковые номера, определяемые по формуле 3n
(отсчёт необходимо выполнять с конца):
var $elements = $('p:nth-last-child(3n)');
7. Выполним поиск <p>
, являющиеся чётными дочерним элементами указанного типа своего родителя:
var $elements = $("p:nth-of-type(even)');
8. Найдём <li>
, являющиеся нечётными дочерним элементами указанного типа своего родителя (отсчёт необходимо выполнять с конца):
var $elements = $('p:nth-last-of-type(odd)');
9. Выберем <div>
, которые являются единственными дочерними элементами своего родителя:
var $elements = $('div:only-child');
10. Выберем <p>
, которые являются единственными дочерними элементами указанного типа своего родителя:
var $elements = $('p:only-of-type');
Фильтры содержимого
В jQuery имеются следующие фильтры содержимого:
:contains
– выбирает элементы, имеющие указанный текст;:empty
– выбирает элементы, которые не содержат дочерних узлов (включая текстовых);:has
– выбирает элементы, которые содержат хотя бы один элемент, соответствующий указанному селектору;:parent
– выбирает элементы, имеющие дочерние узлы (элемент или текст). Т.е. выполняет действия противоположные фильтру:empty
.
Фильтры :has
и :parent
не являются стандартным CSS селекторами. Они реализованы в jQuery. При их использовании снижается производительность, поэтому в выборке не рекомендуется их использовать. Предпочтительнее выполнить фильтрацию после получения набора элементов.
Вместо фильтра :has
лучше использовать метод has
:
.has(selector/DOMElement)
Фильтровать с помощью :parent
рекомендуется так:
.filter(':parent')
Примеры
1. Выберем <p>
с текстом «груша»:
<p>Фрукты: банан, груша и персик.</p> <p>Овощи: капуста, огурец и помидор.</p> <p>Ягоды: вишня, клубника и облепиха.</p> <script> var $elements = $('p:contains("персик")'); </script>
2. Найдём все пустые <p>
:
<p>...</p> <p></p> <p>...</p> <script> var $empty = $('p:empty'); </script>
3. Выполним поиск <section>
, которые содержат <h2>
:
<section> <h2>...</h2> <p>...</p> </section> <section> <p>...</p> </section> <script> var $elements = $('section:has(h2)'); // лучше так // var $elements = $('section').has('h2'); </script>
4. Выберем все непустые <p>
:
<p>...</p> <p></p> <p>...</p> <script> var $notEmpty = $('p:parent'); // лучше так // var $notEmpty = $('p').filter(':parent'); </script>
Фильтры видимости
В jQuery имеются следующие фильтры видимости:
:hidden
;:visible
.
Фильтр :hidden
и :visible
не являются стандартными CSS селекторами.
Их рекомендуется использовать после выборки элементов следующим образом:
// :hidden .filter(':hidden') // :visible .filter(':visible')
:hidden
:hidden
- выбирает элементы, которые в данный момент являются скрытыми.
Элемент считается скрытым, если:
- CSS-свойство
display
имеет значениеnone
; - является элементом формы с
type="hidden"
; - скрыт элемент-предок;
- он только создан, но ещё не добавлен на страницу;
- он является
option
, при этом независимо от того имеет он состоянияselected
или нет.
Элементы с visibility:hidden
или opacity:0
считаются видимыми, поскольку они занимают место на странице.
Во время анимации, в которой осуществляется скрытие элемента, он считается видимым до её завершения.
Во время анимации, в которой выполняется отображение элемента, он считается видимым с её начала.
Например, выберем все скрытые элементы <div>
на странице:
<div>...</div> <div style="display: none;"></div> <div style="visibility: hidden;">...</div> <script> var $hiddenElems = $('div:hidden'); // лучше так // var $hiddenElems = $('div').filter(':hidden'); </script>
:visible
:visible
– выбирает элементы, которые в данный момент являются видимыми.
Этот фильтр противоположен :hidden
.
Например, выберем все видимые элементы <div>
на странице:
<div>...</div> <div style="display: none;"></div> <div style="visibility: hidden;">...</div> <script> var $visibleElems = $('div:visible'); // лучше так // var $visibleElems = $('div').filter(':visible'); </script>
Фильтры для элементов формы
В jQuery имеются следующие фильтры для элементов формы:
- по типу (
:button
,:checkbox
,:file
,:image
,:input
,:password
,:radio
,:reset
,:submit
,:text
); - по состоянию (
:checked
,:disable
,:enabled
,:focus
,:selected
).
Фильтры :button
, :checkbox
, :file
, :image
, :input
, :password
, :radio
, :reset
, :selected
, :submit
и :text
являются расширениями jQuery. Вместо них рекомендуется для обеспечения максимальной производительности использовать стандартные CSS селекторы.
:button
:button
– выбирает элементы button и с type="button"
.
Селектор $(':button')
эквивалентен $('button, input[type="button"]')
.
:checkbox
:checkbox
– выбирает элементы с type="checkbox"
.
Селектор :checkbox
эквивалентен [type="checkbox"]
.
:checked
:checked
выбирает элементы с состоянием checked
или selected
. Селектор :checked
работает для флажков (type="checkbox"
), переключателей (type="radio"
) и элементов <select>
.
Если нужно получить только выбранные опции элементов <select>
, то используйте фильтр :checked
.
Пример выбора элементов с использованием фильтра :checked
:
<form> <input type="checkbox" name="os[]">Windows <input type="checkbox" name="os[]" checked="checked">MacOS <input type="checkbox" name="os[]">Linux </form> <script> var $checked = $('input:checked'); </script>
:disabled
:disabled
– выбирает неактивные элементы (т.е. находящиеся в состоянии disabled
).
Несмотря на то, что результирующие выборки обычно одинаковы, фильтр :disabled
отличается от селектора по атрибуту [disabled]
.
:disabled
выбирает элементы которые фактически отключены (DOM-свойство disabled
имеет значение true
), а [disabled]
– элементы, у которых данный атрибут присутствует.
Фильтр :disabled
следует использовать только для выбора HTML-элементов, которые поддерживают атрибут disabled
: <button>
, <input>
, <optgroup>
, <option>
, <select>
, <textarea>
и <fieldset>
.
Например, получим все неактивные элементы <input>
:
<form> <input type="text" name="login" disabled="disabled"> <input type="password" name="password"> </form> <script> var $elements = $('input:disabled'); </script>
:enabled
:enabled
– выбирает активные элементы (т.е. не находящиеся в состоянии disabled
).
Несмотря на то, что результирующие выборки обычно одинаковы, фильтр :enabled
отличается от :not([disabled])
. :enabled
выбирает элементы, у которых DOM-свойство disabled
имеет значение false
, а :not([disabled])
– элементы, которых отсутствует атрибут disabled
.
Например, получим все активные элементы <input>
:
<form> <input type="text" name="login" disabled="disabled"> <input type="password" name="password"> </form> <script> var $elements = $('input:enabled'); </script>
:file
:file
– выбирает элементы с type="file"
.
Селектор :file
эквивалентен [type="file"]
.
:focus
:focus
выбирает элемент, если он в данный момент находится в фокусе.
Другой способ без необходимости его поиска по всему DOM-дереву:
var $focus = $(document.activeElement);
:image
:image
– выбирает элементы с type="image"
.
Селектор :image
эквивалентен [type="image"]
.
:input
:input
– выбирает элементы input
, textarea
, select
и button
.
Выбрать все эти элементы без использования :input
можно так:
var $input = $('input, textarea, select, button');
:password
:password
– выбирает элементы с type="password"
. Фильтр :password
эквивалентен [type="password"]
.
:radio
:radio
выбирает элементы с type="radio"
. Фильтр :radio
эквивалентен [type="radio"]
.
:reset
:reset
выбирает элементы с type="reset"
. Фильтр :reset
эквивалентен [type="reset"]
.
:selected
:selected
выбирает элементы <option>
, которые находятся в состоянии selected
.
<select name="colors" multiple="multiple"> <option>Красный</option> <option selected="selected">Оранжевый</option> <option>Желтый</option> <option selected="selected">Зеленый</option> <option>Голубой</option> </select> <script> var $selected = $('select[name="colors"]>option:selected'); </script>
:submit
:submit
выбирает элементы с type="submit"
. Фильтр :submit
предназначен для элементов <button>
или <input>
.
Селектор :submit
эквивалентен input[type="submit"], button[type="submit"]
.
:text
:text
выбирает элементы с type="text"
и все элементы <input>
без атрибута type
(т.к. в этом случае он имеет по умолчанию атрибут type="text"
).
Перед селектором :text
так и перед другими, которые начинаются с :
, рекомендуется указывать тег или другой селектор (например, класс), чтобы ограничить диапазон поиска. Т.к., если этого не сделать, то будет подразумеваться универсальный селектор, т.е. *:text
.
В этом случае рекомендуется как минимум использовать селектор input
: $('input:text')
.