ПРАКТИЧНА № 2

У першій практичній роботі ми вже змінювали стиль кнопок при наведенні курсору на них. Розглянемо нові можливості JQuery. Попрацюємо з таблицею, подивимося як можна в ній виділяти рядки, що цікавлять користувача. Ви вже знаєте, що css (ім'я, значення) встановлює значення однієї властивості стилю css для всіх елементів набору.

У минулій вправі ви використовували:

click( ) Повертає: jQuery. Викликає подію click для кожного елемента набору.
click( функція ) Повертає: jQuery Призначає функцію для події click для кожного елемента набору.

Для цієї вправи нам потрібно знати два нові селектори:

:even Повертає: Масив<Елементи>Пошук парних елементів, починаючи з нуля.
: odd Повертає: Масив<Елементи>Пошук непарних елементів, починаючи з нуля.

Ознайомимося з новими методами:

addClass( клас ) Повертає: jQuery. Додає зазначений клас до кожного елемента, що збігся.
hasClass( клас ) Повертає: Логічне значення. Повертає true, якщо хоча б один з набору елементів, що збіглися, має вказаний клас.
removeClass( клас ) Повертає: jQuery. Видаляє всі або вказаний клас з набору елементів, що збіглися.
toggleClass( клас ) Повертає: jQuery. Додає зазначений клас до елемента, якщо його немає, і видаляє зазначений клас, якщо елемент вже має такий.

1 . Щоб отримати таку сторінку виконаємо таку розмітку:

В окремому файлі style.css пишемо правила оформлення:

Таблиця стилів

В окремому файлі d1.js пишемо скрипт:

Парним рядкам призначаємо клас s1
Для рядків, з класом s1 ставимо перемикач класів
Для рядків з класом s2 видаляємо старий клас і призначаємо новий клас s4.

Підключаємо таблицю стилів та скрипт у заголовній частині сторінки.

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