У сценаријима као што су валидација података и верификација, стил елемената поља се мења сваки пут када корисник отпусти један притиснут тастер са тастатуре. Ова промена стила у односу на свако притискање или отпуштање тастера се врши преко руковалаца догађаја које обезбеђује јКуери. Да будемо прецизни, руковалац или метод који обрађује или позива функцију када се било који притиснут тастер отпусти је „ кеиуп ()” метод.
С друге стране, метод који обрађује или позива функцијски тастер је притиснут је „ кеидовн ()” метод и можете проверити наше повезане чланак за овај догађај.
У овом блогу ћемо дати кратак опис методе јКуери кеиуп().
Како користити јКуери кеиуп() метод?
јКуери “ кеиуп ()” метода покреће анонимну функцију кад год корисник престане да притиска или уноси тастере унутар изабраног поља. Овај метод се такође користи за примену динамичког стила на изабрани елемент у реалном времену.
Синтакса
Синтакса која се користи за кеиуп() јКуери метод је следећа:
$ ( 'ово' ) . кеиуп ( цустомФунц )
У горњој синтакси, „ ово ” је изабрани ХТМЛ елемент, а „ цустомФунц ” је функција коју извршава „ кеиуп ” метод преко „ ово ”.
Хајде да наведемо неколико примера за дубље разумевање.
Пример 1: Промена боје текста помоћу методе „кеиуп()“.
У овом случају, боја унетог текста ће бити промењена у другу боју када корисник отпусти већ притиснут тастер као што је приказано у наставку:
< хтмл >
< глава >
< скрипта срц = '24Е8Ц7ФБ7Ф522986Ц0Б1ДФ0916А2789181211Ф1Б' >< / скрипта >
< скрипта >
$(доцумент).реади(фунцтион() {
$('#демо').кеиуп(фунцтион() {
$('#демо').цсс('цолор', 'форестгреен');
});
});
< / скрипта >
< / глава >
< тело >
< див >
Унесите податке о Линукхинт-у: < улазни ид = 'демо' тип = 'текст' / >
< / див >
< / тело >
< / хтмл >
Опис горњег кода је наведен у наставку:
- Прво, увезите јКуери у пројекат тако што ћете убацити његов онлајн ЦДН тако што ћете посетити ово линк службене документације.
- Затим креирајте анонимну функцију која ће бити позвана када се „ документ ” или се страница учитава. Ова функција бира ХТМЛ елемент са ИД-ом „демо“ и прилаже „ кеиуп ()” метод са њим.
- „ кеиуп ()” метода позива функцију повратног позива која користи „ цсс ()“ да бисте подесили боју фонта текста на „ шумски зелено ”.
- Сада креирајте изабрани „< улазни >” елемент унутар „< тело >” означите и доделите јој ИД од “ демо ”.
Преглед веб странице након завршетка процеса компилације:
Излаз показује да се боја текста мења када се отпусти изабрани тастер.
Пример 2: Динамичка промена боје позадине
У овом примеру, различите боје позадине ће бити постављене за изабрани ХТМЛ елемент кад год корисник напусти притиснут тастер. Хајде да погледамо код за овај сценарио:
< глава >< скрипта срц = '24Е8Ц7ФБ7Ф522986Ц0Б1ДФ0916А2789181211Ф1Б' >< / скрипта >
< скрипта >
нека бацкгроундСхадес = [ 'аквамарин' , 'наранџаста Црвена' , 'цадетблуе' , 'шумски зелено' ,
'светло сива' , 'пешчанобраон' , 'магента' , 'бурливоод' ] ;
нека ј = 0 ;
$ ( документ ) .кеиуп ( функција ( догађај ) {
$ ( '#ХГ г' ) .цсс ( 'боја позадине' , бацкгроундСхадес [ ј ] ) ;
ј++;
ј = ј % 9 ;
} ) ;
< / скрипта >
< / глава >
< тело >
< х1 стил = 'боја: морско зелена' >Линукхинт чланак< / х1 >< бр >
< див ид = 'ХГ г' стил = 'паддинг: 10пк' >
< х2 >јКуери кеиуп Користи се за постављање другачијег Позадина сваки пут када се тастер отпусти.< / х2 >
< бр / >
< / див >
< / тело >
Опис горњег кода:
- У почетку, увезите јКуери у свој пројекат додавањем јКуери ЦДН унутар „< глава >” ознака.
- Затим креирајте низ под називом „ бацкгроундСхадес ” који садржи осам насумичних боја.
- Затим, „ кеиуп ()” метод је приложен уз „ документ ” и позива анонимну функцију повратног позива. Ова функција бира ХТМЛ елемент са ИД-ом „ ХГ г ” и примењује ЦСС “ боја позадине ' имовина.
- Низ „ бацкгроундСхадес ” се прослеђује као вредност за ЦСС својства, а индекс је подешен на „ ј ' променљива. Ова променљива се сваки пут повећава за један и поново почиње од „ 0 ” индекс када вредност достигне “ 8 ”. Зато што је максимални индекс у низу „ 7 ”.
- Након тога, креирајте изабрану „ див ” елемент са ИД-ом „ ХГ г “, боја позадине овог елемента ће се променити када се притисне тастер отпусти.
Преглед веб странице након компилације:
Излаз потврђује да се боја позадине за изабрани ХТМЛ елемент мења сваки пут када се притиснути или изабрани тастер отпусти. То је све о коришћењу „ кеиуп ()” метод.
Закључак
јКуери “ кеиуп ()” метода покреће функцију повратног позива на изабраном ХТМЛ елементу када се отпусти притиснут тастер. Овај метод се не позива када се тастер притисне, али у тренутку отпуштања или када притиснете тастер, ова функција извршава функцију повратног позива. Овај блог је објаснио употребу и рад методе јКуери кеиуп().