JQuery: відмінності між версіями
MiskoGe (обговорення | внесок) |
Немає опису редагування |
||
| Рядок 2: | Рядок 2: | ||
{{Stub}} | {{Stub}} | ||
'''jQuery''' | '''jQuery''' — бібліотека [[Javascript]], створена для швидкої, легкої взаємодії між [[HTML]], Javascript і контролю елементів DOM. Широко використовується для додання веб-сторінкам інтерактивності. | ||
== Історія створення == | == Історія створення == | ||
Одного разу Джону Резігу дали погратися з Javascript, що йому дуже сподобалось і так він грався й грався... Поки не створив jQuery. Представлена вона була як "нєнавясчівий Жабоскріпт". І справді має достатньо широкі можливості, просту структуру і є дуже зручним для веб-майстрів особливо коли вони знають CSS <ref>А вони, звісно ж, знають.</ref> (селектори, йоу!). | Одного разу Джону Резігу дали погратися з [[Javascript]], що йому дуже сподобалось і так він грався й грався... Поки не створив jQuery. Представлена вона була як "нєнавясчівий Жабоскріпт". І справді має достатньо широкі можливості, просту структуру і є дуже зручним для веб-майстрів, особливо коли вони знають [[CSS]]<ref>А вони, звісно ж, знають.</ref> (селектори, йоу!). | ||
== Огляд основних можливостей == | == Огляд основних можливостей == | ||
| Рядок 12: | Рядок 12: | ||
*Sizzle | *Sizzle | ||
*"сабитія"(Івент хендлєри) | *"сабитія"(Івент хендлєри) | ||
*великі можливості організації | *великі можливості організації візуальних ефектів. | ||
== Короткий підручник == | == Короткий підручник == | ||
| Рядок 20: | Рядок 20: | ||
Синтаксис jQuery десь такий: | Синтаксис jQuery десь такий: | ||
{{Блок|$('селектор'){<br />//А тут код який буде виконаний до елементу на який вказує селектор<br />} }} | {{Блок|$('селектор'){<br />//А тут код який буде виконаний до елементу, на який вказує селектор<br />} }} | ||
Основні дії над об'єктами: | Основні дії над об'єктами: | ||
<br/> | <br/> | ||
*"Мєтади сабитій": | *"Мєтади сабитій": | ||
#.ready(handler) | #.ready(handler) — виконається, коли елемент буде довантажено на веб-сторінку, наприклад, код <code>$(document).ready{//тут якийсь код}</code> буде виконано, коли довантажено всю веб-сторінку. | ||
#keydown, keyup, mouseOver, mouseOut і т.д. | #keydown, keyup, mouseOver, mouseOut і т.д. — тут, думаємо, зрозуміло по назвам.<ref>А якщо ні, то ти — даун!</ref> | ||
#і т.д. | #і т.д. | ||
*Візуальні ефекти: | *Візуальні ефекти: | ||
#animate(attributes, speed) | #animate(attributes, speed) — анімує об'єкт з нинішнього стану до стану в attributes, наприклад <code>$('#menu').animate({'width': '500'}, slow)</code>. Цей код анімує змінення ширини об'єкта від нинішнього стану до стан у attributes({'width': '500'}). | ||
#fadeIn, fadeOut | #fadeIn, fadeOut — анімовано сховати або показати елементи, змінюючи їх непрозорість. | ||
#show, hide | #show, hide — анімовано сховати й показати елементи змінюючи їх розмір і розташування. | ||
#і т.д. | #і т.д. | ||
*Тисячі їх! | *Тисячі їх! | ||
Версія за 00:28, 25 травня 2020
|
|
jQuery — бібліотека Javascript, створена для швидкої, легкої взаємодії між HTML, Javascript і контролю елементів DOM. Широко використовується для додання веб-сторінкам інтерактивності.
Історія створення
Одного разу Джону Резігу дали погратися з Javascript, що йому дуже сподобалось і так він грався й грався... Поки не створив jQuery. Представлена вона була як "нєнавясчівий Жабоскріпт". І справді має достатньо широкі можливості, просту структуру і є дуже зручним для веб-майстрів, особливо коли вони знають CSS[1] (селектори, йоу!).
Огляд основних можливостей
- Sizzle
- "сабитія"(Івент хендлєри)
- великі можливості організації візуальних ефектів.
Короткий підручник
По-перше, щоб користуватись jQuery, її треба підключити. Качаєш це і додаєш <script src="шлях до качаного jQuery.js"></script> в голові веб-сторінки.
Синтаксис jQuery десь такий:
|
$('селектор'){ |
Основні дії над об'єктами:
- "Мєтади сабитій":
- .ready(handler) — виконається, коли елемент буде довантажено на веб-сторінку, наприклад, код
$(document).ready{//тут якийсь код}буде виконано, коли довантажено всю веб-сторінку. - keydown, keyup, mouseOver, mouseOut і т.д. — тут, думаємо, зрозуміло по назвам.[2]
- і т.д.
- Візуальні ефекти:
- animate(attributes, speed) — анімує об'єкт з нинішнього стану до стану в attributes, наприклад
$('#menu').animate({'width': '500'}, slow). Цей код анімує змінення ширини об'єкта від нинішнього стану до стан у attributes({'width': '500'}). - fadeIn, fadeOut — анімовано сховати або показати елементи, змінюючи їх непрозорість.
- show, hide — анімовано сховати й показати елементи змінюючи їх розмір і розташування.
- і т.д.
- Тисячі їх!
Примітки
Посилання
| |||||||||||||||||||
