Notes of a Developer

Эта статья является чуть-чуть вольным переводом аналогичного раздела на сайте разработчиков библиотеки jQuery. Речь пойдет о казалось бы совсем простых вещах, но не всегда очевидных с первого взгляда, поэтому эта информация наверняка может кому-то пригодится.
Как выбирать элементы, используя class или id?

Этот код выбирает элемент с id “myDivId”. Поскольку id является уникальным, это выражение всегда выбирает один элемент. Или ничего не выбирает, если элемента с таким id не существует.

Следующий код выбирает элемент(ы) с классом “myCssClass”. Поскольку любое количество элементов может иметь этот класс, это выражение будет выбирать любое количество элементов.

Выбранный элемент может быть присвоен переменной javascript, например так:

Обычно выбранные элементы задействуются другими функциями jQuery:

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

Как проверить имеет ли элемент специфический класс?

Вы можете использовать метод is() (см. jQuery API: Traversing – обход DOM) вместе с подходящим селектором.

Заметьте, что этот метод позволяет Вам проверять также и другие вещи. Например Вы можете проверить, скрыт ли элемент (при использовании :hidden селектора).

Иногда также бывает вопрос: имеет ли jQuery hasClass (см. jQuery API: Attributes – атрибуты) метод?

Заметьте, что hasClass был добавлен начиная с версии 1.2, чтобы обрабатывать наиболее распространенное использование метода is().

В этом коде добавляется некая анимация для элемента(ов) с классом protected. Обратите внимание, что имя класса тут записывается без точки.
Как проверить существование элемента?

Вы можете использовать свойство length набора jQuery, возвращенного селектором.

Заметьте, что вовсе не всегда необходимо проверять, существует ли элемент. Следующий код показал бы элемент, если он существует, и не сделал бы ничего (и никакой ошибки бы не возникло), если это неверно.

Как определить состояние переключаемого элемента?

Вы можете проверить состояние, используя селекторы :visible или :hidden (см. jQuery API: Selectors – селекторы jQuery: фильтры контента, visibility-фильтры, фильтры атрибутов, child-фильтры).

Если Вы хотите воздейстовать на элемент, основываясь на его видимости, просто включите “:visible” или “:hidden” в выражение селектора. Например:

Как выбирать элементы, которые имеют специфические символы в id?

Например, это может быть обычным для некоторых фреймворков, генерирующих уникальные id, которые имеют специальные символы в них (такие как ‘.’ или ‘[..]‘). Проблема состоит в том, что эти символы имеют специальное значение в CSS. Как поступать в таких случаях, смотрите на следующих примерах:

Как разрешать/запрещать использование элемента?

Вы можете разрешать/запрещать элемент, устанавливая атрибут ‘disabled’ в значение ‘disabled’ (чтобы запретить использование элемента) или присвоить тому же атрибуту пустое значение ”, или же просто удалить атрибут ‘disabled’ (чтобы разрешить использование элемента). Код может выглядеть примерно следующим образом:

Вы можете попробовать следующий пример:

и посмотреть его исходный код:

Как отметить/снять отметку с элемента checkbox?

Вы можете отметить/снять отметку c элемента checkbox, устанавливая атрибуту ‘checked’ значение ‘checked’ (чтобы отметить элемент) или установить атрибуту ‘checked’ пустое значение “” (чтобы снять отметку). Пример кода приведен ниже:

Вы можете попробовать следующий пример:

и посмотреть его исходный код:

Как получать значения выбранной опции элемента select?

Элементы select обычно имеют два значения, к которым нужно обратиться. Это значение атрибута value соответствующего элемента option и его текстовое значение. Для примера возьмем следующий код:

Вот так можно получить значение атрибута value, выбранной опции:

А вот так можно получить текст выбранной опции:

Вы можете попробовать следующий пример:

и посмотреть его исходный код: