Методы чтения и записи jQuery

Простейшими и часто используемыми операциями, которые выполняются над объектами jQuery, являются операции чтения и изменения значений HTML-атрибутов, стилей CSS, содержимого элементов и их геометрии.

Некоторые обобщения, касающиеся методов чтения и записи объекта jQuery:

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

· При использовании методов для записи они записывают новое значение во все элементы, находящиеся в объекте jQuery, и возвращают объект jQuery, что позволяет использовать их в цепочках вызовов методов.

· При использовании методов для чтения они читают значение только из первого элемента в наборе и возвращают единственное значение. (Если необходимо получить значения из всех элементов, используйте метод map()).

· При использовании методов для записи они часто могут принимать объекты в виде аргументов. В этом случае каждое свойство указанного объекта будет определять имя и устанавливаемое значение.

· При использовании методов для записи они часто могут принимать функции. В этом случае функция будет использоваться для вычисления устанавливаемого значения. Элемент, для которого должно быть вычислено значение, будет передан функции в ссылке this, в первом аргументе будет передан индекс элемента, а во втором аргументе – текущее значение.

Чтение и запись значений HTML-атрибутов

Метод attr() объекта jQuery – это метод чтения/записи значений HTML-атрибутов, и к нему относятся все обобщения, описанные выше.

Метод attr() предусматривает решение проблемы несовместимости броузеров и обработку специальных случаев и позволяет использовать имена HTML-атрибутов или имена эквивалентных им свойств в языке JavaScript (где они отличаются). Например, можно использовать имя «for» или «htmlFor», «class» или «className».

Метод removeAttr() – это родственная функция, которая полностью удаляет атрибут из всех выбранных элементов.

Ниже приводятся несколько примеров использования этих методов:

$("#icon").attr("src", "icon.gif"); // Ус­та­но­вить ат­ри­бут src

$("#banner").attr({src:"banner.gif", alt:"Advertisement", width:720}); // Ус­та­но­вить сра­зу 3 ат­ри­бу­та

$("a").attr("target", "_blank"); // Все ссыл­ки за­гру­жать в но­вых ок­нах

$("a").removeAttr("target"); // Все ссыл­ки за­гру­жать в этом ок­не

Чтение и запись значений CSS-атрибутов

Метод css() напоминает метод attr(), но работает не с HTML-атрибутами, а со стилями CSS элемента.

При чтении значений стилей метод css() возвращает текущий (или «вычисленный») стиль элемента.

Возвращаемое значение может быть определено в атрибуте style или в таблице стилей.

Важно!

Нельзя получить значения составных стилей, таких как «font» или «margin». Вместо этого следует запрашивать отдельные стили, такие как «font-weight», «font-family», «margin-top» или «margin-left».

При записи значений стилей метод css() просто добавляет их в атрибут style элемента.

Метод css() позволяет указывать имена стилей CSS с дефисами («background-color») или имена свойств в языке JavaScript с переменным регистром символов («backgroundColor»).

При чтении значений стилей метод css() возвращает числовые значения в виде строк с добавлением единиц измерения в конце. Однако при записи он преобразует числа в строки и добавляет суффикс «px» (pixels – пикселы), если это необходимо:

$("h1").css("font-weight"); // На­сы­щен­ность шриф­та пер­во­го эле­мен­та

$("h1").css("fontWeight"); // До­пус­ка­ет­ся ис­поль­зо­вать име­на свойств

 $("h1").css("font"); // Ошиб­ка: нель­зя за­пра­ши­вать со­став­ные сти­ли

$("h1").css("font-variant", "smallcaps"); // Ус­та­но­вить стиль всех эле­мен­тов

$("div.note").css("border", "solid black 2px"); // Со­став­ные сти­ли мож­но ус­та­нав­ли­вать

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

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

Обычно бывает необходимо добавить, удалить или проверить присутствие какого-то одного имени в списке, тогда как потребность замещать один список классов другим возникает крайне редко. По этой причине в объекте jQuery определены удобные методы для работы с атрибутом class.

Методы addClass() и remo­veClass() добавляют и удаляют классы в выбранных элементах.

Метод togg­le­Class() добавляет классы в элемент, если они отсутствуют в нем, и удаляет их, если они присутствуют.

Метод hasClass() проверяет присутствие указанного класса.

Ниже приводятся несколько примеров использования этих методов:

$("h1").addClass("hilite"); // До­ба­вить класс во все эле­мен­ты

$("h1+p").addClass("hilite first"); // До­ба­вить 2 клас­са

$("p").removeClass("hilite"); // Уда­лить класс hilite из всех эле­мен­тов

$("p").removeClass("hilite first"); // До­пус­ти­мо уда­лять не­сколь­ко клас­сов

$("tr:odd").toggleClass("oddrow"); // До­ба­вить класс, ес­ли от­сут­ст­ву­ет, // или уда­лить в про­тив­ном слу­чае

$("h1").toggleClass("big bold"); // Пе­ре­клю­чить сра­зу два клас­са

$("p").hasClass("first") // Име­ет ли этот класс?

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

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