В библиотеке jQuery используются следующие псевдоклассы, определенные в CSS.
• :nth-child (N) — элемент, являющийся N-м дочерним элементом своего роди
тельского элемента. Нумерация элементов начинается с 1. В качестве параметра
можно указать индекс или два специальных слова:
even — все четные элементы;
odd — все нечетные элементы.
Выделим все нечетные пункты списка шрифтом красного цвета.
$("ul li:nth-child(odd)").сss("color", "red");
В качестве параметра можно также указывать следующее значение.
<Сколько элемент ов>n+<Начальная позиция>
Выделим каждый третий пункт списка, начиная со второго.
$("ul li:nth-child(3n+2)").сss("color", "red");
В итоге будут выделены пункты 2-й, 5-й, 8-й и т.д.
• : first-child — элемент, являющийся первым дочерним элементом своего родительского элемента. Выделим первый пункт списка шрифтом красного цвета.
$("ul li:first-child").сss("color", "red");
: last-child— элемент, являющийся последним дочерним элементом своего родительского элемента. Выделим последний пункт списка шрифтом красного цвета.
$("ul li:last-child").сss("color", "red");
: only-child— элемент, являющийся единственным дочерним элементом своего родительского элемента.
$("ul li:only-child").сss("color", "red");
Пункт списка будет выведет шрифтом красного цвета, если других пунктов нет.
: empty — пустой элемент.
$("div:empty").text("Пустой DIV");
Во всех пустых тегах <div> выводим текст "Пустой DIV".
<div>Текст</div>
<div></div>
<div></div>
В этом примере текст будет выведен только в последнем теге <div>.
• : not (Селектор) — элемент, не соответствующий селектору.
$("a:not(#link1)").сss("color", "red");
Все ссылки в документе станут красного цвета, за исключением элемента с идентификатором link1.
• :has {Селектор) — все элементы, содержащие хотя бы один элемент, соответствующий селектору.
$("div:has(a)").сss("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="f ile").
• : enabled — активный элемент.
• :disabled — неактивный элемент. В качестве примера выведем в активном текстовом поле текст Активный элемент, а в неактивном — текст Неактивный элемент.
$(document).ready(function() {
$("#txtl")[0].disabled = true;
$(":text:enabled").val("Активный элемент");
$(":text:disabled").val("Неактивный элемент");
<input id="txtl" type="text"><br>
<input id="txt2" type="text">
После формирования структуры документа делаем неактивным элемент с идентификатором txtl. Затем, в зависимости от активности элемента, выводим соответствующее сообщение с помощью метода val().
: checked — отмеченный элемент (например, установленный флажок). Выведем количество установленных флажков.
alert($(":checkbox:checked").length) ;
: selected— все выбранные элементы списка (тег <select>). Выведем текст пункта списка после его выбора.
$(document).ready(function() {
$("#sell").change(function() {
alert($("#sell option:selected").text());
});
});
<select id="sell">
<option>Пункт l</option>
<option>Пункт 2</option>
<option>IIyHKT 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)").сss("color", "red");
Выделим первый пункт списка.
$("ul li:nth(0)").сss("color", "red");
• :gt {Индекс) — элементы с индексом, большим, чем указан (элементы нумеруются с 0). Выделим все пункты списка, кроме первого.
$("ul li:gt(0)").сss("color", "red");
• :lt {Индекс) — элементы с индексом, меньшим, чем указан (элементы нумеруются с 0). Выделим первые два пункта списка.
$("ul li:lt(2) ").сss("color", "red");
• :first — первый элемент.
• :last — последний элемент.
• :parent — все элементы, у которых есть дочерние элементы (включая текст).
• :contains ('Текст') — все элементы, которые содержат указанный текст
в любом месте. Выделим пункты списка, которые содержат фрагмент " Пункт 1".
$("ul li:contains('Пункт 1')").сss("color", "red");
В этом случае будут выделены пункты, содержащие также текст "Пункт 11", "Пункт 12" и т.д.
• :visible— все видимые элементы (элементы с атрибутом display равным block или inline, а также элементы с атрибутом visibility равным visible).
• :hidden— все невидимые элементы (элементы с атрибутом display равным none, элементы с атрибутом visibility равным hidden, а также скрытые элементы форм (type= "hidden")).
• :header— все заголовки (теги <hl>. . . <h6>). Выделим все заголовки шрифтом белого цвета на черном фоне.
$(":header").css({ backgroundColor:"black", color:"white" });
• :animated— все элементы, с которыми выполняется анимация. Прервем все анимации.
$(":animated").stop(true, true);