Що вміє jQuery
Як це працює
Тепер нам треба підключити jQuery до html-сторінці. Для цього, як ви пам'ятаєте, в html існує тег
* Зверніть увагу на ім'я файлу. Тут використовується бібліотека jquery-1.2.6, але Ви можете завантажити більш свіжу версію, а тому цифри у Вас можуть відрізнятися. *
Отже, у нас в папці лежать html-сторінка, сторінка зі стилями (style.css), сторінка з js-функціями (script.js) і бібліотека jQuery (jquery-1.2.6.js). Давайте зробимо ось такий приклад (поклацати по кнопках):
ефекти jQuery
Ефект Show () Ефект SlideDown () Ефект Animate ()
Давайте подивимося, як це зроблено. На html-сторінці у нас повинно бути три прямокутника (div-и) і три кнопки:
Оформимо зовнішній вигляд і зробимо прямокутники невидимими за допомогою CSS. Код style.css:
Тепер найцікавіше, на сторінці script.js пишемо код функцій, які будуть спрацьовувати при натисканні на кнопки:
Що ж роблять ці функції?
Функція addEffect1 () бачить $ (знак долара) і розуміє, що це jQuery, потім вона бачить ( "# kv1: hidden") і розуміє, що їй потрібно знайти елемент з id = "kv1", що володіє властивістю hidden (невидимий). Далі вона бачить .show () і розуміє, що знайдений елемент треба зробити видимим.
Функція addEffect2 () бачить $ (знак долара) і розуміє, що це jQuery, потім вона бачить ( "# kv2: hidden") і розуміє, що їй потрібно знайти елемент з id = "kv2", що володіє властивістю hidden (невидимий). Далі вона бачить .slideDown ( "slow") і розуміє, що знайдений елемент треба повільно ( "slow") відобразити зверху-вниз (slideDown).
Функція addEffect3 () бачить $ (знак долара) і розуміє, що це jQuery, потім вона бачить ( "# kv3: hidden") і розуміє, що їй потрібно знайти елемент з id = "kv3", що володіє властивістю hidden (невидимий). Далі вона бачить .show () і розуміє, що знайдений елемент треба зробити видимим. Потім вона бачить .animate (. 3000) і розуміє, що розмір шрифту потрібно за 3 секунди (3000) збільшити до 36 пікселів (fontSize: "36px")
В кінці ж цього уроку хотілося б поговорити про основні поняття jQuery. Приблизно синтаксис оператора jQuery можна представити таким чином:
де селектор - елемент або елементи, з якими ми будемо щось робити.
дію - що саме ми будемо робити з вибраними елементами. Ми можемо додати який-небудь ефект, css-стиль, змінити html-код і т.д. Тут же можуть бути вказані будь-які події.
властивості дії - якщо вони передбачені дією.
На сьогодні мабуть все, в наступному уроці будемо вивчати селектори.
Середня оцінка статті: 4 бал