Wiki-підручник з веб-технологій: jQuery-Дії.

Перш ніж розпочати виконання дій над відібраними елементами, необхідно зрозуміти таку річ:

Не можна робити будь-які дії над елементами, доки не сформувалося DOM дерево. З цієї нагоди розробники jQuery придумали наступну конструкцію, яку необхідно використовувати завжди.

Метод text() призначений для отримання\зміни тексту з будь-якого елемента, наприклад абзац, або заголовок:

У разі вибірку потрапить вміст абзацу, тобто. весь текст. Типовий прийом маніпулювання з вибірками – запам'ятовування у змінну:

Тепер наш текст абзацу зберігається в змінній "textp". Виведемо його на екран:

Щоб змінити текст, потрібно передати текст параметром у цю функцію.

2. hide(), show()

Часто буває потрібно приховати певний контент, чи то картинка чи абзац, чи заголовок. Щоб приховати обраний елемент, слід використовувати метод hide(), який може бути передано 2 параметри(опціонально): час зникнення (у мікросекундах, тобто 1сек = 1000) і функція, яка буде виконана після зникнення:

В даному прикладі, елемент з ідентифікатором "example_id" зникне за 2 секунди

Щоб знову відобразити захований елемент, слід використовувати функцію show(), у якої аналогічні параметри

3. Ланцюгові функції

4. Автоматичні цикли

5. Зміна ширини/висоти елементів

Іноді потрібно дізнатися або змінити ширину/висота. Щоб отримати значення, використовуємо такі функції:

У цьому прикладі відповідні змінні отримають значення ширини та висоти елемента.

Щоб змінити їх, передаємо у функції потрібні параметри:

Або ж робимо це із застосуванням «ланцюгових функцій»:

6.Зміна HTML

Це жирний абзац

<>Аналогічно методу text(), метод html() дозволяє змінити код.

7. Плавне зникнення/поява

Функції show() і hide() дозволяють ховати та показувати елементи, але без будь-якої анімації. Функції fadeOut() і fadeIn() дозволяють ховати та показувати елементи, але вже з плавною анімацією. Функції приймаю 2 параметри: час зникнення/появи та функція, яка буде виконана після.

в цьому прикладі зображення у вибірці зникне плавно за 1 секунду, потім на наступному кроці плавно з'явиться за 1 секунду.

Функція fadeTo() дозволяє налаштувати рівень прозорості вибраного елемента. Приймає 3 параметри: час зникнення, ступінь зникнення та функцію, яка буде виконана після. Ступінь зникнення варіюється від 0-1

У цьому прикладі зображення стане прозорим до 0,3 за 1 секунду, а потім з'явиться за 1 секунду.

Функції slideUp() і slideDown() дозволяють плавно зникнути елементу (знизу догори) і плавне з'явиться (згори донизу) відповідно.

8. Робота з атрибутами елементів

9. Додавання/видалення класу елемента

У будь-якого сайту є CSS стилі для конкретних елементів. Щоб додати/видалити клас до вибраного елемента в jQuery, є функції addClass() і removeClass()

Уявимо, що вам потрібно встановити стиль для новоствореного абзацу

Також у вас в CSS прописаний наступний клас:

Щоб застосувати цей стиль до заданого абзацу, необхідно зробити таке:

або ж видалити клас, якщо він не потрібен

10. Робота з CSS

для того, щоб дізнатися/змінити шрифт, скористаємося функцією css()

Змінна textFont отримає значення "arial".

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

Якщо необхідно змінити 2 атрибути, допустимо колір і шрифт, то тут можливі варіанти. Можна застосувати «ланцюгові функції»

Так само, можливо це робити у вигляді, більш схожому на традиційний CSS:

Зверніть увагу, що в цьому випадку ім'я атрибута відокремлюється від значення, яке йому надається двокрапкою!

Аналогічні дії можна робити за певний проміжок часу, для цього слід використовувати функцію animate()

11. Додавання контенту

Щоб додати контент ДО обраного елемента, слід користуватися функцією before()

Для того, щоб додати контент ПІСЛЯ вибраного елемента, слід скористатися функцією after()

---