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

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

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

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

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

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

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

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

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

$("ul li:first-child").css("color", "red");
$("ul li:last-child").css("color", "red");
$("ul li:only-child").css("color", "red");

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

$("div:empty").text("Пустой DIV");

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

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

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

$("a:not(#link1)").css("color", "red");

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

$("div:has(a)").css("background-color", "red");

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

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

$(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().

alert($(":checkbox:checked").length);
$(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>

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

$("table tr:even").addClass("clsEven");
$("table tr:odd").addClass("clsOdd");
$("ul li:eq(2)").css("color", "red");

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

$("ul li:nth(0)").css("color", "red");
$("ul li:gt(0)").css("color", "red");
$("ul li:lt(2)").css("color", "red");
$("ul li:contains('Пункт 1')").css("color", "red");

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

$(":header").css({ backgroundColor:"black", color:"white" });
$(":animated").stop(true, true);
Предыдущая статья Все статьи Следующая статья