Примеры манипулирования 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.