cpp

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

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

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

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

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

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

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

Выражение 2n является аналогом значения even, а выражение 2n+1 — аналогом значения odd. Выделим каждый третий пункт списка, начиная со второго:

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

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

  • :nth-last-child(N) — элемент, являющийся N-м дочерним элементом своего родительского элемента, считая с конца. Нумерация элементов начинается с 1. Можно также указать значения even, odd и An+B. Выделим в списке последний элемент:
$('ul li:nth-last-child(1)').css('color', 'red');
  • :first-child — элемент, являющийся первым дочерним элементом своего родительского элемента. Выделим первый пункт списка шрифтом красного цвета:
$('ul li:first-child').css('color', 'red');
  • :last-child — элемент, являющийся последним дочерним элементом своего родительского элемента. Выделим последний пункт списка шрифтом красного цвета:
$('ul li:last-child').css('color', 'red');
  • :first-of-type — первый элемент в контейнере, относящийся к заданному типу. В этом примере будут выделены Абзац1 и Абзац3, т. к. это первые абзацы внутри контейнеров:
<div>
   <p>Абзац1</p>
   <p>Абзац2</p>
</div>
<div>
   <div>Текст</div>
   <p>Абзац3</p>
   <p>Абзац4</p>
</div>
$('p:first-of-type').css('color', 'red');
  • :last-of-type — последний элемент в контейнере, относящийся к заданному типу. В этом примере будут выделены Абзац2 и Абзац4, т. к. это последние абзацы внутри контейнеров:
<div>
   <p>Абзац1</p>
   <p>Абзац2</p>
</div>
<div>
   <p>Абзац3</p>
   <p>Абзац4</p>
   <div>Текст</div>
</div>
$('p:last-of-type').css('color', 'red');
  • :nth-of-type(N)  — N-ый элемент в контейнере, относящийся к указанному типу. Нумерация элементов начинается с 1. Можно также указать значения even, odd и An+B. Выделим каждый второй абзац внутри контейнеров (в этом примере будут выделены Абзац2 и Абзац4):
<div>
   <p>Абзац1</p>
   <p>Абзац2</p>
</div>
<div>
   <div>Текст</div>
   <p>Абзац3</p>
   <p>Абзац4</p>
</div>
$('p:nth-of-type(2)').css('color', 'red');
  • :nth-last-of-type(N)  — N-ый элемент в контейнере, относящийся к указанному типу, начиная с конца. Нумерация элементов начинается с 1. Можно также указать значения even, odd и An+B. Выделим последние абзацы внутри контейнеров (в этом примере будут выделены Абзац2 и Абзац4):
<div>
   <p>Абзац1</p>
   <p>Абзац2</p>
</div>
<div>
   <p>Абзац3</p>
   <p>Абзац4</p>
   <div>Текст</div>
</div>
$('p:nth-last-of-type(1)').css('color', 'red');
  • :only-child — элемент, являющийся единственным дочерним элементом своего родительского элемента. Пункт списка будет выделен шрифтом красного цвета, если других пунктов нет:
$('ul li:only-child').css('color', 'red');
  • :only-of-type — единственный элемент указанного типа в контейнере (при этом там могут находиться элементы других типов). Выделим единственный абзац в контейнере (в этом примере будут выделены Абзац1 и Абзац2):
<div>
   <p>Абзац1</p>
</div>
<div>
   <div>Текст</div>
   <p>Абзац2</p>
</div>
<div>
   <p>Абзац3</p>
   <p>Абзац4</p>
</div>
$('p:only-of-type').css('color', 'red');
  • :empty — пустой элемент:
$('div:empty').text('Пустой DIV');

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

<div>Текст</div>
<div>
</div>
<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" или параметр type не указан);
  • :password — все поля для ввода паролей (type="password");
  • :radio — все переключатели (type="radio");
  • :checkbox — все поля для установки флажков (type="checkbox");
  • :submit — все кнопки для отправки формы (type="submit");
  • :reset — все кнопки очистки формы (type="reset");
  • :button — все обычные кнопки (type="button", а также теги <button> вне зависимости от значения параметра type);
  • :file — все поля для отправки файлов (type="file");
  • :image — элемент с type="image".
Примечание
  • :enabled — активный элемент;
  • :disabled — неактивный элемент. В качестве примера выведем в активном текстовом поле текст «Активный элемент», а в неактивном — текст «Неактивный элемент»:
<input id="txt1" type="text">
<input id="txt2" type="text">
$(function() {
   $('#txt1')[0].disabled = true;
   $('input:text:enabled').val('Активный элемент');
   $('input:text:disabled').val('Неактивный элемент');
});

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

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

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

  • :parent — все элементы, у которых есть дочерние элементы (включая текст). Во всех не пустых элементах DIV выведем текст "Не пустой DIV":
<div>Текст</div>
<div>
</div>
<div></div>
$('div:parent').text('Не пустой DIV');

Результат:

<div>Не пустой DIV</div>
<div>Не пустой DIV</div>
<div></div>
  • :contains("Текст") — все элементы, которые содержат указанный текст в любом месте. Выделим пункты списка, которые содержат фрагмент "Пункт 1":
$('ul li:contains("Пункт 1")').css('color', 'red');

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

  • :visible — все видимые элементы (элементы, занимающие место в документе, включая прозрачные элементы). Выведем во всех видимых элементах DIV текст "visible":
<div>div 1</div>
<div style="opacity: 0">div 2</div>
<div style="visibility: hidden">div 3</div>
<div style="display: none">div 4</div>
$('div:visible').text('visible');

Результат:

<div>visible</div>
<div style="opacity: 0">visible</div>
<div style="visibility: hidden">visible</div>
<div style="display: none">div 4</div>
  • :hidden — все невидимые элементы (элементы, не занимающие место в документе, включая скрытые элементы форм (type="hidden")). Выведем во всех невидимых элементах DIV текст "hidden", а к скрытым элементам форм добавим параметр value со значением "hidden":
<div>div 1</div>
<div style="opacity: 0">div 2</div>
<div style="visibility: hidden">div 3</div>
<div style="display: none">div 4</div>
<input type="hidden">
$('div:hidden').text('hidden');
$('input:hidden').val('hidden');

Результат:

<div>div 1</div>
<div style="opacity: 0">div 2</div>
<div style="visibility: hidden">div 3</div>
<div style="display: none">hidden</div>
<input value="hidden" type="hidden">
  • :header — все заголовки (теги <h1>...<h6>). Выделим все заголовки шрифтом белого цвета на черном фоне:
<h1>Заголовок h1</h1>
<h2>Заголовок h2</h2>
<h3>Заголовок h3</h3>
<h4>Заголовок h4</h4>
<h5>Заголовок h5</h5>
<h6>Заголовок h6</h6>
$(':header').css({ backgroundColor:'black', color:'white' });
  • :focus — элемент, имеющий фокус ввода. Сделаем фон текстового поля зеленым, если оно находится в фокусе ввода:
<input type="text" autofocus>
$('input:text:focus').css('backgroundColor', 'green');
  • :target — «якорь», к которому был выполнен переход по внутренней гиперссылке:
<h1 id="header1">Заголовок</h1>
$(function() {
   $('h1:target').css('color', 'red');
});

Перейдите по ссылке file:///C:/book/test.html#header1 и заголовок станет красного цвета;

  • :animated — все элементы, с которыми выполняется анимация. Прервем все анимации:
$(':animated').stop(true, true);
  • lang(L) — элементы, с указанным языком. Язык задается с помощью параметра lang для одного элемента, а также для всех элементов по умолчанию в теге <html> или в заголовках ответа сервера:
<p lang="en">Text</p>
$('p:lang(en)').css('color', 'red');

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

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

cpp