Как выбрать элемент по его 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(), а потом отдать куда необходимо. Пример ниже:

Считаю, что такие вещи нужно популяризировать и доносить до людей. Супер плагин на JQuery для построения графиков. С ним можно забыть о генерации графиков картинками на php и о флеше тоже. Очень простой для понимания. Пользуйтесь:)
Демо в русском виде выложил в разделе Jquery плагины и решения, найти будет не сложно.



Скачать можно здесь русскую версию документации и примеров Flot, а здесь английскую.

Как по мне, документация к JQuery достаточно сыроватая и неудобная. Для того что бы разобраться с документацией по UI, необходимо достаточно много пописать использованием JQuery, т.е. дойти до такого уровня, когда документация уже не нужна:)
Рассмотрим юзер интерфейс Sortable. Исходя из документации и примера, все кажется понятным, проблемы и непонятки могут возникнуть в случае, когда возникнет необходимость сохранить последовательность наших айтемов.

Решение:



В данном примере данные сириализуются и заносятся в текстовое поле с id=«test-log»

Jquery хорош тем, что позволяет пименять так называемые «цепочные решения».

Решение в лоб:



Показывает и скрывает элемент с id=«foo».

Fade-in-fade-out

Если нужно красиво показать блок и так же красиво его скрыть, используем fade-in-fade-out эффект:



В течении 2 секунд (2000 мс) блок будет проявляться, потом в течении 2 секунд блок будет скрываться. Если нам необходимо установить задержку между fadeIn и fadeOut, тогда делаем так:



Установлена задержка в 5 секунд.

Фокусы с задержкой без delay

Для проявления полупрозрачности (50% — второй параметр) с задержкой в 3 секунды можно воспользоваться следующим кодом:



Рассмотрим пример задержки:
1. Проявить элемент в течении двух секунд (прозрачность от 0 до 1)
2. Задержать прозрачность на уровне 1 в течении 5 секунд
3. Прятать блок в течении 2 секунд (прозрачность с 1 до 0)

Решение:

Задержка перед стартом

Иногда приходится выполнять достаточно непонятные задания заказчика или описанные в ТЗ. Одним из маразмов является онлайн изменение размера шрифта тела HTML. Зачем это надо я не знаю. Наверно, просто эффектная, никому ненужная фишка.
Сделаем это при помощи яваскриптового фреймворка JQuery и ихнего же UI, что бы было красивее:)

Итак, имеем три кнопки:



Яваскрипт будет выглядеть так:

Очень полезно при дебаге:

В результате получаем: До нового года осталось.