Завдяки jQuery створення програми на основі Ajax стає дуже простим і швидким.
jQuery спочатку був створений Джоном Ресігом на початку 2006 р. Проект jQuery наразі підтримується та підтримується розподіленою групою розробників як проект із відкритим кодом.
Ви можете заощадити багато часу та зусиль за допомогою jQuery. Тож додайте цей сайт до своїх улюблених і продовжуйте читати
Є багато інших речей, які ви можете робити з jQuery.
На цьому список не закінчується, є багато інших цікавих речей, які ви можете робити з jQuery.
Є кілька переваг, чому варто вибрати jQuery:
Щоб почати, давайте спочатку завантажимо копію jQuery, а потім додамо її до нашого проекту. Для завантаження доступні дві версії jQuery: поспішаючи e не стиснутий .
Нестиснутий файл краще підходить для розробки або налагодження; тоді як мінімізований і стиснутий файл рекомендується для виробництва, оскільки він економить пропускну здатність і покращує продуктивність завдяки меншому розміру файлу.
Ми можемо завантажити jQuery звідси: https://jquery.com/download/
Завантаживши файл jQuery, ви побачите, що він має розширення js, тобто це файл JavaScript. Насправді JQuery — це не що інше, як бібліотека JavaScript, тому ви можете включити файл jQuery в документ HTML за допомогою елемента так само, як ви включаєте звичайні файли JavaScript.
<head>
<title>Simple HTML Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Не забувайте завжди включати файл jQuery перед спеціальними сценаріями; інакше API jQuery будуть недоступні, коли ваш код jQuery спробує отримати до них доступ.
Як ви могли помітити, ми пропустили атрибут у попередньому прикладі type="text/javascript" всередині тегу . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiзавершено в HTML5 і в усіх сучасних браузерах.
Як альтернативу ви можете вставити jQuery у свій документ за допомогою безкоштовних посилань CDN (Мережа доставки вмісту), якщо ви не хочете завантажувати файл.
CDN можуть запропонувати перевагу продуктивності за рахунок скорочення часу завантаження, оскільки вони розміщують jQuery на кількох серверах по всьому світу, і коли користувач запитує файл, він обслуговуватиметься з найближчого сервера.
Це також має перевагу: якщо відвідувач вашої веб-сторінки вже завантажив копію jQuery з того самого CDN під час відвідування інших сайтів, йому не доведеться завантажувати її знову, оскільки вона вже знаходиться в кеші браузера.
У цьому випадку вам доведеться написати:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>На додаток до CDN, наданого проектом jquery, ви можете включити jQuery через Google e Microsoft cdn.
Побачивши цілі бібліотеки jQuery і як включити її у ваш документ, тепер настав час застосувати jQuery на практиці.
Тепер давайте виконаємо просту операцію jQuery, змінивши колір тексту заголовка з попереднього кольоруdefiвід чорного до зеленого кольору.
<head>
<title>My First jQuery Web Page</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("h1").css("color", "#00ff00");
});
</script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>У коді ми виконали просту операцію jQuery, змінивши колір заголовка, тобто елемента використання селектора елемента jQuery та методу css(), коли документ готовий, відомий як подія готовності документа.
Оператор jQuery зазвичай починається зі знака долара ( $) і закінчується крапкою з комою ( ;).
У jQuery знак долара ( $) є лише псевдонімом для jQuery. Розглянемо наступний приклад коду, який демонструє найпростіший оператор jQuery.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>Приклад просто відображає попередження "Hello I'm a JQuery sign» користувачеві. Давайте розглянемо деякі особливості:
<script>: jQuery — це лише бібліотека JavaScript, код jQuery можна розмістити всередині елемента <script>, або ви можете помістити його у зовнішній файл JavaScript;$(document).ready(handler); відомий як готова подія. Де це handler це функція, яка передається методу для виконання, як тільки документ буде готовий, тобто коли ієрархія DOM буде повністю побудована.Метод jQuery ready() зазвичай використовується з анонімною функцією. Отже, наведений вище приклад також можна записати у скороченій нотації так:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Усередині функції ви можете написати оператори jQuery для виконання будь-яких дій із дотриманням базового синтаксису, наприклад:
$(selector).action();Де це, $(selector) він фактично вибирає елементи HTML з дерева DOM, щоб ними можна було керувати action() застосувати деякі дії до вибраних елементів, наприклад змінити значення властивості CSS або встановити вміст елемента тощо.
Тепер давайте розглянемо інший приклад, який встановлює текст абзацу:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("p").text("Hello World!");
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>Приклад jQuery стосується селектора p, і це вибирає всі абзаци, а потім метод text() встановити текстовий вміст абзацу за допомогою «Hello World!».
Текст абзацу в попередньому прикладі автоматично замінюється, коли документ готовий. Але давайте подивимося, як це зробити, якщо ви хочете виконати дію перед виконанням коду jQuery, щоб замінити текст абзацу.
Розглянемо останній приклад:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("Hello World!");
});
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
<button type="button">Replace Text</button>
</body>
</html>У цьому прикладі текст абзацу замінюється лише тоді, коли подія натискання відбувається на кнопці "Replace Text“, що просто означає, коли користувач натискає цю кнопку.
Ви можете використовувати селектор ідентифікаторів, щоб вибрати один елемент з унікальним ідентифікатором на сторінці.
Наприклад, наступний код jQuery вибере та виділить елемент з атрибутом ID id="markid", коли документ буде готовий.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Селектор класу можна використовувати для вибору елементів із певним класом.
Наприклад, наведений нижче код jQuery вибере та виділить елементи з атрибутом class class="markclass", коли документ буде готовий.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Селектор елементів можна використовувати для вибору елементів за назвою.
Наприклад, наведений нижче код jQuery виділить і виділить увесь абзац, тобто елементи "<p>" документа, коли він буде готовий.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Ви можете використовувати селектор атрибутів, щоб вибрати елемент на основі одного з його атрибутів HTML, наприклад атрибута посилання targetабо атрибут введення typeтощо
Наприклад, наведений нижче код jQuery вибере та виділить усі текстові введення, наприклад елементи "<input>" з type="text", коли документ буде готовий.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Ви також можете комбінувати селектори CSS, щоб зробити вибір ще точнішим.
Наприклад, ви можете поєднати селектор класів із селектором елементів, щоб знайти в документі елементи певного типу та класу.
<script>
$(document).ready(function(){
// Highlight only paragraph elements with class mark
$("p.mark").css("background", "yellow");
// Highlight only span elements inside the element with ID mark
$("#mark span").css("background", "yellow");
// Highlight li elements inside the ul elements
$("ul li").css("background", "red");
// Highlight li elements only inside the ul element with id mark
$("ul#mark li").css("background", "yellow");
// Highlight li elements inside all the ul element with class mark
$("ul.mark li").css("background", "green");
// Highlight all anchor elements with target blank
$('a[target="_blank"]').css("background", "yellow");
});
</script>Крім селекторів definiti, jQuery надає власний спеціальний селектор для подальшого розширення можливостей вибору елементів на сторінці.
<script>
$(document).ready(function(){
// Highlight table rows appearing at odd places
$("tr:odd").css("background", "yellow");
// Highlight table rows appearing at even places
$("tr:even").css("background", "orange");
// Highlight first paragraph element
$("p:first").css("background", "red");
// Highlight last paragraph element
$("p:last").css("background", "green");
// Highlight all input elements with type text inside a form
$("form :text").css("background", "purple");
// Highlight all input elements with type password inside a form
$("form :password").css("background", "blue");
// Highlight all input elements with type submit inside a form
$("form :submit").css("background", "violet");
});
</script>Події часто викликаються взаємодією користувача з веб-сторінкою, як-от клацання посилання або кнопки, введення тексту в поле введення або текстову область, вибір у полі вибору, натискання клавіші на клавіатурі, переміщення вказівника миші і т.д. У деяких випадках сам браузер може ініціювати такі події, як завантаження сторінки та завантаження.
jQuery покращує основні механізми обробки подій, пропонуючи методи подій для більшості подій рідного браузера, деякі з цих методів ready(), click(), keypress(), focus(), blur(), change()тощо
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>Загалом події можна розділити на чотири основні групи:
Подія миші запускається, коли користувач клацає елемент, переміщує вказівник миші тощо.
Ось кілька поширених методів jQuery для обробки подій миші.
click()Метод click() додайте функцію обробки подій до вибраних елементів для події "click“. Пов’язана функція виконується, коли користувач натискає цей елемент. Наступний приклад приховає елементи <p> на сторінці після натискання.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Метод dblclick() додайте функцію обробки подій до вибраних елементів для події "dblclick“. Пов’язана функція виконується, коли користувач двічі клацає цей елемент. Наступний приклад приховає елементи <p> при подвійному клацанні на них.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Метод hover() приєднати одну або дві функції обробника подій до вибраних елементів, які виконуються, коли вказівник миші переміщується всередину та з елементів. Перша функція запускається, коли користувач наводить вказівник миші на елемент, тоді як друга функція запускається, коли користувач знімає вказівник миші з цього елемента.
У наступному прикладі буде виділено елементи <p> коли ви наведете на нього курсор, підсвічування буде видалено, коли ви приберете курсор.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Метод mouseenter() приєднати функцію обробки подій до вибраних елементів, яка виконується, коли миша вводить елемент. Наступний приклад додасть виділення класу до елемента <p> коли ви наведете на нього курсор.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Метод mouseleave() додайте функцію обробки подій до вибраних елементів, яка запускається, коли миша залишає елемент. У наступному прикладі буде видалено виділення класу з елемента <p> коли ви знімаєте з нього курсор.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Подія клавіатури виникає, коли користувач натискає або відпускає клавішу на клавіатурі. Давайте розглянемо деякі часто використовувані методи jQuery для обробки подій клавіатури.
keypress()Метод keypress() додає функцію обробки подій до вибраних елементів (зазвичай елементів керування форми), яка запускається, коли браузер отримує введення з клавіатури від користувача. У наведеному нижче прикладі буде показано повідомлення, коли спрацює подія keypress і скільки разів він запускається, коли ви натискаєте клавішу на клавіатурі.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Подія натискання клавіші подібна до події натискання клавіші, за винятком модифікаторів і недрукованих клавіш, таких як Shift, Esc, Backspace або Delete, клавіш зі стрілками тощо. вони викликають події натискання клавіш, але не події натискання клавіш.
keydown()Метод keydown() додає функцію обробки подій до вибраних елементів (зазвичай елементів керування форми), яка виконується, коли користувач вперше натискає клавішу на клавіатурі. У наведеному нижче прикладі буде показано повідомлення, коли спрацює подія keydown і скільки разів він запускається, коли ви натискаєте клавішу на клавіатурі.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Метод keyup() додайте функцію обробки подій до вибраних елементів (зазвичай елементів керування форми), яка виконується, коли користувач відпускає клавішу на клавіатурі. У наведеному нижче прикладі буде показано повідомлення, коли спрацює подія keyup і скільки разів він запускається, коли ви натискаєте та відпускаєте клавішу на клавіатурі.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Подія форми спрацьовує, коли елемент керування формою отримує або втрачає фокус, або коли користувач змінює значення елемента керування форми, наприклад введення тексту під час введення тексту, вибір параметра у полі вибору тощо. Ось кілька поширених методів jQuery для обробки подій форм.
change()Метод change() приєднати до елементів функцію обробки подій <input> і виконується при зміні його значення. У наведеному нижче прикладі відображатиметься попередження під час вибору параметра в спадному списку.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Для полів клацання, прапорців і перемикачів подія спрацьовує одразу, коли користувач робить вибір мишею, але для введення тексту та текстової області подія спрацьовує після того, як елемент втрачає фокус.
focus()Метод focus() додає функцію обробки подій до вибраних елементів (зазвичай елементів керування та прив’язок форм), яка виконується, коли вона отримує фокус. У наведеному нижче прикладі відобразиться повідомлення, коли введений текст отримує фокус.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Метод blur() додайте функцію обробки подій до таких елементів форми, як <input>, <textarea>, <select> який виконується, коли він втрачає фокус. У наступному прикладі з’явиться повідомлення, коли введений текст втрачає фокус.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Метод submit() приєднати до елементів функцію обробки подій <form> який запускається, коли користувач намагається надіслати форму. У наступному прикладі відобразиться повідомлення на основі значення, введеного під час спроби надсилання форми.
<script>
$(document).ready(function(){
$("form").submit(function(event){
var regex = /^[a-zA-Z]+$/;
var currentValue = $("#firstName").val();
if(regex.test(currentValue) == false){
$("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
// Preventing form submission
event.preventDefault();
}
});
});
</script>Події також запускаються в ситуації, коли сторінка DOM (об’єктна модель документа) готова або коли користувач змінює розмір або прокручує вікно браузера тощо. Ось кілька поширених методів jQuery для обробки подій такого типу.
ready()Метод ready() визначає функцію для виконання, коли DOM повністю завантажено.
Наступний приклад замінить текст абзацу, щойно ієрархія DOM буде повністю побудована та готова до маніпулювання.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Метод resize() додайте функцію обробки подій до елемента вікна, яка запускається, коли розмір вікна браузера змінюється.
У наведеному нижче прикладі показано поточну ширину та висоту вікна браузера, коли ви намагаєтеся змінити його розмір, перетягуючи його кути.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()Метод scroll() додайте функцію обробки подій до вікна або до iframe і прокручувані елементи, які запускаються щоразу, коли змінюється положення прокручування елемента.
У наведеному нижче прикладі під час прокручування вікна браузера з’явиться повідомлення.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Військово-морський сектор є справжньою глобальною економічною силою, яка просунулася до 150-мільярдного ринку...
Минулого понеділка Financial Times оголосила про угоду з OpenAI. FT ліцензує свою журналістику світового рівня…
Мільйони людей оплачують потокові послуги, сплачуючи щомісячну абонентську плату. Поширена думка, що ви…
Coveware від Veeam продовжить надавати послуги реагування на інциденти кібервимагання. Coveware запропонує криміналістику та можливості відновлення…