Управление Элементами с jQuery
Есть много способов изменить существующий элемент с jQuery. Среди наиболее распространенных задач - изменение внутреннего HTML содержимого или атрибута элемента. jQuery предлагает простые кросс-браузерные методы для этих видов манипуляций.
Можно также получить информацию об элементах, используя многие из тех же самых методов в их воплощениях в виде получетелей. . Вот несколько методов, которые можно использовать, чтобы получить и установить информацию об элементах:
.html()
– Получить или установить содержание HTML..text()
– Получить или установить текстовое содержание; HTML будет конвертирован в текст..attr()
– Получить или установить значение предоставленного атрибута..width()
– Получить или установить ширину в пикселях первого элемента в выборке как целое число..height()
– Получить или установить высоту в пикселях первого элемента в выборке как целое число..position()
– Получить объект с информацией о положении для первого элемента в выборке относительно его первого позиционированного предка. Этот метод - только получатель..val()
– Получить или установить значение элементов формы.
Изменение чего-либо в элементах тривиально, но помните, что изменение будет влиять на все элементы в выборке. Если Вы хотите изменить только один элемент, убедитесь, что указали его в выборке прежде, чем вызвать метод установщика.
Пример
$( "#myDiv p:first" ).html( "Новый первый параграф!" );
Попробуйте Сами »
Перемещение, Копирование и Удаление Элементов
В то время как есть множество способов перемещать элементы в DOM, обычно используют два подхода:
Поместите выбранный элемент(ы) относительно другого элемента.
Поместите элемент относительно выбранного элемента(ов).
Например, jQuery обеспечивает .insertAfter()
и .after()
. Метод .insertAfter()
помещает выбранный элемент(ы) после элемента, который обеспечивается как параметр. Метод .after()
помещает элемент, обеспеченный как параметр, после выбранного элемента. Несколько других методов следуют этому шаблону: .insertBefore()
и .before()
, .appendTo()
и .append()
, и .prependTo()
и .prepend()
.
Метод, который имеет больше смысла, будет зависеть от того, какие элементы выбираются, и должны ли Вы сохранить ссылку на элементы, которые Вы добавляете на страницу. Если Вы должны сохранить ссылку, Вы будете всегда использовать первый подход – размещать отобранные элементы относительно другого элемента – поскольку это возвращает элемент(ы), которые Вы размещаете. В этом случае, .insertAfter()
, .insertBefore()
, .appendTo()
и .prependTo()
должны быть предпочтительными инструментами.
// Перемещение элементов, используя различные подходы.
// Сделать первый элемент списка последним элементом списка:
var $li = $( "#myList li:first" ).appendTo( "#myList" );
// Другой подход для той же задачи:
$( "#myList" ).append( $( "#myList li:first" ) );
// Заметьте, что нет способа для доступа к элементу списка,
// который мы переместили, поскольку это возвращает сам список.