Назад Вперед Зміст

Бібліотека JQuery

jQuery - це бібліотека, яка значно спрощує та прискорює написання JavaScript коду. Девіз jQuery "write less, do more" (пиши менше, роби більше) відображає її головне призначення.

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

Ця бібліотека працює з усіма браузерами (IE 6.0+, FF 2.0+, Safari 3.0+, Opera 9.0+, Chrome).

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

Для того, щоб почати використовувати jQuery, необхідно додати її на сторінку.

Для цього на сторінку до секції head повинен бути доданий наступний код:

<sсript type="text/javascript" src="путь_к_скачанному_файлу/jquery.js"> </sсript>

Примітка: Краще створити в head окрему пару тегів sсript для підключення бібліотеки, та окрему пару тегів sсript для написання коду

Коли jQuery використовується для вибору DOM-елементів, функція $() повертає результат у вигляді об'єкта jQuery, що представляє нуль або більше DOM-елементів. Фактично під час виконання будь-якої операції jQuery, яка змінює один або кілька елементів, її результатом майже завжди є об'єкт jQuery, що становить важливу особливість бібліотеки jQuery.

При обробці подій засобами jQuery змінна this посилається на елемент HTMLElement, що обробляє подію.

У більшості випадків робота з jQuery здійснюється в два етапи, слідуючи одному й тому самому шаблону:

1. перший етап полягає у виборі за допомогою функції $() початкового набору елементів сторінки, що відповідають певному критерію відбору, які повертаються у вигляді об'єкта, що містить їх jQuery;
2. другий — у виконанні над кожним елементом набору однієї чи кількох операцій, що призводять до створення кінцевого набору.

Селектори

У jQuery для звернення до елементів для зміни їх властивостей використовуються команди з однією точкою, виду:

$('Назва елемента').css('властивість','значення');

Якщо потрібно для групи елементів змінити декілька властивостей, використовуються команди з кількома точками, виду:

$('Назва елемента').css('властивість1','значення1').css('властивість2','значення2');

Звернення за назвою тега

$('p').css('color','red');

$('p').css('font-size','30pt');

Дані рядки коду перефарбують усі абзаци p, що існують на даний момент, в червоний колір, та зададуть розмір шрифту у 30 пунктів.

Звернення за назвою класу

Цей код підкреслить усі абзаци з класом r:

$('p.r').css('text-decoration','underlined');

Цей код підкреслить будь-які елементи з класом r:

$('.r').css('color','red');

Звернення за id

$('p#nn').css('color','green');

Цей код перефарбує абзац з id=nn в зелений колір

Звернення за типом тега

Для звернення до елементів з певним типом використовується форма запису з двокрапкою:

$(':назва_типу').css('властивість','значення');

Наприклад:

$(':input').css('color','red');

Цей код перефарбує текст у червоний, для всіх input: кнопок, текстових полів.

Взаємодія зі "звичайним" Javascript-кодом

Використання бібліотеки JQuery не обумовлює конфліктність з Javascript-кодом. Наприклад, такий скрипт працюватиме у звичайному режимі:

Дана кнопка. При натисканні на кнопку у поточне вікно виводиться заголовок h1 і фарбується в червоний колір.

Скрипт: