Селекторы
Итак, параметром функции $ () могут быть указаны селекторы, которые, в свою очередь, являются частью стандарта CSS.
Давайте рассмотрим различные возможные селекторы подробно.
Перечислим наиболее часто используемые селекторы.
1) * — коллекция всех тегов
var n = $("*").size () ; // Количество тегов
2) Тег — коллекция всех тегов, имеющих указанное имя
$("р").css("backgroundColor", "red");
// Делаем фон всех абзацев красным
3) #Идентификатор — ссылка на элемент с указанным идентификатором
$("#idl") .css("backgroundColor", "red") ;
// Делаем фон красным для элемента с id="idl"
(Если элементов с одинаковым идентификатором несколько, то будет возвращена ссылка только на первый элемент)
4) Тег#Идентификатор— ссылка на элемент с указанным идентификатором, который расположен в определенном теге
$("p#idl") .css("backgroundColor", "red") ;
// Делаем фон красным для абзаца с id="idl"
(Если
абзацев с одинаковым идентификатором несколько, то будет возвращена
ссылка только на первый абзац. Если идентификатор находится в другом
теге, то он будет проигнорирован)
5) Класс — коллекция элементов, имеющих указанный класс
$(".cls2").css("backgroundColor'\ "red");
// Делаем фон красным для всех элементов с class="cls2"
6) Тег. Класс — коллекция элементов, имеющих указанный класс в определенном теге
$("p.cls2") .css("backgroundColor", "red") ;
// Делаем фон красным для всех абзацев с class="cls2"
Для ускорения выборки не следует указывать название тега перед
идентификатором. Например, пишите "#idl" вместо "p#idl". Если поиск
производится по стилевому классу, то, наоборот, следует указать название
тега. Например, пишите "p.clsl" вместо 11 .clsl".
Если название идентификатора (или класса) содержит специальные
символы (например, точку или квадратные скобки), то их необходимо
экранировать двумя слешами
(\\). $("#divl\\.index\\[5\\]").html("Текст");
В этом примере получаем ссылку на следующий элемент.
<div id="divl.index[5]"></div>
Если необходимо, например, применить один стиль к разным элементам,
то можно указать селекторы через запятую.
$("#idl, div").addClass("newClass");
Это называется группирование селекторов.
В этом примере для элемента с идентификатором idl, а также для всех тегов div назначается стилевой класс newClass.
Привязка к элементам документа
Выполнить поиск элемента с учетом заданного отношения к другому элементу HTML-документа можно следующими способами.
1) Элемент1 Элемент2— находим Элемент2, который располагается внутри контейнера Элемента1
$("div a").ess("color", "red");
Цвет текста ссылки станет красным, если тег а находится внутри тега div.
<div><a href="/link.html">Ссылка</a></div>
2) Элемент1 > Элемент2 — находим Элемент2, который является дочерним для Элемент al
$("div > a").ess("color", "red");
Цвет текста ссылки станет красным, если тег а находится внутри тега div и не вложен в другой тег.
<div>
<а href="/linkl.html">Ссылка l</a><br> <span>
<a href = "link2 .html">Ссылка 2</ax/span>
</div>
В этом примере только первая ссылка станет красного цвета, так как вторая ссылка расположена внутри тега span.
3) Элемент1 + Элемент2 — находим Элемент2, который является соседним для Элемент al и следует сразу после него.
$("div + a").ess("color", "red");
Цвет текста ссылки станет красным, если тег а следует сразу после тега div.
<div>TeKCT</divxa href ="link.html">Ссылка</а>
4) Элемент 1 ~ Элемент2 — находим Элемент2, который следует после Элемента 1, причем необязательно сразу.
$("div ~ a").ess("color", "red");
Цвет текста ссылки станет красным, если тег а следует после тега div
<div>TeKCT</div>
<span>TeKCT</span><br>
<а href ="linkl.html11 >Ссылка l</a><br>
<а href ="link2.html">Ссылка 2</a><br>
<span><a href ="link3.html">Ссылка 3</a></span><br>
<a href = "link4.html">Ссылка 4</a><br>
В этом примере ссылки 1, 2 и 4 станут красного цвета. Ссылка 3 не станет красного цвета, так как расположена внутри тега span.
При необходимости можно составлять выражения из нескольких селекторов
$("div span a").ess("color", "red");
Цвет текста ссылки станет красным, если тег а расположен внутри тега span, а тот в свою очередь вложен в тег div
<div>
<а href="/linkl.html">Ссылка l</a><br>
<span>
<a href ="link2.html">Ссылка 2</a><br>
</span>
</div>
В этом примере только ссылка 2 будет красного цвета.
Привязка к параметрам тегов
Для привязки к параметрам тегов применяются следующие селекторы.
1) [Параметр] —элементы с указанным параметром $
$("a [id]”) .css ("color", "red") ;
Цвет текста ссылки станет красным, если тег <а> имеет параметр id.
<а id="linkl" href="/linkl.html">Ссылка 1</а>
2) [Параметр=”Значение” ] — коллекция элементов, у которых параметр точно равен значению
$("a[href=`linkl.html`]") .css("color", "red");
Цвет текста ссылки станет красным, если параметр href тега а имеет значение "linkl.html".
3) [Параметр!=” Значение” ] — коллекция элементов, у которых параметр не равен значению
$("a [href!=`linkl.html`]") .css("color" , "red");
Цвет текста ссылки станет красным, если параметр href тега а не имеет значение "linkl.html".
4) [Параметр^=”'Значение” ] — коллекция элементов, у которых параметр начинается с указанного значения
$("a[href^=`li`]") . css ("color", "red") ;
Цвет текста ссылки станет красным, если значение параметра href тега а начинается с "1i".
5) [Параметр$=”Значение” ] — коллекция элементов, у которых параметр оканчивается указанным значением
$ ("a [href $= `.html` ] ") css ("color" , "red") ;
Цвет текста ссылки станет красным, если значение параметра href тега а оканчивается на расширение ". html".
6) [Параметр* =” Значение” ] — коллекция элементов, у которых параметр содержит указанный фрагмент значения
$("a[href*=`link`]").css("color", "red");
Цвет текста ссылки станет красным, если значение параметра href тега а содержит фрагмент "link".
Если необходимо сделать привязку сразу к нескольким параметрам, то используется следующий формат.
[Параметр=` Значение` ] [Параметр= ` Значение` ]
Пример:
$("a[href=`linkl.html`] [id*=`link`]") .css("color", "red");
Цвет текста ссылки станет красным, если значение параметра href тега а
равно "link1.html", а параметр id содержит фрагмент "link".
Псевдоклассы
В библиотеке jQuery используются следующие псевдоклассы, определенные в CSS.
1) : nth-child {N) — элемент, являющийся N-м дочерним элементом
своего родительского элемента. Нумерация элементов начинается с 1. В
качестве параметра можно указать индекс или два специальных слова:
- even — все четные элементы;
- odd — все нечетные элементы.
Выделим все нечетные пункты списка шрифтом красного цвета.
$("ul li:nth-child(odd)").css("color", "red");
В качестве параметра можно также указывать следующее значение.
<Сколько элементов>п+<Начальная позиция>
Выделим каждый третий пункт списка, начиная со второго.
$("ul li:nth-child(3n+2)").css("color", "red");
В итоге будут выделены пункты 2-й, 5-й, 8-й и т.д.
2) : first-child — элемент, являющийся первым дочерним элементом
своего родительского элемента. Выделим первый пункт списка шрифтом
красного цвета.
$("ul li:first-child") .css("color", "red") ;
3) : last-child— элемент, являющийся последним дочерним элементом
своего родительского элемента. Выделим последний пункт списка шрифтом
красного цвета.
$("ul li:last-child").css("color", "red");
4) : only-child— элемент, являющийся единственным дочерним элементом своего родительского элемента.
$("ul li:only-child").css("color", "red");
Пункт списка будет выведет шрифтом красного цвета, если других пунктов нет.
5) : empty — пустой элемент.
$("div:empty").text("Пустой DIV");
Во всех пустых тегах div выводим текст "Пустой DIV".
<div>TeKCT</div>
<div>
</div>
<div></div>
В этом примере текст будет выведен только в последнем теге div.
6) : not (Селектор) — элемент, не соответствующий селектору. $("a:not(#linkl)").css("color", "red");
Все ссылки в документе станут красного цвета, за исключением элемента с идентификатором linkl.
7) :has (Селектор) — все элементы, содержащие хотя бы один элемент, соответствующий селектору.
$("div:has(а)").css("background-color", "red"); Выделяем все теги
div, в которых содержится хотя бы одна ссылка. Для привязки к элементам
формы предназначены следующие псевдоклассы.
8) : input— все элементы формы (теги <input>, <select>, <textarea>, <button>).
9) : text — все текстовые поля (type=" text").
10) :password — все поля для ввода паролей (type= "password").
11) : radio — все переключатели (type=" radio").
12) : checkbox — все поля для установки флажков (type="checkbox").
13) : submit — все кнопки для отправки формы (type=" submit").
14) : reset — все кнопки очистки формы (type= "reset").
15) :button — все обычные кнопки (type="button", а также теги <button>).
16) : f ile — все поля для отправки файлов (type="f ile").
17) : enabled — активный элемент.
18) : 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 () .
19) : checked — отмеченный элемент (например, установленный флажок). Выведем количество установленных флажков.
alert($(":checkbox:checked").length);
20) : selected— все выбранные элементы списка (тег select). Выведем текст пункта списка после его выбора.
$(document).ready(function() { $("#sell").change(function() {
alert($("#sell option:selected").text());
});
});
<select id="sell">
<option>nyHKT l</option>
<option>nyHKT 2</option>
<option>riyHKT 3</option>
<option>nyHKT 4</option>
</select>
Рассмотрим другие псевдоклассы.
21) : even — все четные элементы (элементы нумеруются с 0).
22) : odd — все нечетные элементы (элементы нумеруются с 0). В
качестве примера назначим разные стилевые классы четным и нечетным
строкам таблицы.
$("table trreven").addClass("clsEven");
$ ("table tr:odd") .addClass("clsOdd");
23) :eq(Индекс) и -.nth{Индекс) — элемент с указанным индексом (элементы нумеруются с 0). Выделим третий пункт списка.
$("ul li:eq(2)").css("color", "red");
Выделим первый пункт списка.
$("ul li:nth(0)").css("color", "red");
24) :gt [Индекс) — элементы с индексом, большим, чем указан (элементы нумеруются с 0). Выделим все пункты списка, кроме первого.
$("ul lirgt(0)").css("color", "red");
25) : It {Индекс) — элементы с индексом, меньшим, чем указан (элементы нумереются с 0). Выделим первые два пункта списка.
$("ul li:lt(2) ") .css("color", "red");
26) : first — первый элемент.
27) : last — последний элемент.
28) : parent — все элементы, у которых есть дочерние элементы (включая текст).
29) :contains (`Текст`)— все элементы, которые содержат указанный
текст в любом месте. Выделим пункты списка, которые содержат фрагмент "
Пункт 1".
$("ul li:contains(`Пункт 1`)").css("color", "red");
В этом случае будут выделены пункты, содержащие также текст "Пункт 11", "Пункт 12 " и т.д.
30) :visible— все видимые элементы (элементы с атрибутом display
равным block или inline, а также элементы с атрибутом visibility равным
visible).
31) :hidden— все невидимые элементы (элементы с атрибутом display
равным попе, элементы с атрибутом visibility равным hidden, а также
скрытые эле-менты форм (type= "hidden")).
32) : header— все заголовки (теги hl. . . h6). Выделим все заголовки шрифтом белого цвета на черном фоне.
$(":header") .css ({ backgroundColor:"black", color:"white" });
33) : animated— все элементы, с которыми выполняется анимация. Прервем все анимации.
$(":animated").stop(true, true);
|