Псевдоклассы

В библиотеке jQuery используются следующие псевдоклассы, определенные в CSS.

  • :nth-child(N) — элемент, являющийся N-м дочерним элементом своего родительского элемента. Нумерация элементов начинается с 1. В качестве параметра можно указать индекс или два специальных слова:
  • even — все четные элементы;
  • odd — все нечетные элементы.

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

$("ul li:nth-child(odd)").css("color", "red");

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

<Сколько элементов>n+<Начальная позиция>

Выделим каждый третий пункт списка, начиная со второго.

$("ul li:nth-child(3n+2)").css("color", "red");

В итоге будут выделены пункты 2-й, 5-й, 8-й и т.д.

  • :first-child — элемент, являющийся первым дочерним элементом своего родительского элемента. Выделим первый пункт списка шрифтом красного цвета.
$("ul li:first-child").css("color", "red");
  • :last-child — элемент, являющийся последним дочерним элементом своего родительского элемента. Выделим последний пункт списка шрифтом красного цвета.
$("ul li:last-child").css("color", "red");
  • :only-child — элемент, являющийся единственным дочерним элементом своего родительского элемента.
$("ul li:only-child").css("color", "red");

Пункт списка будет выведет шрифтом красного цвета, если других пунктов нет.

  • :empty — пустой элемент.
$("div:empty").text("Пустой DIV");

Во всех пустых элементах DIV выводим текст "Пустой DIV".

<div>Текст</div>
<div>
</div>
<div></div>

В этом примере текст будет выведен только в последнем элементе DIV.

  • :not(Селектор) — элемент не соответствующий селектору.
$("a:not(#link1)").css("color", "red");

Все ссылки в документе станут красного цвета, за исключением элемента с идентификатором link1.

  • :has(Селектор) — все элементы, содержащие хотя бы один элемент, соответствующий селектору.
$("div:has(a)").css("background-color", "red");

Выделяем все элементы DIV, в которых содержится хотя бы одна ссылка.

Для привязки к элементам формы предназначены следующие псевдоклассы.

  • :input — все элементы формы (теги <input>, <select>, <textarea>, <button>).
  • :text — все текстовые поля (type="text").
  • :password — все поля для ввода паролей (type="password").
  • :radio — все переключатели (type="radio").
  • :checkbox — все поля для установки флажков (type="checkbox").
  • :submit — все кнопки для отправки формы (type="submit").
  • :reset — все кнопки очистки формы (type="reset").
  • :button — все обычные кнопки (type="button", а также теги <button>).
  • :file — все поля для отправки файлов (type="file").
  • :enabled — активный элемент.
  • :disabled — неактивный элемент. В качестве примера выведем в активном текстовом поле текст "Активный элемент", а в неактивном — текст "Неактивный элемент".
$(document).ready(function() {
   $("#txt1")[0].disabled = true;
   $(":text:enabled").val("Активный элемент");
   $(":text:disabled").val("Неактивный элемент");
});
<input id="txt1" type="text"><br>
<input id="txt2" type="text">

После формирования структуры документа делаем неактивным элемент с идентификатором txt1. Затем, в зависимости от активности элемента, выводим соответствующее сообщение с помощью метода val().

  • :checked — отмеченный элемент (например, установленный флажок). Выведем количество установленных флажков.
alert($(":checkbox:checked").length);
  • :selected — все выбранные элементы списка (тег <select>). Выведем текст пункта списка после его выбора.
$(document).ready(function() {
   $("#sel1").change(function() {
      alert($("#sel1 option:selected").text());
   });
});
<select id="sel1">
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
<option>Пункт 4</option>
</select>

Рассмотрим другие псевдоклассы.

  • :even — все четные элементы (элементы нумеруются с 0).
  • :odd — все нечетные элементы (элементы нумеруются с 0). В качестве примера назначим разные стилевые классы четным и нечетным строкам таблицы.
$("table tr:even").addClass("clsEven");
$("table tr:odd").addClass("clsOdd");
  • :eq(Индекс) и :nth(Индекс) — элемент с указанным индексом (элементы нумеруются с 0). Выделим третий пункт списка.
$("ul li:eq(2)").css("color", "red");

Выделим первый пункт списка.

$("ul li:nth(0)").css("color", "red");
  • :gt(Индекс) — элементы с индексом, большим, чем указан (элементы нумеруются с 0). Выделим все пункты списка, кроме первого.
$("ul li:gt(0)").css("color", "red");
  • :lt(Индекс) — элементы с индексом, меньшим, чем указан (элементы нумеруются с 0). Выделим первые два пункта списка.
$("ul li:lt(2)").css("color", "red");
  • :first — первый элемент.
  • :last — последний элемент.
  • :parent — все элементы, у которых есть дочерние элементы (включая текст).
  • :contains('Текст') — все элементы, которые содержат указанный текст в любом месте. Выделим пункты списка, которые содержат фрагмент "Пункт 1".
$("ul li:contains('Пункт 1')").css("color", "red");

В этом случае будут выделены пункты, содержащие также текст "Пункт 11", "Пункт 12" и т.д.

  • :visible — все видимые элементы (элементы с атрибутом display равным block или inline, а также элементы с атрибутом visibility равным visible).
  • :hidden — все невидимые элементы (элементы с атрибутом display равным none, элементы с атрибутом visibility равным hidden, а также скрытые элементы форм (type="hidden")).
  • :header — все заголовки (теги <h1>...<h6>). Выделим все заголовки шрифтом белого цвета на черном фоне.
$(":header").css({ backgroundColor:"black", color:"white" });
  • :animated — все элементы, с которыми выполняется анимация. Прервем все анимации.
$(":animated").stop(true, true);

Самоучитель по jQuery
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF

Помощь сайту

Yandex-деньги: 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

Поиск по сайту в Яндексе