Манипуляция с элементами в jQuery. Часть 1

Манипуляция с элементами в jQuery

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

Для практической работы нам потребуется несколько элементов верстки, к примеру такой:

<div class="container content">
	<img src="http://lorempixel.com/400/200/city" alt="" id="img1" width="400" height="200
">
	<p>Lorem ipsum dolor sit amet.</p>
	<ul>
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
	</ul>
</div>

Первые два метода, о которых мы узнаем, будут методы html и text. Первый, метод html, позволяет получить или изменить HTML код выбранного элемента. Второй, метод text, возвращает или изменяет текст выбранного элемента. Давайте поэкспериментируем с ними.

Например, получим весь html-код блока content:

$(function(){
	var content = $('.content').html();
	console.log(content);
});

Манипуляция с элементами в jQuery

Если же передать в метод html параметром некий код HTML, тогда мы перепишем HTML выбранного элемента. Например, давайте три имеющихся элемента списка заменим двумя:

$(function(){
	$('.content ul').html('<li><a href="#">Первый элемент списка</a></li><li><a href="#">Второй элемент списка</a></li>');
});

Манипуляция с элементами в jQuery

По аналогичной схеме работает и метод text. Используя его без параметра, мы получим текстовое содержимое элемента. Передавая параметром строку текста, мы заменим текст внутри элемента. Давайте получим все текстовое содержимое блока content:

$(function(){
	var text = $('.content').text();
	console.log(text);
});

Манипуляция с элементами в jQuery

А теперь попробуем заменить текст в элементах списка:

$('.content li a').text('Новый текст');

Манипуляция с элементами в jQuery

Пока все просто. Методы html и text на самом деле используются достаточно нечасто при манипуляции элементами, поскольку работают достаточно глобально. Например, используя метод html достаточно сложно добавить в конкретный элемент дочерний элемент, не удалив при этом уже существующие. Для этих целей куда проще использовать другие методы jQuery для манипуляции DOM, с которыми мы и познакомимся уже в следующих статьях.

На этом текущая статья завершена. Больше о jQuerу вы можете узнать из наших уроков или курса. Удачи!

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree