Skip to content

Instantly share code, notes, and snippets.

@melnikovslava2010

melnikovslava2010/gist:84656df8f4d751826eb4153bc3444cc0

Last active December 31, 2018 22:09
Show Gist options
  • Save melnikovslava2010/84656df8f4d751826eb4153bc3444cc0 to your computer and use it in GitHub Desktop.
Save melnikovslava2010/84656df8f4d751826eb4153bc3444cc0 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery jq джейквери
Raw
gistfile1.txt
.delay(1000); задержка 1000 мс
.hide(1000); скрыть за 1000 мс
.show(); показать
.animate({'width':'200px'}, 1000); изменить ширину за 1000 мс
.slideUp(1000); показать за 1000 мс
.slideDown(1000); скрыть за 1000 мс
.fadeIn(2000) показать за 2000 мс
.fadeOut(2000) скрыть за 2000 мс
.addClass('class'); добавить класс
.removeClass('class'); удалить класс
.toggleClass('class'); добавить, удалить класс
.toggleClass('class class_2'); класс class меняется на class_2
.text('Вписывается текст') вставить текст - только текст - без тегов
.html('Вписывается <b>текст</b>') вставит html
.append('текст') приклеивает текст ВНУТРИ В КОНЦЕ
.prepend('текст') приклеивает текст ВНУТРИ В НАЧАЛЕ
.after('<p>Новый абзац</p>') добавляет ПОСЛЕ новый р
.wrap('<div class="container"></div>') обернули какой-то элемент в div с классом
.unwrap('<div class="container"></div>') убераем обертку
.empty() удаляем ТОЛЬКО СОДЕРЖИМОЕ, сам div остается
.remove() удалить элемент
$('.img_1').click(function(){
$(this).fadeOut(500, function(){
$(this).attr('src', 'img_2.jpg' ).fadeIn(500);
});
}); клик по картинке_1, она тухнет и появляется другая картинка_2
$('p.class_1').addClass('class_2'); добавить всем р с классом class_1 класс class_2
Основные понятия
Подключение:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="путь к файлу с jQuery"></script>
</head>
<body>
</body>
</html>
_______________________________________________________________________
$(function(){
......
});
_________________________________________________________________________
Примеры:
$('.bt').html('То, что вставиться в этот .bt')
или
var x = $('.bt');
x.html('То, что вставиться в этот .bt');
или
var $x = $('.bt');
$x.html('То, что вставиться в этот .bt');
$('.bt').css('font-size', '20px');
$('.bt').css({color: 'red', 'font-size': '12px'});
$('.bt').css('color', 'red');
$('.bt').css('color', 'red').html('новый текст');
var elems = $('.bt');
alert($('.bt').html());
---Селекторы---
$('li:first'); первый <li> на странице
$('li:first-child'); все li, которые являются первыми потомками своих родителей
$('li:last'); последний <li> на странице
$('li::eq(3)'); выберем третий найденный элемент
С помощью :lt и :gt можно выбирать элементы с номером, меньшим или большим заданного числа соответственно
С помощью :even и :odd можно выбирать четные и нечетные элементы в наборе.
$('p:has(b)') выбрать все абзацы, внутри которых есть теги b
$('p:has(>b)') непосредственная вложенность
$('p:contains("текст")') выберем абзац, внутри которого есть слово "текст"
:empty позволяет выбрать все пустые элементы (в которых нету текста)
:parent - наоборот, все непустые
$('b').parent().css('color', 'red'); позволяет выбрать родителя элемента. найдем родителя тега b и поставим ему красный цвет:
---Работа с атрибутами---
Например, так - .attr('value', 'www') - мы запишем строку 'www' в атрибут value.
.attr('value') - мы получим значение атрибута value.
Пример:
<input type="text" value="!!!" id="test">
alert($('#test').attr('value')); //выведет '!!!'
<input type="text" value="!!!" id="test">
$('#test').attr('value', 'www'); = $('#test').val('www');
HTML код станет выглядеть так: <input type="text" value="www" id="test">
---Удаление атрибута---
<input type="text" value="!!!" id="test">
$('#test').removeAttr('value');
HTML код станет выглядеть так - атрибута value больше нет: <input type="text" id="test">
---Работа с классами---
Добавить новый класс:
<p class="www zzz" id="test">Текст абзаца.</p>
$('#test').addClass('kkk');
HTML код станет выглядеть так: <p class="www zzz kkk" id="test">Текст абзаца.</p>
Удалить класс:
Аналогичный метод существует и для удаления класса - .removeClass()
Интересно, что .toggleClass(), будет добавлять указанный класс, если его нет, и убирать его если он есть, например:
меняется цвет
.red {color: red;}
.zzz {font-style: italic;}
<p class="zzz" id="test">Текст абзаца.</p>
$('#test').toggleClass('red');
.hasClass(). Он проверяет наличие или отсутствие класса, переданного ему параметром.
Если такой класс есть у элемента - выведет true, а если такого класса нет - выведет false.
---Оборачивание элементов---
<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p>Текст абзаца.</p>
$('.www').wrap('div');
или $('.www').wrap('<div></div>');
HTML код станет выглядеть так:
<div><p class="www">Текст абзаца.</p></div>
<div><p class="www">Текст абзаца.</p></div>
<div><p class="www">Текст абзаца.</p></div>
<p>Текст абзаца.</p>
др. примеры: $('.www').wrap('<div class="zzz"></div>');
<p class="www">Текст абзаца.</p>
Будет: <div class="zzz"><p class="www">Текст абзаца.</p></div>
не обернуть элемент, а развернуть его (то есть убрать родителя) с помощью метода .unwrap().
Можно также оборачивать теги не снаружи, а внутри. Это делается с помощью метода .wrapInner().
Можно оборачивать не каждый элемент по отдельности, а все найденные элементы вместе с помощью метода .wrapAll():
<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p>Текст абзаца.</p>
$('.www').wrapAll('div');
HTML код станет выглядеть так:
<div>
<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
</div>
<p>Текст абзаца.</p>
---Вставка элементов---
Метод .prepend() позволяет добавлять текст в начало элементов:
<p>Текст абзаца.</p>
$('p').prepend('<b>!!!</b>');
HTML код станет выглядеть так: <p><b>!!!</b>Текст абзаца.</p>
Метод .append() позволяет добавлять текст в конец элементов:
Метод .before() позволяет добавлять текст в перед элементами:
Метод .after() позволяет добавлять текст в после элементов:
---Замена элементов---
<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p>Текст абзаца.</p>
$('.www').replaceWith('<div>!!!</div>');
HTML код станет выглядеть так:
<div>!!!</div>
<div>!!!</div>
<div>!!!</div>
<p>Текст абзаца.</p>
---Удаление элементов---
<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p class="www">Текст абзаца.</p>
<p>Текст абзаца.</p>
$('.www').remove('.www');
HTML код станет выглядеть так:
<p>Текст абзаца.</p>
А вот метод .detach() удаляет выбранные элементы с возможностью их восстановления.
---Удаление содержимого элементов---
<p>Текст абзаца.</p>
<p>Текст абзаца.</p>
<p>Текст абзаца.</p>
$('p').empty();
HTML код станет выглядеть так:
<p></p>
<p></p>
<p></p>
---Метод slice---
<p>Абзац 0.</p>
<p>Абзац 1.</p>
<p>Абзац 2.</p>
<p>Абзац 3.</p>
<p>Абзац 4.</p>
<p>Абзац 5.</p>
$('p').slice(1, 5).prepend('!');
HTML код станет выглядеть так:
<p>Абзац 0.</p>
<p>Абзац 1.!</p>
<p>Абзац 2.!</p>
<p>Абзац 3.!</p>
<p>Абзац 4.!</p>
<p>Абзац 5.</p>
---Фильтрация элементов---
<p>Абзац</p>
<p>Абзац</p>
<p class="www">Абзац</p>
<p class="www">Абзац</p>
$('p').prepend('!').filter('.www').append('?');
!!!!!!!
Объяснение: Давайте найдем все абзацы, поставим им в начало текст '!' с помощью .prepend(), затем получим из найденных только абзацы с классом .www с помощью .filter() и поставим им в конец текст '?' с помощью .append():
HTML код станет выглядеть так:
<p>!Абзац</p>
<p>!Абзац</p>
<p class="www">!Абзац?</p>
<p class="www">!Абзац?</p>
---Работа с соседями---
$('#test').next().html('!');
$('#test').prev().html('!');
Пример:
<p>Абзац.</p>
<p>Абзац.</p>
<p id="test">Абзац.</p>
<p>Абзац.</p>
<p>Абзац.</p>
$('#test').prev().html('!');
HTML код станет выглядеть так:
<p>Абзац.</p>
---Работа с родителями и потомками---
В следующем примере мы найдем элемент #test затем найдем его родителя с помощью .parent() и поставим ему текст '!':
<p>Абзац вне дива.</p>
<div>
<p>Абзац.</p>
<p>Абзац.</p>
<p id="test">Абзац.</p>
<p>Абзац.</p>
<p>Абзац.</p>
</div>
<p>Абзац вне дива.</p>
$('#test').parent().html('!');
Результат выполнения кода:
<p>Абзац вне дива.</p>
<div>
!
</div>
<p>Абзац вне дива.</p>
<p>!</p>
<p id="test">Абзац.</p>
<p>Абзац.</p>
<p>Абзац.</p>
---Поиск внутри найденного---
.find(), который ищет элементы по заданному селектору внутри уже найденных (то есть по потомкам внутри найденных элементов).
---Добавление элементов в текущий набор---
!!!!!!
Давайте найдем все абзацы, поставим им текст '!', затем добавим к найденным абзацам заголовки h2 с помощью .add() и одновременно для заголовков и абзацев поставим красный цвет:
$('p').html('!').add('h2').css('color', 'red');
---Предыдущий набор---
В следующем примере мы найдем все абзацы, затем выберем среди найденных абзацы с классом .www с помощью .filter() и им в конец добавим текст '!' с помощью метода .append(), затем вернемся к предыдущему набору (это набор $('p')) с помощью .end() и им в конец добавим текст '?'.
Получится, что у абзацев с классом .www будет текст '!?', а у обычных абзацев - текст '?':
<p class="www">Абзац</p>
<p class="www">Абзац</p>
<p>Абзац</p>
<p>Абзац</p>
$('p').filter('.www').append('!').end().append('?')
HTML код станет выглядеть так:
<p class="www">Абзац!?</p>
<p class="www">Абзац!?</p>
<p>Абзац?</p>
<p>Абзац?</p>
---Клонирование элементов---
<p class="www">абзац</p>
$('.www').clone().insertAfter('.www');
Результат выполнения кода:
<p class="www">абзац</p>
<p class="www">абзац</p>
---Проверка наличия---
Метод .is() проверяет, соответствует ли хотя бы один из выбранных элементов заданному селектору. Возвращает true или false.
---Отдельные методы для событий---
Клик
$(селектор).click(функция).
Пример:
<ul>
<li>пункт 1</li>
<li>пункт 2</li>
<li>пункт 3</li>
</ul>
$('li').click(function() {
alert('!');
});
---this---
Внутри привязанной функции доступен this, ссылающийся на тот элемент, в котором произошло событие (в нашем случае на li, на которую был клик).
<ul>
<li>пункт 1</li>
<li>пункт 2</li>
<li>пункт 3</li>
</ul>
$('li').click(function() {
$(this).append('!');
});
---Универсальный метод on---
Для привязывания событий также можно использовать универсальный метод on. Первым параметром он принимает название события (например, 'click'), а вторым - функцию, которую следует привязать.
Перепишем код для li, который мы писали выше через метод on: (см. 6 строк выше)
$('li').on('click', function() {
$(this).append('!');
});
Отвязывание событий, привязанных через on, производится с помощью метода off.
---Несколько событий одновременно---
$('li').on('click mousemove', function func() {
какой-то код;
});
---Делегирование---
$('ul').on('click', 'li', function() {
$(this).append('!');
});
---Однократное событие---
$('li').one('click', function() {
$(this).append('!');
});
---Методы hide и show---
<button id="hide">Спрятать</button>
<button id="show">Показать</button>
<div id="elem">Блок с текстом.</div>
$('#hide').click(function() {
$('#elem').hide();
});
$('#show').click(function() {
$('#elem').show();
});
Можно задавать время выполнения эффекта в миллисекундах $('#elem').hide(1000);
---Методы slideUp и slideDown---
Методы slideUp и slideDown позволяют сделать закатывание и выкатывание элемента обратно
$('#hide').click(function() {
$('#elem').slideUp(1000);
});
$('#show').click(function() {
$('#elem').slideDown(1000);
});
---Метод slideToggle--- если элемент скрыт - показывает его, а если показан - скрывает.
$('#toggle').click(function() {
$('#elem').slideToggle(1000);
});
---Методы fadeOut и fadeIn--- реализуют плавное исчезновение и появление элемента:
$('#hide').click(function() {
$('#elem').fadeOut(1000);
});
$('#show').click(function() {
$('#elem').fadeIn(1000);
});
---Метод fadeToggle---
Метод fadeToggle работает аналогично slideToggle - тоже реализует чередование эффектов: то показывает элемент, то скрывает:
$('#toggle').click(function() {
$('#elem').fadeToggle(1000);
});
---Метод fadeTo---
Метод fadeTo позволяет уменьшить прозрачность opacity элемента до определенного значения (0 - полностью прозрачный, 1 - полностью непрозрачный). Первым параметром метод принимает до какого значения уменьшить прозрачность, а вторым - время выполнения.
$('#fade').click(function() {
$('#elem').fadeTo(0.5, 1000);
});
---Метод animate---
Первым параметром этот метод принимает объект, в котором следует задать новые значения CSS свойств, которые вы хотите анимировать. А вторым параметром - время выполнения анимации.
Давайте сделаем так, чтобы по нажатию на кнопку элемент сжался до размера высота 50px, ширина 100px:
#elem {
width: 150px;
height: 150px;
padding: 10px;
border: 1px solid green;
}
<button id="button">Нажми на меня</button>
<div id="elem">Блок с текстом.</div>
$('#button').click(function() {
$('#elem').animate({height: 50, width: 100}, 1000);
});
Если указать значение в таком формате height: '+=50', то анимация будет работать так: к текущему значению высоты будет прибавлено 50px (в нашем случае) и элемент будет плавно анимирован до нового значения.
---Действие после окончания эффекта---
Так не работает:
<button id="hide">Спрятать</button>
<div id="elem">Блок с текстом.</div>
$('#hide').click(function() {
$('#elem').hide(1000);
$('#hide').html('Спрятано');
});
Так работает:
<button id="hide">Спрятать</button>
<div id="elem">Блок с текстом.</div>
$('#hide').click(function() {
$('#elem').hide(1000, function() {
$('#hide').html('Спрятано');
});
});
Чтобы избежать таких проблем, во всех методах по работе с анимацией и эффектами предусмотрен второй параметр - в него мы можем передать функцию, которая выполнится после окончания анимации:
---ПРИМЕРЫ--- http://code.mu/tasks/javascript/jquery/praktika-na-otrabotku-biblioteki-jquery.html
1. Все абзацы <p>, внутри которых есть <b>, оберните в тег <div>.
$('p:has(b)').wrap('<div>');
2. Найдите все абзацы <p> с классом .www, поставьте им в начало текст '!', затем добавьте к этим абзацам еще и заголовки h1-h6 и покрасьте эти абзацы и заголовки в красный цвет.
$('p.www').prepend('!').add(':header').css('color', 'red');
3. Найдите все абзацы <p>, и замените их на тег <div> с таким же содержимым.
Первый вариант:
$('p').each(function() {
var paragraph = $(this);
var text = paragraph.html();
paragraph.replaceWith('<div>' + text + '</div>');
});
Второй вариант:
$('p').replaceWith(function() {
return '<div>' + $(this).html() + '</div>';
});
4.Найдите все чекбоксы на странице и заблокируйте четные из найденных.
$(':checkbox').prop('disabled', true);
5.Поставьте всем незаблокированным чекбоксам статус "отмечен"
$(':checkbox:not([disabled])').prop('checked', true);
6.Дан элемент #test. Поставьте его непосредственному соседу сверху текст '!', а соседу снизу - текст '?'.
$('#test').prev().html('!').end().next().html('?');
7.Дан элемент #test. Поставьте его непосредственным соседям сверху и снизу текст элемента #test.
var $elem = $('#test');
var text = $elem.html();
$elem.prev().html(text).end().next().html(text);
8.Дан элемент #test. Найдите среди его соседей сверху ближайший абзац и поставьте ему текст элемента #test.
var $elem = $('#test');
var text = $elem.html();
$elem.prevUntil('p').last().prev().html(text);
или
var $elem = $('#test');
var text = $elem.html();
$elem.prevAll('p').first().html(text);
9.Найдите второй <li> на странице, добавьте ему класс .www, оберните его внутри тегом <i>, вставьте после него <li> с текстом 'привет'
$('li:eq(1)').addClass('.www').wrapInner('<i>').after('<li>привет</li>');
10.Найдите десятый <li> на странице, найдите его родителя, получите непосредственного соседа родителя сверху, оберните его в <div class="www">.
$('li:eq(9)').parent().prev().wrap('<div class="www">');
11.Каждому абзацу <p>, кроме абзацев с классом .www, добавьте к конец его порядковый номер
$('p:not(.www)').each(function (index) {
$(this).append(index);
});
или
$('p:not(.www)').append(function (index) {
return index;
});
12.Найдите все абзацы <p> и поставьте перед каждым абзацем его копию. Копию покрасьте в красный цвет, а исходный абзац в зеленый
Первый вариант: !!!!!!
$('p').each(function() {
var $elem = $(this);
$elem.before($elem.clone().css('color', 'red')).css('color', 'green');
});
Второй вариант: !!!!
$('p').each(function() {
var $elem = $(this);
$elem.clone().css('color', 'red').insertBefore($elem);
$elem.css('color', 'green');
});
Третий вариант через end:
$('p').each(function() {
var $elem = $(this);
$elem.clone().css('color', 'red').insertBefore($elem).end().end().css('color', 'green');
});
Четвертый вариант:
$('p').css('color', function() {
var $elem = $(this);
$elem.clone().css('color', 'red').insertBefore($elem);
return 'green';
});
Пятый вариант (продолжаем цепочку после each):
$('p').each(function() {
var $elem = $(this);
$elem.clone().css('color', 'red').insertBefore($elem);
}).css('color', 'green');
Шестой вариант:
$('p').before(function() {
return $(this).clone().css('color', 'red');
}).css('color', 'green');
13. Найдите абзацы <p>, которые стоят непосредственно под <h2> и переместите каждый абзац так, чтобы он стал непосредственно над <h2>
Первый вариант (здесь before физически перемещает переданный ему элемент):
$('h2 + p').each(function() {
var $elem = $(this);
$elem.prev().before($elem);
});
Второй вариант:
$('h2 + p').each(function() {
var $elem = $(this);
$elem.insertBefore($elem.prev());
});
Третий вариант:
$('h2 + p').prev().before(function() {
return $(this).next();
});
Как он работает: $('h2 + p') находит абзац под h2, $('h2 + p').prev() обращается к h2, под которым есть абзац, $('h2 + p').prev().before() вызывает функцию before для каждого h2. То, что вернет эта функция - и вставится перед h2. Функция возвращает $(this).next(), где $(this) - это собственно h2, а $(this).next() - это абзац под h2. И абзац физически перемещается перед h2.
14. Найдите все пустые абзацы <p> (без текста) и вставьте в них текст непосредственного соседа сверху.
Первый вариант:
$('p:empty').each(function() {
var $elem = $(this);
var text = $elem.prev().html();
$elem.html(text);
});
Второй вариант:
$('p:empty').html(function() {
return $(this).prev().html();
});
15.Родителю тега <b>, если это элемент с классом .www или абзац <p>, поставьте красный цвет и размер текста в 30px
Первый вариант (в лоб через if):
$('b').each(function() {
var $parent = $(this).parent();
if ($parent.is('.www') || $parent.is('p')) {
$parent.css({color: 'red', fontSize: '30px'});
}
});
Второй вариант (убрали if):
$('b').each(function() {
$(this).parent('.www, p').css({color: 'red', fontSize: '30px'});
});
Третий вариант (собственно, цикл-то тут и не нужен):
$('b').parent('.www, p').css({color: 'red', fontSize: '30px'});
16.Всем пустым абзацам <p> поставьте текст ближайшего к ним сверху тега <h2>
Первый вариант (ищем все h2 через prevAll, берем первый через first):
$('p:empty').each(function() {
$(this).html($(this).prevAll('h2').first().html());
});
Второй вариант (можно без first, потому что если метод html применяется к группе элементов, то вернет текст первого из них, что собственно нам и нужно):
$('p:empty').each(function() {
$(this).html($(this).prevAll('h2').html());
});
Третий вариант:
$('p:empty').html(function() {
return $(this).prevAll('h2').html();
});
17. Даны инпуты с числами. Сделайте так, чтобы в инпутах стали квадраты этих чисел.
Первый вариант:
$('input').each(function() {
var $elem = $(this);
var value = $elem.val();
$elem.val(value * value);
});
Второй вариант:
$('input').val(function (index, value) {
return value * value;
});
18.Дан элемент #test. Поставьте ему в начало текст непосредственного соседа сверху, а в конец - текст непосредственного соседа снизу
var $elem = $('#test');
var textPrev = $elem.prev().html();
var textNext = $elem.next().html();
$elem.prepend(textPrev);
$elem.append(textNext);
19.Дан элемент #test. Найдите его второго соседа сверху и его второго соседа снизу. Сделайте так, чтобы найденные элементы обменялись текстом (сосед сверху возьмет текст соседа снизу и наоборот).
var $id = $('#test');
var $next = $id.nextAll().eq(1);
var $prev = $id.prevAll().eq(1);
var nextText = $next.html();
var prevText = $prev.html();
$next.html(prevText);
$prev.html(nextText);
20.Дан элемент <div>. Выберите из него всех непосредственных потомков, которые не являются заголовками и покрасьте их в красный цвет.
Первый вариант (в стиле CSS, если не понятно, см. этот и этот этот уроки из учебника CSS):
$('div > *:not(h2)').css('color', 'red');
Второй вариант (в стиле jQuery):
$('div').children().not('h2').css('color', 'red');
Третий вариант:
$('div').children(':not(h2)').css('color', 'red');
21.Найдите все абзацы <p>, покрасьте их в красный цвет. Затем выберите среди найденных абзацев абзацы с классом .www и поставьте им текст '!'.
$('p').css('color', 'red').filter('.www').html('!');
22.Найдите все абзацы <p> с классом .www, покрасьте их в красный цвет. Затем выберите среди найденных абзацев первый и поставьте ему текст '!', затем выберите последний и ему поставьте текст '?'.
$('p.www').css('color', 'red').first().html('!').end().last().html('?');
23.Найдите все абзацы <p>, поставьте каждому из них в конец тот же текст, который стоит внутри него (то есть текст в абзаце станет написан два раза).
Первый вариант:
$('p').each(function() {
var $elem = $(this);
var text = $elem.html();
$elem.append(text);
});
Второй вариант:
$('p').append(function (index, text) {
return text;
})
24.Найдите все абзацы <p>, поставьте каждому из них в конец его порядковый номер в наборе.
Первый вариант:
$('p').each(function() {
var $elem = $(this);
var index = $elem.index();
$elem.append(index);
});
Второй вариант:
$('p').append(function (index) {
return index;
});
25.Даны абзацы с числами. Поставьте каждому из них в конец число, которое в нем хранится, умноженное на его порядковый номер в наборе.
Первый вариант:
$('p').each(function() {var $elem = $(this);var index = $(this).index();var text = $(this).html();$elem.append(index * text);});
Второй вариант:
$('p').append(function (index, text) {
return index * text;
});
--Примеры события---
26.По нажатию на абзац <p> удалите его непосредственных соседей сверху и с низу.
$('p').on('click', function() {
$(this).prev().remove().end().next().remove();
});
27.По нажатию на абзац <p> удалите всех его соседей сверху до первого заголовка h1-h6 (то есть элементы, стоящие выше этого заголовка и сам заголовок удалять не надо).
$('p').on('click', function() {
$('p').prevUntil(':header').remove();
});
28.По нажатию на абзац <p> удалите его ближайшего нижнего соседа с классом .www.
$('p').on('click', function() {
$(this).nextAll('.www').first().remove();
});
29.По нажатию на абзац <p> удалите его пятого соседа снизу.
$('p').on('click', function() {
$(this).nextAll().eq(4).remove();
});
30.По нажатию на абзац <p> удалите его пятого соседа снизу, если это не <h2>.
$('p').on('click', function() {
$(this).nextAll().eq(4).not('h2').remove();
});
31.$('p').on('click', function() {
$(this).nextAll().eq(4).not(':has(b)').remove();
});
32.По нажатию на абзац <p> удалите его пятого соседа снизу, если этот сосед не стоит непосредственно после <h2>.
$('p').on('click', function() {
$(this).nextAll().eq(3).not('h2').next().remove();
});
Как это работает: eq(3) получает четвертый элемент (удалять будем пятый), затем not('h2') проверяет, что четвертый элемент не h2, если это так - удаляем следующий за четвертым элементом.
33.Дан элемент #test. Поменяйте этот элемент местами с его непосредственным соседом снизу.
var $elem = $('#test');
$elem.insertAfter($elem.next());
Как это работает: insertAfter физически перемещает указанный элемент.
34.Дан элемент #test. После его непосредственного соседа снизу вставьте копию нашего элемента.
var $elem = $('#test');$elem.clone().insertAfter($elem.next());
35.Дан элемент #test. Поменяйте этот элемент местами с его ближайшим соседом снизу с классом .www.
var $elem = $('#test');
var $neighbor = $elem.nextAll('.www').first(); //neighbor - это сосед
$elem.clone().insertAfter($neighbor);
$neighbor.insertAfter($elem);
$elem.remove();
36.Найдите все абзацы <p>, которые внутри одного родителя лежат между одним и другим <h2>.
$('h2').nextUntil('h2').next().prevUntil('h2').filter('p').css('color', 'red');
37.Оберните каждый абзац <p> снаружи и внутри в <div>.
$('p').wrap('<div>').wrapInner('<div>');
38.Найдите все абзацы <p>, у которых непосредственный родитель не <div> и оберните каждый из них в <div class="www">.
Первый вариант:
$('p').parent().not('div').children('p').wrap('<div class="www">');
Второй вариант (в стиле CSS):
$(':not(div) > p').wrap('<div class="www">');
39.Найдите все абзацы <p>. Удалите их родителя (сделайте ему unwrap), если этот родитель не <div> с классом .www. Затем для те абзацы, у которых был удален родитель, оберните в <div> с классом .zzz.
$(':not(div.www) > p').unwrap().wrap('<div class="zzz">');
40. Найдите всех родителей элемента #test и создайте массив из CSS классов этих родителей.
var arr = [];
$('#test').parents().each( function() {
var classes = $(this).attr('class');
if (classes) {
arr = arr.concat(classes.split(' '));
}
});
console.log(arr);
41.Найдите все абзацы <p>, у которых есть атрибут class, и каждый из них оберните в <div> с теми же классами, как у найденного абзаца, а классы каждого абзаца удалите вместе с атрибутом class. Скрыть решение.
Решение:
Первый вариант (p[class] находит абзацы, у которых есть атрибут class):
$('p[class]').each(function() {
$elem = $(this);
var classes = $elem.attr('class');
var $div = $('<div>').addClass(classes);
$elem.removeAttr('class').wrap($div);
});
Второй вариант:
$('p[class]').attr('class', function (index, classes) {
var $div = $('<div>').addClass(classes);
$(this).removeAttr('class').wrap($div);
});
Третий вариант:
$('p[class]').attr('class', function (index, classes) {
$(this).removeAttr('class').wrap('<div class="'+classes+'">');
});
42.Найдите все абзацы <p> из #test, поставьте им в конец текст '!', затем исключите из найденных абзацы с классом .www и оставшимся поставьте красный цвет.
$('#test').children('p').append('!').not('.www').css('color', 'red');
43. Найдите все <li> на странице, затем перед предпоследним из найденных вставьте еще один <li> с текстом 'пункт'. Скрыть решение.
Решение:
$('li').last().prev().before('
пункт
');
44.Найдите все <li> на странице, затем выберите среди найденных второй, третий и четвертый с конца и поставьте им текст '!'. Скрыть решение.
Решение:
$('li').slice(-4, -1).html('!');
45. Найдите <ol> с #test и переставьте все <li> в нем в обратном порядке. Показать подсказку. Скрыть решение.
Решение:
var $ol = $('#test');
$ol.html( $ol.children().get().reverse() );
46.Дан элемент #text. Найдите всех его соседей сверху и всех его соседей снизу и поменяйте их местами (то есть все, что стоит до элемента, должно стать после него и наоборот). Скрыть решение.
Решение:
$text = $('#text');
$prev = $text.prevAll().get().reverse();
$next = $text.nextAll();
$text.after($prev).before($next);
47.Получите все <li> с классом .www, сделайте им красный цвет, затем найдите среди найденных те <li>, у которых есть класс .bbb и удалите их. Решите все одной цепочкой. Скрыть решение.
Решение:
$('li.www').css('color', 'red').filter('.bbb').remove();
48. Получите все <li> на странице. Четные из полученных сделайте пустыми, а нечетные удалите. Скрыть решение.
Решение:
Первый вариант:
var $elems = $('li');
$elems.detach(':odd');
$elems.empty(':even');
Второй вариант (можно обойтись одной цепочкой):
$('li').detach(':odd').empty(':even');
Найдите все теги <div> и удвойте им высоту. Скрыть решение.
Решение:
Первый вариант:
$('div').each(function() {
var $elem = $(this);
var height = $elem.height();
$elem.height(height*2);
});
Второй вариант:
$('div').height(function (index, height) {
return height*2;
});
49. Найдите сумму высот всех <div> на странице. Скрыть решение.
Решение:
var sum = 0;
$('div').height(function (index, value) {
sum +=value;
});
console.log(sum);
50 Для элемента #test найдите ближайшего родителя с классом .www, в конец этого родителя добавьте абзац с текстом '!'. Показать подсказку. Скрыть решение.
Решение:
$('#test').parentsUntil('.www').append('<p>!</p>');
51 По нажатию на элемент #test найдите его ближайшего родителя с классом .www, внутри этого родителя найдите все абзацы и покрасьте их в красный цвет. Скрыть решение.
Решение:
$('#test').click(function() {$(this).parentsUntil('.www').find('p').css('color', 'red');});
52 Покрасьте первые 10 <li> на странице в красный цвет. Скрыть решение.
Решение:
$('li').slice(0, 10).css('color', 'red');
53 Покрасьте с 5-той по 10-ю <li> на странице в красный цвет. Скрыть решение.
Решение:
$('li').slice(4, 10).css('color', 'red');
54 Найдите последние 10 <li> на странице, покрасьте их в красный цвет. Затем из найденных найдите четные <li> и оберните их внутри в тег <b>. Скрыть решение.
Решение:
$('li').slice(-10).css('color', 'red').filter(':even').wrapInner('<b>');
55 На странице даны чекбоксы. Подсчитайте, сколько из них отмечены. Скрыть решение.
Решение:
console.log( $(':checkbox:checked').length );
56 Дано 5 чекбоксов. Сделайте так, чтобы после того, как пользователь отметил два из них, все чекбоксы заблокировались. Скрыть решение.
Решение:
var $checkboxes = $(':checkbox');
$checkboxes.on('click', function() {
if ($(':checkbox:checked').length == 2) {
$checkboxes.attr('disabled', 'true');
}
});
57 Сделайте так, чтобы все отмеченные чекбоксы сменили свое состояние на неотмеченное и наоборот. Скрыть решение.
Решение:
Первый вариант:
$(':checkbox').each(function() {
$elem = $(this);
$elem.prop('checked', !$elem.prop('checked'));
});
Второй вариант (с примесями чистого js проще):
$(':checkbox').each(function (index, elem) {
elem.checked = !elem.checked;
});
58 Дан инпуты. Переместите содержимое атрибута value в атрибут placeholder, а сам атрибут value удалите совсем. Скрыть решение.
Решение:
$('input').each(function() {
$elem = $(this);
$elem.attr('placeholder', $elem.val()).removeAttr('value');
});
59 Дана ссылка. Если атрибут href начинается на http://, добавьте ссылке атрибут target="_blank". Скрыть решение.
Решение:
$("a[href^='http://']").attr('target', '_blank');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment