Итак, когда мы выбрали интересующие нас элементы после прочтения статьи о селекторах в JQuery, было бы неплохо «вынуть» то, что мы получили.
Например, имеем группу из четырех чекбоксов, выбором которых будем удалять записи:



Собственно, JavaScript:


Ну, в общем как-то так:) Надеюсь, кому-то помогло.

Для опытов соорудим html страницу:



Выбор элементов по Id либо ClassName:

Иерархия объектов в DOM

Выборка деток:



Аналогичный результат можно получить используя следующую конструкцию:



Выборка только непосредственных деток:



Группируем селекторы:



Ищем по соседям:



Выборка всех элементов, всех родителей, всех деток:

Фильтры

Фильтров в jQuery реализовано достаточно много:



Фильтры по контенту и видимости:



Фильтры по атрибутам:



Стоит отдельно отметить следующий фильтр:



В результате его работы будут выбраны следующие теги:



Для работы с элементами форм есть ряд селекторов позволяющий выбирать по типу элемента и фильтров — enabled/disabled/selected/checked:



Группируем фильтры:



Полезные селекторы для работы с элементами форм:

Работа с элементом SELECT

Удалить все элементы списка:



Добавить в список новый элемент:



Например, список формируется из XML данных таким образом:



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

Сделать выделенным первый пунки списка:



Принудительно снять выделение с элемента списка:



Получить значение выделенного пункта из списка:

Тут есть два варианта. Первый, если вы используете аттрибут <option value=«some value»>:



И второй вариант: вы не задаете value, вас интересует то, что заключено между … (как у меня в проекте):


Теперь переменная file содержит нужное нам значение.

Проверить, выбран ли какой-нибудь элемент списка. Это нужно делать обязательно, иначе в приложении могут возникнуть проблемы:



Превратить список в «автомасштабируемый, т.е. отобразить в списке ровно столько элементов, сколько в нем есть:



Сделать недоступны для выбора отдельный элемент:



Разрешить выделение всех ранее недоступных элементов можно так:

Как выбрать элемент по его id или классу?

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



Выбираем элемент(ы) с классом «myCssClass». Поскольку любое количество элементов может иметь этот класс, это выражение будет выбирать любое количество элементов.



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



В выбранном элементе есть возможность задействовать другие функции JQuery



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

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

Можно использовать метод is() вместе с подходящим селектором.



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



Начиная с версии 1.2 был добавлен hasClass.



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

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

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



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

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

Можно проверить состояние, используя селекторы:visible или:hidden.



Можно воздейстовать на элемент, основываясь на его видимости, просто включите «:visible» или «:hidden» в выражение селектора.

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

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

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

Можно разрешать/запрещать элемент, устанавливая атрибут ‘disabled’ в значение ‘disabled’ (чтобы запретить использование элемента) или присвоить тому же атрибуту пустое значение «, или же просто удалить атрибут ‘disabled’ (чтобы разрешить использование элемента). Как это сделать? Смотрим ниже:



HTML код для тестов:

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

Можно отметить/снять отметку c элемента checkbox, устанавливая атрибуту ‘checked’ значение ‘checked’ (чтобы отметить элемент) или установить атрибуту ‘checked’ пустое значение »« (чтобы снять отметку).



HTML код для теста:

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

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

HTML для примера:



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



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

Как заменить текст в третьем элементе в списке из десяти элементов?

Селектор:eq() или метод .eq() позволяют выбрать необходимый элемент. Для того что бы заменить текст, сначала его нужно получить, например, методом .text(), а потом отдать куда необходимо. Пример ниже: