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

Задача

Задача. Всем <h3> поставьте текст '!!!'.

Решение:

$('h3').html('!!!');

Задача

Задача. Всем <h3> сделайте текст зеленого цвета.

Решение:

$('h3').css('color', 'green');

Задача

Задача. Всем <h3> сделайте жирный текст зеленого цвета.

Решение:

$('h3').css({color: 'green', fontWeight: 'bold'});

Задача

Задача. Получите и покрасьте в красный цвет все элементы с классом zzz.

Решение:

$('.zzz').css('color', 'red');

Задача

Задача. Получите и покрасьте в красный цвет все заголовки.

Решение:

$(':headers').css('color', 'red');

Задача

Задача. Получите и покрасьте в красный цвет все заголовки с классом zzz.

Решение:

$(':headers.zzz').css('color', 'red');

Задача

Задача. Получите и покрасьте в красный цвет все заголовки НЕ с классом zzz.

Решение:

$(':headers:not(.zzz)').css('color', 'red');

Задача . На each

Задача. Поменяйте всем <li> на странице их текст на их порядковый номер.

Решение:

$('li').each(function (index, elem){
	$(elem).html(index);
});

Можно также вместо elem использовать this:

$('li').each(function (index, elem) {
	$(this).html(index);
});

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

Задачи на html, text, css

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

Всем <h2> поставьте текст "!".

Решение:

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

Всем <h3> сделайте красный цвет.

Решение:

$('h3').css('color', 'red');

Всем <h2> сделайте голубой цвет и font-size: 30px.

Решение:

$('h2').css({'color': 'blue', 'font-size': '30px'});

Задачи на простые селекторы, +, ~

Получите и покрасьте в красный цвет следующие элементы:

Все элементы с классом test.

Решение:

$('.test').css('color', 'red');

Все <h2> с классом test.

Решение:

$('h2.test').css('color', 'red');

Все абзацы которые следуют сразу за абзацами.

Решение:

$('p + p').css('color', 'red');

Все <li>, которые следуют сразу за <li> с классом www.

Решение:

$('li + li.www').css('color', 'red');

Все <i> внутри <h2>.

Решение:

$('h2 i').css('color', 'red');

Все <i> непосредственно внутри <h2>.

Решение:

$('h2 > i').css('color', 'red');

На селекторы jQuery

Для решения задач данного блока вам понадобятся следующие псевдоклассы jQuery: :has, :header, :empty, :contains, :not, :last, :first.
Получите и покрасьте в красный цвет следующие элементы:

Все заголовки.

Решение:

$(':header').css('color', 'red');

Все <h2> НЕ с классом test.

Решение:

$('h2:not(.test)').css('color', 'red');

Все заголовки НЕ с классом test.

Решение:

$(':header:not(.test)').css('color', 'red');

Все заголовки, которые следуют сразу за заголовками.

Решение:

$(':header + :header').css('color', 'red');

Все заголовки с классом test, которые следуют сразу за заголовками с классом test.

Решение:

$(':header.test + :header.test').css('color', 'red');

Все пустые элементы.

Решение:

$(':empty').css('color', 'red');

Первый абзац <p>.

Решение:

$('p:first').css('color', 'red');

Последний абзац <p>.

Решение:

$('p:last').css('color', 'red');

Все <li>, которые содержат текст 'пункт'.

Решение:

$('li:contains("пункт")').css('color', 'red');

Все <h2>, внутри которых есть тег <i>.

Решение:

$('h2:has(i)').css('color', 'red');

Все <h2>, которые непосредственно содержат <i>.

Решение:

$('h2 > i').css('color', 'red');

Задачи на селекторы jQuery

Получите и покрасьте в красный цвет следующие элементы:
Для решения задач данного блока вам понадобятся следующие псевдоклассы jQuery: :even, :odd, :eq, :lt, :gt, :first-child, :last-child, :nth-child.

Третью <li>.

Решение:

$('li:eq(3)').css('color', 'red');

Все <li> больше 10-той (отсчет с нуля в jQuery!).

Решение:

$('li:gt(9)').css('color', 'red');

Все <li> меньше 10-той.

Решение:

$('li:lt(9)').css('color', 'red');

Все <li> больше 10-той и саму 10-ю тоже.

Решение:

$('li:gt(8)').css('color', 'red');

Получите первую <li> на странице.

Решение:

$('li:first').css('color', 'red');

Получите последнюю <li> на странице.

Решение:

$('li:last').css('color', 'red');

Получите первую <li> в каждой <ol>.

Решение:

$('ol li:first').css('color', 'red');

Получите последнюю <li> в каждой <ol>.

Решение:

$('ol li:last').css('color', 'red');

Получите 10-ю <li> в каждой <ol>.

Решение:

$('ol li:eq(9)').css('color', 'red');

Четные <li>.

Решение:

$('li:odd').css('color', 'red');

Нечетные <li>.

Решение:

$('li:even').css('color', 'red');

Четные <li> в каждой <ol>.

Решение:

$('ol li:odd').css('color', 'red');

Нечетные <li> в каждой<ol>.

Решение:

$('ol li:even').css('color', 'red');

Задачи на parent()

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

Сделайте родителя <li> с классом www (li с этим классом, а не родитель) красного цвета.

Решение:

$('li.www').parent().css('color', 'red');

Задачи на each

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

Выведите алертом содержимое всех абзацев <p> (по очереди).

Решение:

$('p').each(function(){
	alert($(this).html())
});

Выведите алертом содержимое всех заголовков (по очереди).

Решение:

$(':header').each(function(){
	alert($(this).html())
});

Поменяйте содержимое всех <li> на их порядковый номер.

Решение:

$('li').each(function(index){
	$(this).html(index)
});

Добавьте всем <li> в конец их порядковый номер.

Решение:

$('li').each(function(index){
	$(this).append(index)
});