Last active
August 26, 2019 15:02
-
-
Save rediffusion/5340ecd7a4f38ba471b8747a38709994 to your computer and use it in GitHub Desktop.
Клонирование, добавление, перемещение элементов »» но подробно.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function () { | |
// ### Базовая анимация | |
// Можно использовать со словами либо конкретно в миллисекундах. | |
// Способ 1: | |
$('.box:first').hide(1000) | |
// Способ 2: | |
$('.box:first').delay(1000).hide(1000) | |
// Способ 3: | |
$('.box:first').delay(1000).hide(1000).delay(1000).show(1000) | |
// Способ 4: | |
$('.box:first').delay('slow').hide('fast').delay(1000).show(1000) | |
// Способ 5: | |
// Позволяет анимировать 1 из атрибутов: | |
$('.box:first').animate({ 'width': '200px' }, 1000) | |
// Способ 6: | |
// Элемент сомкнётся уменьшаясь в размере: | |
$('.box:first').slideUp(1000) | |
// Способ 7: | |
// Элемент пропадёт и обратно появится: | |
$('.box:first').slideUp(1000).slideDown(1000) | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function () { | |
// ### Взаимодействие с атрибутами. | |
// Узнать атрибут пути к картинке: | |
// Способ 1: | |
alert($('img').attr('src')); | |
// Способ 2: | |
// Делаем типо слайдер. Вторая по счёту function и поменяет на другую картинку: | |
$('img').click(function(){ | |
$(this).fadeOut(500, function({ | |
$(this).attr('src', 'img2.jpg').fadeIn(500); | |
}); | |
}); | |
// Способ 3: | |
// Тэг 'p' у которого класс lead, ему добавим атрибут data-target и в нём будет text. | |
// Таким образом можно сделать той или иной атрибут динамическим (можем вешать свои, считывать чужие)! | |
$('p.lead').attr('data-target', 'text') | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function () { | |
// ### Взаимодействие с классами. | |
// Способ 1: | |
// Прибавим к уже имеющему классу класс, результат - "lead blue". Текст станет в итоге синим! | |
$('p.lead').addClass('blue') | |
// Способ 2: | |
// При клике текст станет синим. | |
$('.lead').click(function () { | |
$('p.lead').addClass('blue') | |
}); | |
// Способ 3: | |
// Удалить класс. | |
$('.lead').click(function () { | |
$(this).removeClass('lead') | |
}); | |
// Способ 4: | |
// Делаем класс динамическим (то есть blue будет то прибавляться то убираться). | |
$('.lead').click(function () { | |
$(this).toggleClass('blue') | |
}); | |
// Способ 5: | |
// Делаем класс динамическим (заменит сам класс lead на blue). | |
$('.lead').click(function () { | |
$(this).toggleClass('lead', 'blue') | |
}); | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function () { | |
// ### Клонирование, добавление, перемещение элементов. | |
$('.lead').click(function () { | |
// Способ 1: | |
$(this).text('Можем вставить свой текст'); | |
// Способ 2: | |
$(this).html('Можем вставить свой <em>текст</em>'); | |
// Способ 3: | |
$(this).append(' Можем добавить какой то текст в конце'); | |
// Способ 4: | |
$(this).prepend('Добавим текст в начало. '); | |
// Способ 5: | |
$(this).after('<p>Текст на новом абзаце.</p>'); | |
// Способ 6: | |
// Тэг <p class"lead"> обернём "div"-ом (если кликать на текст то оборачивает безконечно). | |
$(this).wrap('<div class="container"></div>'); | |
// Способ 7: | |
// Убрать обёртку. | |
$(this).unwrap('<div class="wrap"></div>'); | |
// Способ 8: | |
// Убрать содержимое тэга. | |
$(this).empty(); | |
// Способ 9: | |
// Удалить тэг вместе с содержимым! | |
$(this).remove(); | |
// Способ 10: | |
// Клонировать | |
$(this).append('<br />' + $(this).text()); | |
}) | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment