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

16.06.2021

10.8K

Содержание:

Базовые фильтры 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').

Базовые фильтры jQuery

Примеры

Фильтр по дочерним элементам

Примеры

Фильтры содержимого

Примеры

Фильтры видимости

:hidden

:visible

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

:button

:checkbox

:checked

:disabled

:enabled

:file

:focus

:image

:input

:password

:radio

:reset

:selected

:submit

:text

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