Использование элементов, ID и классов

Селектор #id

Наиболее распространенный тип селектора основан на ID, такой мы видели в примере "Hello, world". Он использует атрибут ID в HTML теге, чтобы обнаружить требуемый элемент. ID должен быть уникальным, поэтому данный селектор нужно использовать только когда вы хотите найти один уникальный элемент. Чтобы найти элемент с заданным ID, используйте символ решетки перед значением ID, как в примере ниже:

$("#divTest")

Пример использования данного селектора:

<div id="divTest"></div>
<script type="text/javascript">
$(function()
{
	$("#divTest").text("Test");
});
</script>

Теперь, хотя пока только один элемент соответствует запросу выше, вам следует осознавать, что результат запроса - это список, т.е. он может содержать более одного элемента, если они подпадают под условие запроса. Распространенный пример - это выборка элементов с определенным CSS классом.

Селектор .class

Выбрать элементы с заданным классом можно, поставив символ точки . перед именем класса. Ниже дан пример:

<ul>
	<li class="bold">Test 1</li>
	<li>Test 2</li>
	<li class="bold">Test 3</li>
</ul>
<script type="text/javascript">
$(function()
{
	$(".bold").css("font-weight", "bold");
});
</script>

Селектор элемента

Вы также можете выбирать элементы по имени тега. К примеру, все ссылки на странице можно получить следующим образом:

$("a")

Или все теги div - вот так:

$("div")

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

$("span.bold").css("font-weight", "bold");

Этот запрос отберет все элементы span с классом bold. Разумеется, это можно использовать с ID и с большинством других селекторов.

Селекторы могут открыть вам еще много возможностей. Почитайте и другие интересные примеры.