15. Введение в jQuery

Команды для работы с обернутым набором

Денег, потраченных на эту книгу, совершенно не жаль!

«Помните дни (не столь давние), когда неопытные авторы страниц пытались взбодрить свои страницы с помощью всякой гадости вроде рамок, мерцающего текста, броского фона, затрудняющего чтение текста на странице, раздражающих анимированных GIF-изображений и, что, пожалуй, хуже всего, фонового звука, сопровождающего загрузку страницы (и позволяющего проверить, насколько быстро пользователь закроет браузер)?

Много воды утекло с тех пор.

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

jQuery. Подробное руководство
по продвинутому JavaScript
Бер Бибо, Иегуда Кац

В этом разделе — краткий обзор команд jQuery.

Работа с атрибутами элементов

Команда Что делает
attr(name) Извлекает значение указанного атрибута первого элемента обертки
attr(name, value) Устанавливает значение value атрибута name для всех элементов обертки
attr(attributes) Устанавливает значения атрибутов для всех элементов обертки. Атрибуты и их значения передаются в виде объекта attributes (например, {width:200,height:100})
removeAttr(name) Удаляет атрибут name у всех элементов обертки

Работа с классами

Команда Что делает
addClass(names) Добавляет класс (или классы через пробелы) ко всем элементам обёртки
removeClass(names) Удаляет класс (или классы через пробелы) у всех элементов обёртки
toggleClass(name) Добавляет класс, если он отсутствует, и удаляет класс, если он присутствует, у всех элементов обертки

Получение и установка стилей

Команда Что делает
css(name) Возвращает значение CSS-свойства с именем name для первого элемента обертки
css(name,value) Устанавливает свойство name в значение value для всех элементов обертки
css(obj) Устанавливает стилевые свойства, заданные в объекте obj для всех элементов обертки.
Примеры
  • $('p').css('line-height', '1.8em');
    Выставляет высоту строки в 1.8em для всех абзацев.
  • $('li:odd').css({color:'white', backgroundColor:'black'});
    Устанавливает два стилевых правила для нечетных элементов списка.

Получение и установка содержимого элемента

Команда Что делает
html() Возвращает HTML-разметку содержимого первого элемента обертки
html(marking) Устанавливает HTML-разметку marking в качестве содержимого каждого элемента обертки
Пример
  • $('a').html('ссылка');
    Заменяет весь текст в ссылках на странице текстом 'ссылка'.

Перемещение и копирование элементов

Команда Что делает
append(content) Добавляет content (HTML-код, элемент, или обертка) к каждому элементу обертки.
appendTo(target) Перемещает все элементы обёртки в конец содержимого, заданного аргументом target (селектор или элемент)

Удаление элементов

Команда Что делает
remove() Удаляет все элементы обертки со страницы
empty() Удаляет содержимое из всех элементов обертки

Копирование элементов

Команда Что делает
clone(copyFlag) Создает и возвращает копию обертки. Если copyFlag=true, копируются и обработчики событий
Пример
  • $("img").clone().appendTo("#f");
    Создаются копии всех картинок, и этот набор добавляется к элементу с id="f".