Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 15.03.2024)
428420
солдат
347
самолетов
325
вертолетов
6758
танков
12949
ББМ
10580
артиллерия
717
ПВО
1017
РСЗО
13993
машин
26
корабли и катера
Примеры манипулирования DOM с помощью jQuery
Опубликовано

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

 

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *