LOGO JQuery
Селекторы | Учебник JQuery

Селекторы

Итак, параметром функции $() могут быть указаны селекторы, которые, в свою очередь, являются частью стандарта CSS.

Давайте рассмотрим различные возможные селекторы подробно.

Перечислим наиболее часто используемые селекторы.

1) * — коллекция всех тегов
var n = $("*").size() ; // Количество тегов
2) Тег — коллекция всех тегов, имеющих указанное имя
$("р").css("backgroundColor", "red");
// Делаем фон всех абзацев красным
3) #Идентификатор — ссылка на элемент с указанным идентификатором
$("#myid") .css("backgroundColor", "red") ;
// Делаем фон красным для элемента с id="myid"
Если элементов с одинаковым идентификатором несколько, то будет возвращена ссылка только на первый элемент.

4) Тег#Идентификатор — ссылка на элемент с указанным идентификатором, который расположен в определенном теге
$("p#myid") .css("backgroundColor", "red");
Делаем фон красным для тега P c id="myid"

Если элементов с одинаковым идентификатором несколько, то будет возвращена ссылка только на первый элемент.
Если идентификатор находится в другом теге, то он будет проигнорирован.

5) Класс — коллекция элементов, имеющих указанный класс
$(".cls2").css("backgroundColor", "red");
    // Делаем фон красным для всех элементов с class="cls2"
6) Тег. Класс — коллекция элементов, имеющих указанный класс в определенном теге
$("p.cls2") .css("backgroundColor", "red") ;
Делаем фон красным для всех P с class="cls2"

Для ускорения выборки не следует указывать название тега перед идентификатором.

Например, пишите #myid вместо p#myid.

Если поиск производится по стилевому классу, то, наоборот,
Cледует указать название тега.

Например, пишите p.cls2 вместо .cls2.

Если название идентификатора (или класса) содержит специальные символы
(например, точку или квадратные скобки), то их необходимо экранировать двумя слешами.
<div id="divl.index[5]"></div>
В этом примере получаем ссылку на следующий элемент с id = "divl.index[5]".
$("#divl\\.index\\[5\\]").html("Текст");
Откройте пример в новом окне и посмотрите исходный код

Если необходимо, например, применить один стиль к разным элементам,
то можно указать селекторы через запятую.
$("#idl, div.hello").addClass("newClass");
Откройте пример в новом окне и посмотрите исходный код

Привязка к элементам документа

Выполнить поиск элемента внутри другого элемента HTML-документа можно следующими способами.

1) Элемент1 Элемент2 — находим Элемент2, который располагается внутри контейнера Элемента1
$("div a").сss("color", "red");
Цвет текста ссылки станет красным, если тег A находится внутри тега div.
    <div><a href="/link.html">Ссылка</a></div>
2) Элемент1 > Элемент2 — находим Элемент2, который является дочерним для Элемента A.
$("div > a").css("color","red");
Цвет текста ссылки станет красным, если тег A находится внутри тега div
И не вложен в другой тег.
<div>
	<a href="#">Ссылка l</a><br>
	<span>
		<a href="#">Ссылка 2</a>
	</span>
</div>
Откройте пример в новом окне и посмотрите исходный код

3) Элемент1 + Элемент2 — находим Элемент2, который является соседним для Элемент A и следует сразу после него.
$("div + a").css("color", "red");
Цвет текста ссылки станет красным, если тег A следует сразу после тега div.
<div>TeKCT</div><a href="#">Ссылка</a>
Откройте пример в новом окне и посмотрите исходный код

4) Элемент 1 ~ Элемент2 — находим Элемент2, который следует после Элемента 1, причем необязательно сразу.
$("div ~ a").css("color", "red");
Цвет текста ссылки станет красным, если тег A следует после тега div.
<div>TeKCT</div>
<span>TeKCT</span><br>
<a href="#" >Ссылка l</a><br>
<a href="#">Ссылка 2</a><br>
<span><a href="#">Ссылка 3</a></span><br>
<a href="#">Ссылка 4</a><br>
Откройте пример в новом окне и посмотрите исходный код

В этом примере ссылки 1, 2 и 4 станут красного цвета.
Ссылка 3 не станет красного цвета, так как расположена внутри тега span.

При необходимости можно составлять выражения из нескольких селекторов
$("div span a").css("color", "red");
Цвет текста ссылки станет красным, если тег A расположен внутри тега span, а тот в свою очередь вложен в тег div
<div>
	<a href="#">Ссылка l</a><br>
	<span>
		<a href ="#">Ссылка 2</a><br>
	</span>
</div>
Откройте пример в новом окне и посмотрите исходный код

Привязка к параметрам тегов

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

1) [Параметр] — элементы с указанным параметром $
$("a[id]").css("color", "red");
Цвет текста ссылки станет красным, если тег A имеет параметр id.
<a id="myid" href="#">Ссылка 1</a><br>
<a href="#">Ссылка 2</a><br>
Откройте пример в новом окне и посмотрите исходный код

2) [Параметр="Значение"] — коллекция элементов, у которых параметр точно равен значению
<input name="myinput" value="my input">
<input name="hello" value="hello">
<script>
$("input[name='myinput']").css("color", "red");
</script>
Цвет текста input станет красным, если параметр name имеет значение myinput.

Откройте пример в новом окне и посмотрите исходный код

3) [Параметр!="Значение"] — коллекция элементов, у которых параметр не равен значению
<input name="myinput_one" value="my input one"><br>
<input name="myinput_two" value="my input two"><br>
<input name="hello" value="hello">
<script>
$("input[name!='hello']").css("color", "red");
</script>
Цвет текста input станет красным, если параметр name не имеет значение hello.

Откройте пример в новом окне и посмотрите исходный код

4) [Параметр^="Значение"] — коллекция элементов, у которых параметр начинается с указанного значения
<input name="myinput_one" value="my input one"><br>
<input name="myinput_two" value="my input two"><br>
<input name="hello" value="hello">
<script>
$("input[name^='myinput']").css("color", "red");
</script>
Цвет текста input станет красным, если параметр name начинается с myinput.

Откройте пример в новом окне и посмотрите исходный код

5) [Параметр$="Значение"] — коллекция элементов, у которых параметр оканчивается указанным значением
<input name="myinput_one" value="my input one"><br>
<input name="myinput_zello" value="my input zello"><br>
<input name="hello" value="hello">
<script>
$("input[name$='ello']").css("color", "red");
</script>
Цвет текста input станет красным, если параметр name оканчивается на ello.

Откройте пример в новом окне и посмотрите исходный код

6) [Параметр*="Значение"] — коллекция элементов, у которых параметр содержит указанный фрагмент значения
<input name="myinput_one" value="my input one"><br>
<input name="myinput_zello" value="my input zello"><br>
<input name="hello" value="hello">
<script>
$("input[name*='yinput']").css("color", "red");
</script>
Цвет текста input станет красным, если параметр name содержит текст yinput.

Откройте пример в новом окне и посмотрите исходный код