JavaScript. Подробное руководство, 6-е издание
вернуться

Флэнаган Дэвид
Шрифт:

$("h1").css({ backgroundColor: "black", // Записать сразу несколько стилей

textColor: "white", // имена с переменным регистром

fontVariant: "small-caps", // лучше подходят на роль имен

padding: "10рх 2рх 4рх 20рх",// свойств объекта

border: "dotted black 4рх" });

// Увеличить размер шрифта во всех элементах <h1> на 25%

$("h1").css("font-size", function(i.curval) {

return Math.round(1.25*parseInt(curval));

});

19.2.3. Чтение и запись CSS-классов

Напомню, что значение атрибута

class
(в языке JavaScript доступного в виде свойства
className
) интерпретируется как список имен классов CSS, разделенных пробелами. Обычно бывает необходимо добавить, удалить или проверить присутствие какого-то одного имени в списке, тогда как потребность замещать один список классов другим возникает крайне редко. По этой причине в объекте
jQuery
определены удобные методы для работы с атрибутом
class
. Методы
addClass
и
removeClass
добавляют и удаляют классы в выбранных элементах. Метод
toggleClass
добавляет классы в элемент, если они отсутствуют в нем, и удаляет их, если они присутствуют. Метод
hasClass
проверяет присутствие указанного класса. Ниже приводятся несколько примеров использования этих методов:

$("h1").toggleClass("hilite", false); //

Добавить класс во все элементы <h1> Добавить 2 класса в <р> после <h1> Передать функцию, чтобы добавить вычисляемый класс во все выбранные элементы

Удалить класс из всех элементов <р> Допустимо удалять несколько классов Удалить вычисляемый класс из элем.

Удалить все классы из всех <div>

Добавить класс, если отсутствует, или удалить в противном случае Переключить сразу два класса Переключить вычисляемый класс или классы

Действует как addClass Действует как removeClass

Имеет ли какой-нибудь <р> этот класс? То же самое

is - более гибкий, чем hasClass

Обратите внимание, что метод

hasClass
не такой гибкий, как методы
addClass, removeClass
и
toggleClass.
Метод
hasClass
может работать только с одним именем класса и не поддерживает возможность передачи ему функции. Он возвращает true, если хотя бы один из выбранных элементов содержит указанный класс, и false - в противном случае. Метод
is
(описываемый в разделе 19.1.2) более гибкий и может использоваться для той же цели.

Эти методы объекта

jQuery
подобны методам свойства
classList
, о котором рассказывалось в разделе 16.5, но методы объекта
jQuery
работают во всех броузерах, а не только в тех, которые поддерживают свойство
classList
, определяемое стандартом HTML5. И, конечно же, методы объекта
jQuery
работают с множеством элементов и могут добавляться в цепочки вызовов методов.

19.2.4. Чтение и запись значений элементов HTML-форм

Метод

val
служит для чтения и записи значений атрибутов
value
элементов HTML-форм, а также для чтения и записи состояния выбора флажков, радиокнопок и элементов
<select>:

$("«surname").val // Получить значение текстового поля surname

$("«usstate").val // Получить единственное значение из элемента <select>

$("select«extras”).val // Получить массив значений из <select multiple>

$("input:radio[name=ship]:checked").val // Получить значение атрибута

// checked радиокнопки

$("«email").val("Invalid email address") // Установить значение текст, поля

$("input:checkbox").val(["opt1", "opt2"])
// Установить флажки с указанными именами

// или значениями

$("input:text").val(function { // Сбросить все текстовые поля

return this.defaultValue; // в значения по умолчанию

})

19.2.5. Чтение и запись содержимого элемента

Методы

text
и
html
читают и записывают содержимое элемента или элементов в виде простого текста или разметки HTML. При вызове без аргументов метод
text
возвращает содержимое всех вложенных текстовых узлов из всех выбранных элементов в виде простого текста. Этот метод работает даже в броузерах, не поддерживающих свойства
textContent
и
innerText
(раздел 15.5.2).