Урок 15. Знакомство jQuery

Привет, из html!

Текст для функции скрыть текст

Текст для функции toggle

Заголовок для анимации

Заголовок для 2 анимации

Заголовок для использования переменных

Обращение по селекторам

Картинка

Анимация. Изменение свойства css

    
------------------------------------------------------------------------------------------------------------------------
HTML КОД:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Урок 15. Знакомство jQuery</title>
</head>
<body>
    <header></header>
    <main>
        <h1>Урок 15. Знакомство jQuery</h1>

        <p class="tag1">Привет, из html!</p>
        <button class="button1">Вызов alert!</button>

        <p class="tag2">Текст для функции скрыть текст</p>
        <button class="button2">Кнопка заглушка</button>

        <p id="tag3">Текст для функции toggle</p>
        <button class="button3">Копка класса toggle</button>

        <h3 class="head4">Заголовок для анимации</h3>
        <button class="button4">Кнопка анимации</button>

        <h3 class="head5">Заголовок для 2 анимации</h3>
        <button class="button5">Кнопка 2 анимации</button>

        <h3 class="head6">Заголовок для использования переменных</h3>
        <button class="button6">Кнопка переменных</button>

        <div class="div1">
            <h3>Обращение по селекторам</h3>
            <img src="img/img.png" alt="Картинка" width="100" height="100">
            <button>Скрыть картинку</button>
        </div>

        <div class="div2" style="margin-top: 30px;" ></div>
        <button class="button7" style="margin-top: 30px;">Кнопка вывода ее ширины и длины</button>

        <h3 class="head8">Анимация. Изменение свойства css</h3>
        <button class="button8">Кнопка анимации</button>

    </main>
    <footer></footer>

    <script src="jquery-4.0.0.js.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

------------------------------------------------------------------------------------------------------------------------
JS КОД

//Обращение по селекторам
jQuery('div')
$('div');
$('.anim');
$('#one')

$('.anim div'); //все вложенные div
$('.anim > div'); //дочерние div

$('.anim img + p'); //Все изображения внутри класса и следующие за наи абзацы

$('img[height=250]'); // все картинки с высотой в 250
$('img[src^=http]');

$('img:not(.anim img)'); // Все кроме

$('li:has(a)'); //имеет внутри себя
$('p:contains(Lorem)');

$('li:first'); // первый
$('li:last'); // последний

jQuery(function () {
    alert(jQuery('.tag1').text());
});

jQuery('.tag1').text("Изменили в jQuery!");

jQuery(function () {
    jQuery('.tag1').text("Заменили текст в html c помощью jQuery!");
})

jQuery(function () {
    jQuery('.button1').click(
        function () {
            alert(jQuery('.tag1').text());
        }
    )
})

$(function () {
    $(".tag2").hide(2000);
    $('.tag2').show(1000);
})

jQuery(function () {
    jQuery('.button3').click(
        function () {
            $('#tag3').toggle('slow')
        }
    )
})

jQuery(function () {
    jQuery('.button4').click(
        function () {
            $('.head4').fadeOut(1000).fadeIn(3000);
        }
    )
})

jQuery(function () {
    $('.button5').click(
        function () {
            $('.head5').slideUp(1000).slideDown(3000);
        }
    )
})

jQuery(function () {
    let m = $('.head6')
    let b = $('.button6')
    b.click(
        function () {
            m.hide(1000);
            m.text("Новый заголовок для использования переменных");
            m.show(3000);
        }
    )
})

$(function () {
    $('.div1 > button').click(
        function () {
            $('.div1 > img').hide(3000).show(5000);
        }
    )
});

jQuery(function () {
    let b = $('.button7');
    let w = b.width();
    let h = b.height();
    console.log("Ширина: " + w + " Высота: " + h);
    console.log("Округление в меньшую сторону")
    console.log(Math.floor(w), Math.floor(h));
    b.click(
        function () {
            $('.div2').hide(1000).text("Ширина кнопки: " + w + " Высота кнопки: " + h).show(3000);
        }
    )
});

jQuery(function () {
    $('.button8').click(
        function () {
            $('.head8').
            animate({'font-size': '24pt',},3000).
            animate({'font-size': '12pt',},1000);
        }
    )
});