Оглавление

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

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

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

  В качестве параметра можно также указывать следующее значение.
<Сколько элементов>п+<Начальная позиция>
Выделим каждый третий пункт списка, начиная со второго.

  $("ul li:nth-child(Зп+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(#linkl)") .css("color", "red");
Все ссылки в документе станут красного цвета, за исключением элемента с идентификатором link1.

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

 

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

:input— все элементы формы (теги <input>, <select>, <textarea>, <button>).
:text — все текстовые поля (type="text").
:password — все поля для ввода паролей (type="password").
:radio — все переключатели (type="radio")•
:checkbox — все поля для установки флажков (types"checkbox").
:submit — все кнопки для отправки формы (type="submit").
:reset— все кнопки очистки формы (type="reset").
:button — все обычные кнопки (type="button", а также теги <button>).
:file — все поля для отправки файлов (type="file").
:enabled — активный элемент.
:disabled — неактивный элемент.

:checked — отмеченный элемент (например, установленный флажок).
:selected— все выбранные элементы списка (тег <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 равным попе, элементы с атрибутом visibility равным hidden, а также скрытые элементы форм (type= "hidden")).


:header— все заголовки (теги <hl>...<h6>). Выделим все заголовки шрифтом белого цвета на черном фоне.

  $(":header").css({backgroundColor:"black", color:"white"});


: animated— все элементы, с которыми выполняется анимация. Прервем все анимации.

  $(":animated").stop(true, true);

 

Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити