Как мы убедимся позже, многие методы в jQuery используются как для чтения, так и для записи, в зависимости от атрибутов и их количества, передаваемых методу.

Так, метод attr() может использоваться как для получения значения атрибутов, так и для их установки.
Если методу будет передано только название атрибута, он вернет его значение, например:

так мы получим alt для элемента с id#myImage.

А так:

как вы уже наверное догадались, установим этому же элементу alt 'My picture'.

Стоит отметить, что вместо нового значения атрибута можно передавать этому методу функцию.
Пример:

эта сложная пока для нас функция пробегает через все элементы набора на странице, изменяя атрибут title в соответствии с индексом элемента и его id.

Более того, метод attr() позволяет изменять несколько атрибутов одновременно:

Для того, чтобы удалить атрибут у элемента DOM, в jQuery есть специальный метод removeAttr().
Например:

Определение класса делается очень просто с помощью метода addClass(), который присваивает переданное ему имя класса всем элементам в наборе.
Например:

Удаление класса делается командой removeClass():

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

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

где striped было названием класса для закрашенной строки.

Работа напрямую со стилями дает нам большие возможности.

Метод css() работает аналогично методу attr(), позволяя нам устанавливать индивидуальные свойства CSS для элемента, передавая методу пару имя-значение или даже менять несколько свойств, передавая новые значения для них в объекте.

Более того, метод также прекрасно обрабатывает функции, переданные ему в качестве значения для свойства.

Например, увеличим ширину элементов в наборе на 20 пикселей:

И, наконец, метод css() позволяет получить значение свойства, переданного методу.

Например, узнать ширину элемента можно так:

Для часто используемых свойств в jQuery есть специальные команды. Так, мы можем узнать или изменить высоту и ширину объектов специальными методами height() и width().

Соответственно, если мы передаем методу значение - мы устанавливаем это значение согласно методу, его получившему, а если просто вызываем метод - получим нужное нам значение (при этом переданное значение будет установлено в пикселях), то есть:

установит ширину блока в 500 пикселей.
Кстати, это то же самое, что и

Узнать теперь ширину блока можно так:

Иногда необходимо проверить, принадлежит ли элемент к определенному классу или нет.
Сделать это поможет функция hasClass():

Самая простая команда - html() - возвращает нам HTML-код первого соответствующего элемента, если параметр не был задан, или устанавливает HTML-фрагмент, переданный как параметр, содержимым всех выбранных элементов.

Также, есть возможность получить только текстовое содержимое элементов.
Для этого есть команда text().

В результате переменная text будет содержать строку «OneTwoThreeFour».

Как и с предыдущей функцией, мы можем устанавливать текстовое содержимое для элемента, если функции test() будет как параметр необходимый текст. При этом если в тексте будут символы < или > они будут заменены на спецсимволы.

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

Для добавления контента в конец существующего служит команда append().

Функция добавляет строку или HTML-фрагмент, переданные ей как параметры, к новому или существующему элементу DOM либо к набору вложенных элементов jQuery.
Рассмотрим несколько примеров.

Это выражение присоединит HTML-фрагмент, созданный из переданной функции строки, к концу уже существующего содержимого всех элементов <p> на странице.

Более комплексное использование этой команды позволяет назначить существующие элементы DOM дочерними к другим элементам.
То есть:

позволит назначить все ссылки класса appendMe дочерними элементами всех <p> на странице класса appendToMe.
При этом конечное положение назначаемых элементов зависит от числа целевых элементов. Если такой один, то назначаемые элементы будут перемещены с их первоначального положения на странице, если же целевых элементов несколько, то назначаемые элементы останутся на своем прежнем месте, а целевым элементам будут назначены их копии.

Для перемещения или копирования элемент из одного места в другое можно также использовать команду appendTo(), которая перемещает все элементы вложенного набора в конец содержимого целевого элемента, указанного как параметр функции.
Смотрим пример, чтобы увидеть отличие от предыдущей функции:

В качестве цели опять же может выступать как селектор, так и DOM элемент.
Как и в предыдущей функции, если целевой элемент один, то будет совершена операция перемещения, если целевых объектов несколько, то будет произведено копирование.

Принцип работы следующих команд похож на работу append() и appendTo():

• prepend() и prependTo() - вставляет исходный элемент перед целевым, а не после.
• before() и insertBefore() - вставляет элемент перед целевыми элементами, а не перед первым потомком.
• after() и insertAfter() - вставляет элемент после целевых элементов, а не после последнего потомка.

Рассмотрим следующий пример:

Это выражение создаст новый абзац и вставит копии его после каждого рисунка внутри абзаца.

Другой тип DOM-манипуляций, к которому мы часто обращаемся это вложение элементов (или группы элементов) в какой-то другой элемент.
Например, нам захочется поместить все ссылки определенного класса внутрь <div>.
Сделать это можно с помощью команды wrap().

Этот метод вкладывает выбранный набор элементов внутрь переданного HTML-кода либо клона переданного элемента.
Например, чтобы вложить каждую ссылку класса surprise в <div> класса hello сделаем следующее:

Если же мы хотим вложить каждую ссылку в копию первого элемента <div> на странице:

Что же делать, если нам нужно поместить все выбранные элементы не по одному, а вместе в какой то общий контейнер? В этом нам поможет функция wrapAll().

Ну а когда мы хотим поместить в нужный нам контейнер не каждый элемент, а только его содержимое - используем функцию wrapInner().

Если мы хотим очистить или удалить набор элементов, это легко сделать с помощью команды remove(), которая удаляет все элементы вложенного набора из DOM на странице.

При этом стоит учитывать, что, как и многие другие команды jQuery, результатом работы этой команды является опять же набор элементов.
И пусть мы удалили его из DOM, мы все равно можем его дальше использовать в других функциях, например, тех же appendTo() или insertAfter() или другими похожими.

Чтобы очистить элементы от их содержимого можно использовать команду empty().
Она удаляет содержимое всех элементов DOM в наборе.

Распространено применение remove() и after() для операции замены.
Делается это подобным образом:

Поскольку after() возвращает исходный элемент <div>, мы можем попросту убрать его, оставив только новый абзац <p>.

Если идея вам понравилась, можно доработать ее и написать следующую функцию:

Тогда предыдущую операцию мы выполним уже так:

А что же делать, когда мы хотим не переместить элементы, а только скопировать?

Для этого в jQuery есть команда clone().
Она создает и возвращает копию набора. Все элементы и потомки копируются. При переданном параметре true копируются также все обработчики.

Клонирование элементов малоэффективно, пока мы не сделаем что-нибудь с копией. Тут уже все зависит от нашей фантазии.
Вот пара примеров:

Это выражение делает копию всех изображений и помещает их во все элементы <fieldset> класса photo.
Еще один пример:

Выполняет похожую операцию.
Здесь стоит отметить, что клонируются все элементы <ul>, включая их потомков <li>(если такие, конечно, есть).
И последний пример:

Это выражение похоже на предыдущую операцию, но после вставки копии команда end() выбирает исходный набор, после чего он скрывается командой hide().

Основное действие, которое выполняется с формами - это работа с их данными.

Команда val() возвращает содержимое атрибута value первого элемента в наборе.
Когда элемент формы содержит несколько вариантов выбора, возвращается массив значений всех этих вариантов.

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

Это выражение вернет значение единственного выбранного радиобатона с именем radioGroup(или же вернет значение undefined если ни один радиобатон не был выбран).

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

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

Еще одно направление использования val() - установка флажков чекбоксов и радиобатонов или выбор опций <select>. При этом передается массив значений, и, если любое из них совпадет со значением элемента, элемент будет выбран (отмечен).
Например:

Это выражение проверит все элементы <input> и <select> на совпадение их значений с любой из переданных строк: one, two или three.
При совпадении значений чекбоксы или радиобатоны будут отмечены, опция селекта будет выбрана.