Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Псевдоклассы
В библиотеке 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
).display
равнымnone
, элементы с атрибутомvisibility
равным , а также скрытые элементы форм (type="hidden"
)).
— все невидимые элементы (элементы с атрибутом :header
— все заголовки (теги<h1>...<h6>
). Выделим все заголовки шрифтом белого цвета на черном фоне.
$(":header").css({ backgroundColor:"black", color:"white" });
:animated
— все элементы, с которыми выполняется анимация. Прервем все анимации.
$(":animated").stop(true, true);
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF
Помощь сайту
Yandex-деньги: 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов