Cacher is the code snippet organizer for pro developers

$(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)

});

$(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')
    
});

$(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')
    });

});

$(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());

    })

});