jQuery селектор id

Определение и применение

jQuery селектор id выбирает элемент, глобальный атрибут id которого, имеет указанное значение (элемент с определенным идентификатором).

Следующие правила являются общими и их необходимо соблюдать при работе с id селекторами:

• значение идентификатора должно быть уникально на странице, размещение нескольких одноименных идентификаторов на странице считается ошибкой (выборка остановится на первом идентифакторе).
• все названия id селекторов должны начинаться с решётки (благодаря ей браузеры находят эти селекторы в таблице стилей). Решетка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута id она не ставится, будьте внимательны из-за этого возникает много ошибок).
• используйте только буквы алфавита (A-Z, a-z), числа, дефисы, знаки подчеркивания.
• название после решётки всегда должно начинаться с символа (неправильно: #50cent, #-vottakvot).
• учитывайте регистр при наименовании id селекторов, т.к. они к этому чувствительны (#vottakvot и #VotTakVot разные идентификаторы).

jQuery синтаксис:

$("#id")

Добавлен в версии jQuery

Селектор в CSS

Пример использования

Селектор id — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<p id="test">Абзац, который имеет глобальный атрибут id со значением test.</p>
<p id="test2">Абзац, который имеет глобальный атрибут id со значением test2.</p>
<p id="test3">Абзац, который имеет глобальный атрибут id со значением test3.</p>

main.js

JavaScript

$(document).ready(function () {
    $('#test').css('color', 'red') // выбирает элемент с идентификатором test
    $('#test2').css('color', 'green') // выбирает элемент с идентификатором test2
    $('#test3').css('color', 'blue') // выбирает элемент с идентификатором test3
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}