2. • JQuery – популярна JavaScript-
бібліотека з відкритим кодом.
• JQuery легко вивчати і легко
застосовувати: “пишіть менше, робіть
більше”.
Основні риси:
• Крос-браузерні HTML/DOM маніпуляції;
• CSS адресація;
• HTML-події;
• ефекти, в тому числі анімаційні;
• AJAX;
• утиліти.с
3. Встановлення і підключення
1 спосіб:
Завантажити з jquery.com
<head>
<script src="jquery-3.2.1.min.js"></script>
</head>
2 спосіб:
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/
3.2.1/jquery.min.js"></script>
</head>
або
<head>
<script
src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery
-3.2.1.min.js"></script>
</head>
4. Синтаксис JQuery
Синтаксис jQuery має на меті виділення HTML-
елементів і виконання певних дій з цими
елементами.
Базовий синтаксис:
$(selector).action()
$ - звертання до jQuery.
(selector) – HTML-елемент.
action() – дія на елементі.
5. Зазвичай jQuery-методи запускають після завантаження
всього документа:
$(document).ready(function(){
// jQuery-методи...
});
Можна коротше:
$(function(){
// jQuery-методи...
});
6. Селектори jQuery
Селектори jQuery базуються на CSS-селекторах плюс деякі спеціальні.
Всі селектори містять $(). Приклад: $("p")
<head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").hide();
});
});
</script>
</head>
<body>
<div>DIV</div>
<p>Абзац</p>
<button>Клік</button>
7. $("p") тег
$("#id1") ID
$(".c1") клас
$("*") всі елементи
$(this) поточний елемент
$("p.c1") абзаци класу c1
$("p:first") перший абзац
...
Як і у “чистому” JavaScript, jQuery-
функції можна помістити в окремий файл
(в head-секції):
<script src="jquery_functions.js"></script>
10. Метод on() дозволяє призначити один чи кілька
обробників виділеним елементам.
<script>
$(document).ready(function(){
$("p").on({
mouseenter: function(){
$(this).css("background-color", "gray");
},
mouseleave: function(){
$(this).css("background-color", "blue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
});
</script>
</head>
<body>
<p>Рухайте і клікайте.</p>
</body>
11. Задача 92.0
Створіть сторінку з трьома абзацами.
Напишіть код, який ховає абзац, коли на
ньому клікнути мишкою. Щоб сховати
абзац використовуйте метод hide().
13. Задача 92.1
Додайте ще один абзац. Клік мишки на
цьому абзаці повинен змінювати колір
фону на жовтий, подвійний клік – колір
тексту на синій. Дії з іншими абзацами –
без змін.
Підказка для зміни стилю:
$(this).css("background-color",
"yellow");
15. Ефекти jQuery
hide() і show()
Приклад:
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>Абзац, який може зникнути і з'явитись.</p>
<button id="hide">Сховати</button>
<button id="show">Показати</button>
</body>
16. Синтаксис:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
speed – опціонально; "slow", "fast" або число мілісекунд.
callback – опціонально; функція, яка виконується після
завершення дії hide чи show. Про callback-функції – потім.
Приклад:
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
</script>
Метод toggle() перемикає між hide і show.
Синтаксис:
$(selector).toggle(speed,callback);
17. Задача 93
Помістіть на сторінці картинку і кнопку
“off/on”. Кнопка повинна повільно ховати і
показувати картинку.
21. Задача 94.0
Помістіть на сторінці дві картинки
однаковго розміру і кнопку “Замінити”.
Кнопка повинна за 4 секунди “гасити”
одну картнику і натомість “висвітлювати”
іншу.
