Як використовувати бібліотеку jQuery?

1

Від автора: вітаю вас, друзі. Продовжуємо вивчення бібліотеки jQuery. У минулій статті ми дізналися, що таке бібліотека jQuery, розглянули деякі переваги її використання перед нативним JavaScript, а також дізналися способи підключення jQuery до веб-сторінці. У цій статті ми дізнаємося, як використовувати jQuery. Почнемо?

Отже, ми підключили бібліотеку jQuery. До речі, якщо ви працюєте на локальному сервері, тоді краще підключати бібліотеку jQuery локально, щоб не тягнути її з мережі. Тепер давайте подивимося, як же почати використання бібліотеки, тобто як почати з нею роботу.

Вся робота з jQuery побудована на використанні спеціальної функції – jQuery(). Також ця функція має короткий псевдонім — $(), який найчастіше і використовують в коді. Давайте помістимо на сторінку заголовок H1 і спробуємо його вибрати (ще кажуть – вибрати в колекцію). Як ви пам’ятаєте з попередньої статті, для вибірки використовується той же синтаксис, що і в CSS. В CSS для стилізації заголовка ми б використовували наступний селектор:

h1{/*правила стилізації*/}

Власне, також має працювати і в jQuery. Спробуємо. До речі, заодно поруч помістимо варіант і на нативному JavaScript:

jQuery
var h1_js = document.getElementsByTagName(‘h1’);
var h1_jq = $(‘h1’);
var h1_jq2 = jQuery(‘h1’);
console.log(h1_js);
console.log(h1_jq);
console.log(h1_jq2);

Hello, world!

Тепер заглянемо в консоль:

Як і очікувалось, ми одержали порожню колекцію елементів у всіх трьох випадках. Чому? Бо JS код ми помістили в початок документа і скрипт виконується занадто рано – шуканого заголовка на момент виконання скрипта в документі ще немає. Якщо ми помістимо його перед закриваючим тегом body, тоді все спрацює:

Але можливо нам потрібно підключити наш код JS в початок документа, як бути в цьому випадку? Бібліотека jQuery має просте рішення. Все, що нам потрібно зробити, — обернути наш код jQuery в спеціальну функцію:

var h1_js = document.getElementsByTagName(‘h1’);
console.log(h1_js);
$(function(){
var h1_jq = $(‘h1’);
var h1_jq2 = jQuery(‘h1’);
console.log(h1_jq);
console.log(h1_jq2);
});

Ось тепер вибірка колекції на jQuery чудово спрацює. Вибірка на JS раніше поверне пустий колекцію:

Звичайно, підключати код JS в початок документа зараз вже не прийнято, але тим не менше цілком можливо, і в цьому випадку jQuery нам допоможе з роботою, виконуючи код тільки після завантаження всього документа.

Також ви можете зустріти наступну конструкцію:

$(document).ready(function(){
var h1_jq = $(‘h1’);
console.log(h1_jq);
});

Цей запис є аналогом попередньої, яка неявно викликає метод ready, дожидающийся завантаження документа. Повна запис, з явним викликом ready, на сьогодні є вже застарілим варіантом, який не рекомендується використовувати, тому використовуйте скорочений запис.

На цьому сьогодні все. Вихідні матеріали до уроку можна завантажити за посиланням. Більше про jQuerу ви можете дізнатися з наших уроків або курсу. Удачі!