Примеры решения задач

Задача

Задача. Оберните каждый <h3> в <div>.

Решение:

$('h3').wrap('div');

Задача

Задача. Найдите все теги <span>, обернутые абзацами <p>, и удалите эти абзацы, не трогая тегов <span>.

Решение:

$('p > span').unwrap();

Задача

Задача. Перед каждым абзацем <p> вставьте <span> с текстом '!!!', а после абзацев - span с текстом '???'.

Решение:

$('p').before('!!!').after('???');

Задача

Задача. Удалите все <h3>.

Решение:

$('h3').remove();

Задача

Задача. Получите содержимое атрибута src картинки по ее id, равным www.

Решение:

var src = $('#www').attr('src');
alert(src);

Задача

Задача. Получите содержимое атрибутов src всех картинок на странице и последовательно выведите их алертом.

Решение:

$('img').each(
	function (){
		alert($(this).attr('src');
	}
);

Задача

Задача. Сделайте отмеченным первый чекбокс на странице.

Решение:

$('input[type="checkbox"]:first').prop('checked', true);

Задача

Задача. Сделайте неотмеченным первый чекбокс на странице.

Решение:

$('input[type="checkbox"]:first').prop('checked', false);

Задачи для решения

Задачи на оборачивание элементов (wrap)

Для решения задач данного блока вам понадобятся следующие методы: wrap, unwrap, wrapInner, wrapAll.

Оберните каждый <h2> в <div>.

Решение:

$('h2').wrap('<div>');

Оберните каждый <h2> в <div> с классом test.

Решение:

$('h2').wrap('<div class="test"></div>');

Оберните каждый <h2> внутри в <i>.

Решение:

$('h2').wrapInner('<i>');

Оберните все <h2> в один <i>.

Решение:

$('h2').wrapAll('<i>');

Найдите абзацы <p>, обернутые дивами <div>, и удалите эти дивы.

Решение:

$('div > p').unwrap();

Задачи на вставку элементов

Для решения задач данного блока вам понадобятся следующие методы: append, prepend, after, before.

Перед каждым <h2> вставьте '<p>!</p>'.

Решение:

$('h2').before('<p>!</p>');

После каждого <h2> вставьте '<p>?</p>'.

Решение:

$('h2').after('<p>?</p>');

Сделайте первое и второе задание одновременно (цепочкой).

Решение:

$('h2').before('<p>!</p>').after('<p>?</p>');

Внутри каждого <h2> в начале вставьте '!'.

Решение:

$('h2').prepend('!');

Внутри каждого <h2> в конце вставьте '?'.

Решение:

$('h2').apppend('?');

Сделайте предыдущие два задания одновременно + окрасьте все <h2> в красный цвет.

Решение:

$('h2').prepend('!').append('?').css('color', 'red');

Задачи на замену элементов

Для решения задач данного блока вам понадобятся следующие методы: replaceWith, replaceAll.

каждый <h2> замените на его содержимое.

Решение:

$('h2').replaceWith($('h2').text());

каждый <h2> замените на его содержимое, стоящее в абзаце.

Решение:

$('h2').replaceWith($('h2').text().wrap('p'));

Задачи на удаление элементов

Для решения задач данного блока вам понадобятся следующие методы: remove, empty.

Удалите все <h2>.

Решение:

$('h2').remove();

Сделайте все <h2> пустыми.

Решение:

$('h2').empty();

Задачи на атрибуты

Для решения задач данного блока вам понадобятся следующие методы: attr.

Получите атрибут href ссылки из класса www.

Решение:

alert($('.www a').attr('href'));

Получите атрибут href первой ссылки.

Решение:

alert($('a:first').attr('href'));

Получите атрибут href всех ссылок и последовательно выведите алертом.

Решение:

$('a').each(function (){
	alert($(this).attr('href'));
});

Замените href каждой ссылки на '!'.

Решение:

$('a').attr('href','!');

Добавьте каждой ссылке атрибут target='_blank'.

Решение:

$('a').attr('target', '_blank');

Замените содержимое каждой ссылки (анкоры) на их href.

Решение:

$('a').each(function (){
	var $elem = $(this);
	$elem.html($elem.attr('href'));
});

Вставьте после содержимого каждой ссылки их href в круглых скобках.

Решение:

$('a').each(function (){
	$elem = $(this);
	$elem.html($elem.attr('href'));
});

Вставьте в атрибут title каждой ссылки ее анкор.

Решение:

$('a').each(function (){
	var $elem = $(this);
	$elem.attr('title', $elem.html());
});

Задачи на работу с классами

Для решения задач данного блока вам понадобятся следующие методы: addClass, removeClass, toggleClass, hasClass.

Добавьте всем li класс test.

Решение:

$('li').attr('class','test');

Удалите у li класс www.

Решение:

$('li.www').removeAttr('class');

Добавьте всем li класс www, если его нет, и удалите, если есть.

Решение:

$('li').each(function () {
	var $elem = $(this);
	if($elem.attr('class') != 'www'){
		$elem.attr('class', 'www')
	} else {
		$elem.removeAttr('class')
	}
});

Проверьте, что хотя бы одна из ссылок имеет класс www.

Решение:

$('a').each(function() {
	if($(this).attr('class') == 'www')
	alert('Есть ссылка с классом www')
}) 

Задачи на атрибуты форм

Для решения задач данного блока вам понадобятся следующие методы: val, prop.

Выведите value инпута с классом in.

Решение:

alert($('input.in').val());

Выведите содержимое textarea с классом text.

Решение:

alert($('textarea.text').val());

Выведите последовательно value каждого инпута.

Решение:

$('input').each(function (){
	alert($(this).val());
});

Установите value всех инпутов в '!'.

Решение:

alert($('textarea.text').val('!'));

В value всех инпутов с классом number находятся числа. Сделайте так, чтобы в них стали квадраты этих чисел.

Решение:

$("input.number").each(function (){
	var $elem = $(this);
	var value = $elem.val();
	$elem.val(value * value);
});

Установите все отмеченные чекбоксы в неотмеченные.

Решение:

$('checkbox').prop('checked', false);

Установите все неотмеченные чекбоксы в отмеченные.

Решение:

$('checkbox').prop('checked', true);

Установите все отмеченные чекбоксы в неотмеченные и наоборот.

Решение:

$('checkbox').each(function (){
	$(this).prop('checked', !$(this).prop('checked'));
});

Сделайте неотмеченным последний чекбокс на странице.

Решение:

$("checkbox:last").prop('checked', false);

Задачи на размеры

Для решения задач данного блока вам понадобятся следующие методы: width, innerWidth, outerWidth.

Узнайте ширину и высоту первого, второго и третьего дивов <div> (по очереди) непосредственно внутри #wrapper без учета padding и границы.

Решение:

$('#wraper').children(':lt(3)').each(function() {
	var width = $(this).width();
	var height = $(this).height();
	alert("Ширина: "+width+" Высота: "+height);
}) 

То же самое с учетом padding.

Решение:

$('#wraper').children(':lt(3)').each(function() {
	var width = $(this).innerWidth();
	var height = $(this).innerHeight();
	alert("Ширина: "+width+" Высота: "+height);
}) 

То же самое с учетом padding и границы.

Решение:

$('#wraper').children(':lt(3)').each(function() {
	var width = $(this).outerWidth();
	var height = $(this).outerHeight();
	alert("Ширина: "+width+" Высота: "+height);
}) 

То же самое с учетом padding, границы и margin.

Решение:

$('#wraper').children(':lt(3)').each(function() {
	var width = $(this).outerWidth(true);
	var height = $(this).outerHeight(true);
	alert("Ширина: "+width+" Высота: "+height);
})