Управление Элементами с jQuery

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

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

• .html() – Получить или установить содержание HTML.

• .text() – Получить или установить текстовое содержание; HTML будет конвертирован в текст.

• .attr() – Получить или установить значение предоставленного атрибута.

• .width() – Получить или установить ширину в пикселях первого элемента в выборке как целое число.

• .height() – Получить или установить высоту в пикселях первого элемента в выборке как целое число.

• .position() – Получить объект с информацией о положении для первого элемента в выборке относительно его первого позиционированного предка. Этот метод - только получатель.

• .val() – Получить или установить значение элементов формы.

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

Перемещение, Копирование и Удаление Элементов

В то время как есть множество способов перемещать элементы в 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" ) );
 
// Заметьте, что нет способа для доступа к элементу списка,
// который мы переместили, поскольку это возвращает сам список.

Далее: Как я получаю текстовое значение выбранной опции?