Примеры манипулирования DOM с помощью jQuery

В предыдущих статьях категории Уроки JavaScript мы рассмотрели основные принципы DOM, узнали, как можно взаимодействовать и манипулировать элементами DOM с помощью простого JavaScript. В этой статье мы немного расширим данную тему и рассмотрим примеры манипулирования элементами DOM с помощью мощной библиотеки JavaScript – jQuery.

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

jQuery может получать доступ к элементам DOM HTML-страницы, а также умеет легко ними манипулировать, используя набор простых методов. Некоторые методы просто меняют значения атрибутов, другие модифицируют целые элементы (или группы элементов) с помощью копирования, удаления или перемещения. Методы jQuery, которые изменяют значения свойств, называют «сеттерами» (setters), т.е., они устанавливают какие-то значения. Некоторые из jQuery методов, например .attr(), .html() и .val(), в свою очередь являются и «геттерами» (getters), т.е., они могут получать информацию от DOM-элементов и в дальнейшем модифицировать ее.

В сегодняшней статье мы рассмотрим некоторые методы обхода и манипуляции элементами DOM с помощью методов библиотеки jQuery. Сегодня будут рассмотрены следующие методы:

text()
html()
val()
attr()
prepend()
append()
before()
after()
wrap()
remove()
empty()
clone()

text()

Метод text() может читать (получать) или писать (заменять) текст внутри данного элемента HTML. Ниже пример кода для этой функции:

var text = $('#element').text();
$('#element').text('Новый текст для выбранного элемента.');

Метод text() без параметров вернет текст выбранного HTML-элемента. Это показано в первой строке в приведенном выше примере.

Метод text('Новый текст для выбранного элемента.'), в котором принимается строковый параметр, заменит существующий текст элемента HTML новым заданным текстом. Если вы попробуете вставить HTML код с помощью элемента text(), HTML код будет экранирован, и он будет отображаться как текст. Он не будет отформатирован как HTML код.

html()

Метод html() работает так же, как и метод text(), за исключением того, что метод возвращает HTML-код заданного элемента, а не только текст. Ниже пример кода для этой функции:

var html = $('#element').html();
$('#element').html('Новый текст для выбранного элемента.');

Метод html() без параметров просто возвращает HTML-код выбранного элемента.

Метод html('Новый текст для выбранного элемента.'), в котором принимается строковый параметр, заменяет HTML-код выбранного элемента. HTML код будет отформатирован в виде HTML-кода, а не экранированного текста.

val()

Метод val() используется для получения и установки значения полей формы (например, input). Ниже пример кода для этой функции:

var theValue = $('#formField').val();
$('#formField').val('Новое значение для выбранного элемента.');

Метод val(), который не принимает параметры, возвращает значение выбранного поля формы.

Метод val('Новое значение для выбранного элемента.'), в котором принимается строковый параметр, установит новое значение поля.

attr()

Функция attr() может читать и модифицировать атрибуты HTML-элементов. Вот простой пример:

// у нас имеется картинка
<img id="photo" src="some-image.jpg" alt="some alt text" />
// заменяем атрибут alt
$('#photo').attr('alt', 'новое значение атрибута');

prepend()

Метод prepend() вставляет новый HTML код в начало выбранного HTML-элемента. Новый HTML объединяется с тем HTML, который уже был у элемента. Ниже пример кода для этой функции:

$('#element').prepend('<p>Новый добавленный HTML код</p>');

append()

Метод append() вставляет новый HTML-код в конец выбранного HTML-элемента. Новый HTML объединяется с HTML кодом, который был у элемента до этого. Ниже пример кода для этой функции:

$('#element').append('<p>Новый добавленный HTML код</p>');

before()

Метод before() вставляет HTML перед выбранным элементом (вне элемента). Ниже пример кода для этой функции:

$('#element').before('<div>Добавленный элемент ДО</div>');

after()

Метод after() вставляет HTML после выбранного элемента (вне элемента). Ниже пример кода для этой функции:

$('#element').after('<div>Добавленный элемент ПОСЛЕ</div>');

wrap()

Метод wrap() может обернуть выбранный элемент HTML в другой элемент HTML. Вот пример того, как использовать wrap():

$('#element').wrap('<div class="new-wrapper"></div>');

В этом примере выбранный элемент (с идентификатором element) «оборачивается» в данный элемент div. Т.е., новый div будет родителем для выбранного элемента.

remove()

Метод remove() удаляет выбранный элемент HTML из дерева DOM. Ниже пример кода для этой функции:

$('#element').remove();

Используйте метод .remove(), когда вам нужно удалить сам элемент, а также все внутри него. Также будут удалены все связанные с этими элементами события и данные jQuery. Если вам нужно удалить элементы без удаления данных и событий, используйте вместо этого метод .detach().

empty()

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

$('#element').empty();

Этот метод удаляет не только дочерние (и другие потомки) элементы, но и любой текст в наборе соответствующих элементов. Это связано с тем, что согласно спецификации DOM любая строка текста в элементе считается дочерним узлом этого элемента.

clone()

Метод clone() клонирует (копирует) выбранный элемент, что позволяет продублировать нужный элемент в другом месте дерева DOM. Ниже пример кода для этой функции:

var clone = $('#element').clone();
clone.insertBefore('#anotherElement');

Вы также можете ознакомиться с более подробной шпаргалкой по jQuery.

Вот и все на сегодня! Надеемся, что данная небольшая шпаргалка пригодится вам в процессе программирования на JavaScript.

Tags: JavaScript

Recent Posts

Отопление и горячая вода – когда нужно, а не когда соизволят включить

Тепло в доме и горячая вода в любое время для многих жителей многоквартирных и частных… Read More

19/09/2020

Инструкция по скачиванию видео с сервиса TikTok (бесплатно и без watermark)

Если вы еще не слышали о TikTok, тогда рекомендуем вам сначала ознакомиться с этим кратким… Read More

17/09/2020

Что есть в бюджетном ноутбуке – на какие характеристики рассчитывать?

Прошли те времена, когда приличный ноутбук стоил от 1000 долларов. Сегодня можно купить довольно неплохой… Read More

16/09/2020

Что лучше – цифровое телевидение Т2 или интернет-телевидение?

Современную жизнь невозможно представить без телевидения. Оно позволяет узнавать о событиях в Украине и мире,… Read More

02/09/2020

Гипоаллергенная подушка. Для чего она важна?

Сейчас найдется мало людей, у которых нет аллергии на продукты или пыльцу растений. Считается, что… Read More

28/08/2020

Футбольный Инстаграм: что нового у топовых футболистов

Некоторые известные футболисты тщательно скрывают свои личную жизнь, а другие - активно постят фотографии с… Read More

24/08/2020