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

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

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

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

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

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

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

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

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

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

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

Пример

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

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

Смотрите также
Комментарии
Написать

(обязательно)

(обязательно)

Это не спам (обязательно)