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

Последняя пара методов объекта jQuery, имеющих отношение к геометрии элементов, - это методы scrollTop и scrollLeft, позволяющие получить позиции полос прокрутки для элемента или множество позиций полос прокрутки для всех элементов. Эти методы могут применяться и к элементам документа, и к объекту Window, а при вызове для объекта Document они возвращают или устанавливают позиции полос прокрутки объекта Window, хранящего документ. В отличие от других методов записи, методам scrollTop и scrollLeft нельзя передавать функции.

Метод scrollTop как метод чтения и записи можно использовать в паре с методом height, чтобы на их основе определить метод, прокручивающий окно на указанное число страниц:

  // Прокручивает окно на n страниц, n может быть дробным и отрицательным числом
  function page(n) {
   var w = $(window); // Обернуть окно объектом jQuery
   var pagesize = w.height; // Получить размер страницы
   var current = w.scrollTop; // Текущие позиции полос прокрутки
   w.scrollTop(current + n*pagesize); // Установить новые позиции
  } // полос прокрутки

19.2.7. Чтение и запись данных в элементе

Библиотека jQuery определяет метод чтения/записи с именем data, который возвращает или устанавливает данные, связанные с любым элементом документа или с объектами Document и Window. Возможность связывать данные с любыми элементами является одной из наиболее важных и мощных особенностей: она лежит в основе механизма регистрации обработчиков событий и последовательностей визуальных эффектов в библиотеке jQuery, и в определенных случаях метод data может оказаться полезным в ваших сценариях.

Чтобы связать данные с элементами в объекте jQuery, нужно вызвать data как метод записи, передав ему в виде двух аргументов имя и значение. Методу data как методу записи можно также передать единственный объект, каждое свойство которого будет использоваться как пара имя/значение, связываемая с элементом или элементами в объекте jQuery. Однако обратите внимание, что, когда методу data передается объект, свойства этого объекта будут замещать все данные, ранее связанные с элементом или элементами. В отличие от многих других методов записи, с которыми мы уже познакомились, метод data не вызывает функцию, переданную ему. Если во втором аргументе передать методу data функцию, она будет сохранена, как любое другое значение.

Конечно, метод data может также использоваться в роли метода чтения. При вызове без аргументов он возвращает объект, содержащий все пары имя/значение, связанные с первым элементом в объекте jQuery. При вызове метода data с единственным строковым аргументом он возвращает значение, связанное с этой строкой в первом элементе.

Для удаления данных из элемента или элементов можно использовать метод removeData. (Вызов метода data с именованным значением null или undefined фактически не удаляет данные.) Если методу removeData передать строку, он удалит значение, связанное с этой строкой в элементе или элементах. Если вызвать метод removeData без аргументов, он удалит все данные:

  $("div").data("x", 1); // Записать некоторые данные
  S("div.nodata”).removeData("x"); // Удалить некоторые данные
var х = $('flmydiv').data("x”); // Получить некоторые данные

Кроме того, библиотека jQuery определяет вспомогательные функции, действующие аналогично методам data и removeData. Таким образом, связать данные с отдельным элементом е можно с помощью метода или функции data:

  $(е).data(...) // Метод
  $.data(e, ...) // Функция

Механизм хранения данных в библиотеке jQuery не использует для этой цели свойства самих элементов, но добавляет одно специальное свойство ко всем элементам, имеющим связанные с ними данные. Некоторые броузеры не позволяют добавлять свойства к элементам <applet>, <object> и <embed>, поэтому библиотека jQuery просто не дает возможности связать данные с элементами этих типов.

19.3. Изменение структуры документа

В разделе 19.2.5 мы познакомились с методами html и text, позволяющими изменять содержимое элемента. В этом разделе будут рассматриваться методы, позволяющие производить более сложные изменения в документе. В броузере HTML-документы представлены в виде дерева узлов, а не в виде линейной последовательности символов, поэтому вставку, удаление и замену фрагмента документа выполнить не так просто, как фрагмента строки или массива. В следующих подразделах описываются различные методы объекта jQuery, предназначенные для внесения изменений в документ.

19.3.1. Вставка и замена элементов

Начнем с самых основных методов вставки и замены. Все методы, демонстрирующиеся ниже, принимают аргумент, определяющий содержимое, которое должно быть вставлено в документ. Это может быть строка с простым текстом или с разметкой HTML, определяющая содержимое, объект jQuery, элемент Element или текстовый узел Node. Вставка может быть выполнена внутрь, перед, после или вместо (в зависимости от метода) каждого выбранного элемента. Если в качестве вставляемого содержимого используется элемент, уже присутствующий в документе, он перемещается из текущего местоположения. Если выполняется вставка сразу в несколько мест, элемент будет скопирован необходимое число раз. Все эти методы возвращают объект jQuery, относительно которого они вызываются. Обратите, однако, внимание, что после вызова метода replaceWith элементы, находящиеся в объекте jQuery, исключаются из документа:

  $("#log").appendC<br/>"+message); // Добавить содержимое в конец элем. #1од
  $("h1").ргерепсК // Добавить символ параграфа в начало каждого элемента <h1>
  $( "hi”).before("<hr/>'); // Вставить линию перед каждым элем. <h1>
  $( "hi").after("<hr/>"); // И после
  $( "hr").replaceWith("<br/>”); // Заменить элементы <hr/> на <Ьг/>
  $("h2").each(function { // Заменить <h2> на <h1>,
   var h2 = $(this); // сохранив содержимое
   h2.replaceWith("<h1>" + h2.html + "</h1>");
  });
  // Методы after и before могут также применяться к текстовым узлам
  // Ниже демонстрируется другой способ добавления символа параграфа во все <h1>