jQuery – це швидка і досить невелика бібліотека JavaScript. Вона спрощує створення інтерактивних та приголомшливих веб-сторінок, анімації та взаємодії, з меншими зусиллями щодо написання JavaScript коду. Ця бібліотека стає все популярнішою і все більше веб-майстрів її використовують. jQuery постійно розвивається та покращується, на момент написання статті випущена jQuery версії 3.6.0.
У jQuery є багато дуже корисних плагінів, які можуть допомогти вам практично у всьому, але бувають моменти, коли ви за допомогою всього кількох рядків коду зможете зробити той же самий трюк. Тож навіщо використовувати великий скрипт та/або робити зайве підключення скрипта?
В сьогоднішньому великому практичному уроці ми зібрали 25 крутих та корисних порад, прийомів та рішень по jQuery, які допоможуть вам в освоєнні цієї бібліотеки.
Матеріал по темі: Шпаргалка по jQuery для початківців
Оскільки jQuery постійно розвивається та покращується, один із найпростіших способів покращити продуктивність вашого сайту – це просто використовувати останню версію jQuery. У кожному новому випуску бібліотеки вводяться оптимізації, покращення безпеки та виправлення помилок.
noConflict()
Псевдонім (символ) $
, який використовується jQuery, також використовується іншими різними JavaScript бібліотеками. Для забезпечення того, що jQuery не буде конфліктувати з об’єктом $
інших бібліотек, використовуйте метод noConflict()
. Для цього на початку скрипта оголосіть наступне:
jQuery.noConflict();
Після цього бібліотека буде переведена в безконфліктний режим. Тепер, при написанні подальшого коду, вам потрібно буде посилатися на об’єкт jQuery, використовуючи ім’я змінної jQuery
, а не змінну $
, наприклад:
jQuery( ".block" ).addClass( "hidden" ); // а не $( ".block" ).addClass( "hidden" );
Перш ніж ви можете щось робити з jQuery, вам спочатку потрібно переконатися, що він завантажений. Нижче приклад простої перевірки для цього:
if ( typeof jQuery !== "undefined" ) { console.log( "jQuery підключено" ); }
Після цієї перевірки ви вже знатимете, що можна працювати далі.
Перед тим, як використовувати якийсь HTML-елемент, спочатку бажано перевірити, що він є частиною DOM (існує):
if ( jQuery( ".selector" ).length ) { // елемент існує, тепер ви можете щось з ним зробити }
Також ви можете перевірити існування елемента в DOM, використовуючи 2-й спосіб (перевіркою першого елемента в масиві об’єктів jQuery):
if ( jQuery( ".element" )[0] ) { console.log( "Такий елемент існує" ); } else { console.log( "Такого елементу НЕ існує" ); }
Дуже часто ми використовуємо той самий селектор більше одного разу. При зверненні по селектору, jQuery повинен щоразу виконувати пошук по всьому DOM, навіть якщо такий пошук уже виконувався раніше. Більш продуктивним буде використання так званого «кешування результатів»: здійсніть пошук по селектору один раз, а результати збережіть у змінній:
var spisok = jQuery( ".block" ).find( "li" );
Зберігши об’єкт jQuery в змінній, вам більше не потрібно повторно без необхідності шукати його в DOM. Після цього ви можете використовувати змінну в будь-якому місці коду:
jQuery( ".hideSpisok" ).on( "click", function() { spisok.fadeOut(); });
Використовуючи кешування селекторів jQuery, ви забезпечите своєму сайту додатковий приріст продуктивності.
jQuery дозволяє «зчіплювати» виклики методів, що дає змогу спростити процес повторних запитів до DOM та створення кількох об’єктів jQuery. Допустимо, у вашому коді використовуються такі виклики методів:
jQuery( ".element" ).show(); jQuery( ".element" ).html( "якийсь текст" ); jQuery( ".element" ).height( 250 );
Цей код можна значно покращити, використовуючи ланцюжок викликів:
jQuery( ".element" ) .show() .html( "якийсь текст" ) .height( 250 ); // короткий запис jQuery( ".element" ).show().html( "якийсь текст" ).height( 250 );
І ланцюгові виклики методів, і кешування (порада №5 даного уроку) в jQuery є найкращими практиками, що дозволяють писати коротший, зрозуміліший і більш швидкий код.
.on()
замість методу .click()
У більшості подій є свій іменований метод, наприклад click()
, change()
, focus()
і т. д., який ви можете використовувати безпосередньо. З іншого боку, функція jQueryObject.on()
дозволяє нам прив’язати обробник до будь-якої події. Тому використання .on()
дає кілька переваг у порівнянні з використанням, наприклад, методу .click()
. Обробник поєднує функціонал застарілих методів .bind()
, .live()
і .delegate()
.
Наприклад, ми можемо додавати кілька подій:
.on( "click change hover" )
Ще перевага: прив’язка обробника подій також спрацьовує і для динамічно доданих елементів DOM, відповідно нам не потрібно вручну їх прив’язувати.
Також обробник подій дозволяє вказувати простір імен. Пізніше, використовуючи простір імен, ми можемо скасувати прив’язку певної події:
.on( "click.menuHovering" ) // вказуємо простір імен .off( "click.menuHovering" ) // видаляємо обробник подій
Реалізувати цей функціонал дуже просто, нам для цього навіть не знадобиться плагін. Все, що нам потрібно – це методи animate
та scrollTop
у jQuery. Для створення простої анімації прокрутки сторінки вгору, в потрібному місці сайту (як правило, у футері) додайте блок із посиланням:
<div class="container"> <a href="#" class="back-to-top">На початок сторінки</a> </div>
Тепер додайте трішки jQuery коду:
<script> jQuery( ".back-to-top" ).on( "click", function(e) { e.preventDefault(); jQuery( "html, body" ).animate( {scrollTop: 0}, 900 ); return false; }); </script>
От і все! Додайте трохи CSS стилів для красивого оформлення кнопки, і у вас буде вражаюча кнопка «Нагору», яка плавно прокручуватиме сторінку.
Трохи пояснень коду: нашим завданням є те, щоб бічна смуга прокручування мала верхню координату 0, тобто в самому верху сторінки, тому вказуємо це значення для scrollTop
. Дане переміщення ми плавно анімуємо, тобто робимо не різкий перехід, а протягом 900 мілісекунд, доки сторінка не прокрутиться до верхньої частини.
Наступний фрагмент коду можна використовувати для встановлення таймера на 5 секунд за допомогою jQuery:
window.setTimeout( function() { // ваш код console.log( "пройшло 5 секунд" ); }, 5000 );
Більш складні варіанти таймерів ви зможете побачити в нашій попередній статті.
Ми використовуємо методи .hide()
, .show()
у jQuery, щоб змінювати видимість елемента. Як перевірити, що такий елемент видимий/прихований? Використовуйте простий код, наведений нижче:
if ( jQuery( ".element" ).is( ":visible" ) == "true" ) { // елемент видимий console.log( "елемент видимий" ); } else { // елемент прихований }
Зверніть увагу! Елементи будуть вважатися видимими, якщо вони мають будь-які межі в макеті, якщо вони займають місце в документі, у тому числі маючи нульову ширину та/або висоту. Наприклад, елементи <br>
та інлайнові елементи без контенту будуть обрані селектором :visible
.
Елементи з параметрами visible: hidden
або opacity: 0
вважаються видимими, тому що вони, як і раніше, займають місце в макеті.
Бувають ситуації, коли потрібно переконатися, що всі зображення на сторінці повністю завантажені. Нижче код, який перевіряє цю умову:
jQuery( "img" ).on( "load", function() { console.log( "картинки завантажені успішно!" ); });
Якщо потрібно перевірити завантаження лише однієї картинки, замініть тег <img>
на клас або ідентифікатор потрібної картинки.
Внаслідок різних причин на вашому сайті можуть бути «биті» картинки – які відсутні на сервері, змінили свою адресу або просто були видалені. Якщо така картинка всього одна (або кілька) замінити їх вручну не важко. А якщо таких картинок багато? Простий код, представлений нижче, допоможе вам позбавитися такого головного болю, автоматизувавши процес заміни битих зображень:
jQuery( "img" ).on( "error", function() { if ( !jQuery(this).hasClass( "broken-image-link" ) ) { jQuery(this).prop( "src", "шлях до картинки-заміни" ).addClass( "broken-image-link" ); } });
Замініть значення шлях до картинки-заміни
на посилання картинки, яка замінятиме собою биті зображення.
Щоб перевірити, чи елемент має певний клас (або групу класів), ми можемо використовувати метод hasClass()
:
<div class="element-class some-class">Елемент</div> <script> if ( jQuery( ".element-class" ).hasClass( "some-class" ) ) { // РЕЗУЛЬТАТ: true } </script>
Уявіть, що потрібно змінювати зовнішній вигляд кнопки, коли користувач наводить на неї курсор. Ви можете додавати клас елементу, коли користувач наводить курсор, і видаляти його, коли курсор мишки полишає зону кнопки:
jQuery( ".btn" ).hover( function() { jQuery(this).addClass( "hover" ); }, function() { jQuery(this).removeClass( "hover" ); });
Після цього додайте стильове оформлення кнопки у наведеному стані за допомогою CSS. Коротший запис розглянутого вище способу досягається за допомогою методу toggleClass
:
jQuery( ".btn" ).hover( function() { jQuery(this).toggleClass( "hover" ); });
Вам може знадобитися, щоб деякі елементи форми (текстове поле або кнопка Submit) були заблоковані доти, доки користувач не виконає потрібну дію (наприклад, підтвердить, що прочитав ваші правила використання та встановить прапорець «Я прочитав і погоджуюся з умовами»). Для цього додайте відповідний jQuery код:
jQuery( "input.submit-button" ).prop( "disabled", true );
Коли потрібна умова буде виконана, знову викличте метод prop()
для певного елемента, і встановіть для нього значення disabled
в false
:
jQuery( "input.submit-button" ).prop( "disabled", false );
select
і текст вибраної опції option
Щоб отримати вибране значення зі списку, що розкривається, ви можете скористатися методом val()
, як показано нижче:
<select name="vibir-optciy" id="select-box"> <option value="1">Так</option> <option value="2">Ні</option> <option value="3">Важко відповісти</option> </select> <script> jQuery( "#select-box" ).on( "change", function(param) { console.log( jQuery(this).val() ); }); </script>
А щоб отримати текст значення, вибраного зі списку, використовуйте методи text()
і find()
, як показано в коді нижче:
jQuery( "#select-box" ).on( "change", function(param) { console.log( jQuery(this).find( "option:selected" ).text() ); });
За умовчанням подія піднімається в DOM вгору від елемента, що викликав подію, до його предків. Припустимо, що вам не потрібно, щоб при натисканні на посилання перезавантажувалася сторінка або відкривалася нова. Наприклад, при натисканні на кнопку «Вгору» (з поради №7 даного уроку) не додавався хеш до посилання, а здійснювався плавний перехід вгору сторінки. Іншими словами, нам потрібно перевизначити нормальну (звичайну) поведінку елемента. Метод event.preventDefault()
дозволяє цього досягти і допоможе запобігти дії за замовчуванням:
jQuery( "a.not-clickable-link" ).on( "click", function(event) { event.preventDefault(); });
Всі ми любимо jQuery за можливість додавати вражаючу анімацію на сайт з використанням кількох рядків коду. Якщо вам потрібно, щоб при кліку на посилання (кнопку) елементи плавно показувалися/приховувалися, методи fadeToggle
та slideToggle
ідеально підійдуть:
<button class="fade-example">fadeToggle</button> <button class="slide-example">slideToggle</button> <p class="fading">У цьому абзаці спрацьовує повільний fade toggle.</p> <p class="sliding">У цьому абзаці спрацьовує повільний slide toggle.</p> <script> jQuery( ".fade-example" ).on( "click", function() { jQuery( ".fading" ).fadeToggle( "slow" ); // Fade – згасання }); jQuery( ".slide-example" ).on( "click", function() { jQuery( ".sliding" ).slideToggle( "slow" ); // Slide – виїзджання }); </script>
Щоб перевірити, чи радіо перемикач або прапорець чекбоксу у вибраному/не вибраному стані, ми можемо використовувати аргумент :checked
у методі is()
:
<input type="checkbox" name="agreement-checkbox" id="agreement-check"> <script> jQuery( "#agreement-check" ).on( "change", function() { console.log( jQuery(this).is( ":checked" ) ); // РЕЗУЛЬТАТ: true якщо чекбокс обрано // РЕЗУЛЬТАТ: false якщо чекбокс НЕ обрано }); </script> <p>Ваша улюблена мова програмування:</p> <form id="radioForm"> <p><input type="radio" name="web_language" value="JavaScript"> JavaScript</p> <p><input type="radio" name="web_language" value="PHP"> PHP</p> <p><input type="radio" name="web_language" value="Python"> Python</p> </form> <script> jQuery( "#radioForm input" ).on( "change", function() { console.log( jQuery( "input[name=web_language]:checked", "#radioForm" ).val() ); }); </script>
При верстці буває таке, що 2 (або більше) блоків в рядку мають різний контент і, відповідно, різну висоту. А нам потрібно, щоб вони мали однакову висоту, і незалежно від величини їхнього внутрішнього контенту. Одним із гнучких рішень може бути перебір елементів та встановлення для них однакової висоти (яку має найвищий елемент):
var $blocksHeight = jQuery( ".odnakova-visota" ); $blocksHeight.each( function() { jQuery(this).find( ".block" ).height( jQuery(this).height() ); });
За допомогою невеликого фрагмента коду, який представлений нижче, всі зовнішні (вихідні) посилання будуть відкриватися в новій вкладці браузера, а внутрішні посилання (з вашого домену) будуть відкриватися в тому ж вікні:
jQuery( "a" ).each( function() { var a = new RegExp('/' + window.location.host + '/'); if( !a.test(this.href) ) { jQuery(this).on( "click", function(event) { event.preventDefault(); event.stopPropagation(); window.open( this.href, "_blank"); }); } });
Якщо вам потрібно реалізувати відключення показу контекстного меню (при натисканні правою кнопкою миші), ви можете зробити це для всієї сторінки:
jQuery(document).ready( function() { jQuery(document).on( "contextmenu", function(e) { e.preventDefault(); //або ж return false; }); });
Якщо це потрібно лише для певного елемента, тоді замініть document
у другому рядку на селектор (або ID) потрібного елемента, наприклад:
… jQuery( ".block" ).on( "contextmenu", function(e) { …
Цей код практично не вимагає jQuery, ми використовуємо цю бібліотеку лише для прикріплення подій. У прикладі нижче, після натискання елемента з класом block
поточна сторінка перезавантажиться в браузері:
jQuery( ".block" ).on( "click", function(e) { location.reload(); // нижче 4 інших практично ідентичних рішення //history.go(0); //location.href = location.href; //location.reload(false); //window.location.reload(); });
Якщо ви витратили деякий час на написання досить великого фрагмента jQuery коду, можливо, ви захочете перетворити його на плагін. Це дозволить вам повторно використовувати цей код в інших проектах, без обмежень залежності. Інші люди також зможуть просто розмістити ваш плагін у себе на сайті, і ваш код буде працювати.
Ось як виглядає оформлення jQuery коду у вигляді плагіну:
(function($) { $.fn.nazvaVashogoPlaginu = function() { // ваш код return this; }; })(jQuery);
Така обгортка коду також є альтернативою для перевірки готовності сторінки:
$(document).ready( function() { … });
Локальне сховище (localStorage) – це дуже простий API, який дозволяє зберігати інформацію (мінімум 5Мб) на стороні клієнта (у браузері) без обмежень по часу. Локальне сховище має кілька переваг перед подібними рішеннями (сесії та куки в браузері): дані зберігаються навіть після оновлення сторінки або закриття браузера, воно безпечніше, оскільки сховище доступне лише своєму джерелу (домену), дані зберігаються локально, а не на сервері.
Як перевірити підтримку localStorage
:
function pidtrimkaLocalStorage() { return "localStorage" in window; } if ( pidtrimkaLocalStorage() ) { console.log( "LocalStorage підтримується вашим браузером" ); }
Щоб записати дані в локальне сховище браузера, використовуйте таку конструкцію:
jQuery( ".block" ).on( "click", function(e) { localStorage.setItem( "blockClicked", "у сховище запишеться це значення" ); // формат запису localStorage.setItem( "ключ", "значення" ); });
Щоб переглянути дані в локальному сховищі браузера Chrome, відкрийте Інструменти розробника (F12) та вкладку Програми (Application). Ліворуч у блоці Сховище (Storage) виберіть пункт Локальне сховище (Local Storage). Тут ви побачите всі дані, що зберігаються для даного джерела (домену):
Щоб отримати дані зі сховища, використовуйте таку конструкцію:
jQuery( ".block" ).on( "click", function(e) { console.log( localStorage.getItem( "blockClicked" ) ); // формат запису localStorage.getItem( "ключ" ); });
Щоб видалити дані за певним ключем зі сховища, використовуйте таку конструкцію:
localStorage.removeItem( "ключ" );
Щоб очистити все сховище для поточного домену, використовуйте таку конструкцію:
localStorage.clear();
Ось і добіг кінця сьогоднішній урок. Сподіваюся, що вам сподобався наш великий список з 25 крутих та корисних порад, прийомів та рішень по jQuery, які має знати кожен. Якщо ви знаєте інші корисні трюки jQuery, обов’язково поділіться ними в розділі нижче.
Дякую за увагу!
Сьогоднішній огляд присвячений людям, для яких важливе питання конфіденційності в Інтернеті, та хто цінує свої…
Вперше про бренд Pro Plan почули у 1986 році, коли він став частиною американської компанії…
Страх покарання гірше самого покарання (Покарання — завжди щось конкретне, і воно все ж краще,…
Якщо ви плануєте розмістити веб-сайт в мережі Інтернет, дуже важливо знайти для нього швидкий і…
Навчання за кордоном вже давно асоціюється з якісною освітою, новими можливостями та безліччю перспектив. Але…
Вибір майстра для ремонту та перетяжки меблів – завдання, яке потребує вдумливого підходу. Адже від…