Урок за Wiki за уеб технологии: jQuery-Actions.
Преди да започнете да извършвате действия върху избраните елементи, трябва да разберете следното:
Не можете да извършвате никакви действия върху елементи, докато не се формира DOM дървото. За случая разработчиците на jQuery излязоха със следната конструкция, която винаги трябва да се използва.
Методът text() е предназначен да получава\променя текст от някакъв елемент, като абзац или заглавие:
В този случай съдържанието на параграфа ще бъде включено в селекцията, т.е. целият текст. Типичен метод за манипулиране с проби - съхраняване в променлива:
Сега текстът на абзаца се съхранява в променливата textp. Нека го покажем на екрана:
За да промените текста, трябва да предадете текста като параметър на тази функция.
2. скрий(), покажи()
Често се случва да трябва да скриете определено съдържание, независимо дали е изображение или абзац, или заглавие. За да скриете избрания елемент, трябва да използвате метода 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()