Псевдокласы и селекторы

Селекторы :first, :first-child, :last, :eq, :lt, :gt, :even, :odd

jQuery поддерживает все стандартные селекторы CSS, псевдоклассы, псевдоэлементы.

В дополнение к ним jQuery поддерживает нестандартные селекторы (псевдоклассы), которые позволяют расширить селекторы CSS.

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

$('li:first');

Есть более стандартный псевдокласс :first-child:

$('li:first-child');

С помощью :first-child мы найдем все li, которые являются первыми потомками своих родителей, с помощью :first мы найдем первый li среди выбранных, так как выбирали мы все li, по сути мы найдем первый li на странице.

:first и другие подобные селекторы jQuery работают так, находят все элементы по заданному селектору, а затем берут первый элемент среди найденных.

Аналогичным образом работает :last, только он находит не первый элемент, а последний.

С помощью :eq мы можем выбрать элемент с любым номером в наборе, к примеру таким образом :eq(3) мы выберем третий найденный элемент.

С помощью :lt и :gt можно выбирать элементы с номером, меньшим или большим заданного числа соответственно. К примеру таким образом :lt(3) мы выберем элементы с номером меньшим трех.

С помощью :even и :odd можно выбирать четные и нечетные элементы в наборе.

Псевдокласс :header

Псевдокласс :header выбирает одновременно все заголовки от h1 до h6.

Псевдокласс :has

Псевдокласс :has выбирает элементы по их содержимому, можно выбрать все абзацы, внутри которых есть теги b:

<p>Абзац с тегом <b>b</b>.</p>
<p>Абзац с тегом <i><b>b</b></i>.</p>
<p>Абзац без b.</p>

<script>
$('p:has(b)')
</script>

Обратите внимание, в примере выберется как первый абзац, так и второй, не смотря на то, что во втором абзаце тег b не лежит непосредственно внутри p, а лежит сначала в i. Если же вам нужна непосредственная вложенность, то следует сделать так:

<p>Абзац с тегом <b>b</b>.</p>
<p>Абзац с тегом <i><b>b</b></i>.</p>
<p>Абзац без b.</p>

<script>
$('p:has(>b)');
</script>

Псевдокласс :contains

Псевдокласс :contains выбирает элементы по наличию определенного текста в них. В следующем примере мы выберем абзац, внутри которого есть слово текст:

<p>Слово "текст".</p>
<p>Просто абзац.</p>

<script>
$('p:contains("текст")');
</script>

С помощью :contains() элемент будет выбран, если строка присутствует непосредственно внутри него или если она находится внутри одного из его потомков.

Псевдоклассы :empty, :parent

Псевдокласс :empty позволяет выбрать все пустые элементы в которых нету текста, а псевдокласс :parent - наоборот, все непустые, он выбирает все элементы, являющиеся родителями.

Метод .parent()

Кроме псевдокласса :parent существует еще и метод .parent(), который позволяет выбрать родителя элемента. Найдем родителя тега b и поставим ему красный цвет:

<p>Абзац с тегом <b>b</b>.</p>
<p>Абзац без b.</p>

<script>
$('b').parent().css('color', 'red');
</script>