డేటా ధ్రువీకరణ మరియు ధృవీకరణ వంటి సందర్భాలలో, కీబోర్డ్ నుండి వినియోగదారు ఒకే నొక్కిన కీని విడుదల చేసినప్పుడల్లా ఫీల్డ్ మూలకాల యొక్క స్టైలింగ్ మారుతుంది. ప్రతి కీ ప్రెస్ లేదా విడుదలకు సంబంధించి స్టైలింగ్ యొక్క ఈ మార్పు j క్వెరీ అందించిన ఈవెంట్ హ్యాండ్లర్ల ద్వారా నిర్వహించబడుతుంది. నిర్దిష్టంగా చెప్పాలంటే, ఏదైనా నొక్కిన కీ విడుదలైనప్పుడు ఫంక్షన్‌ను డీల్ చేసే లేదా అమలు చేసే ఈవెంట్ హ్యాండ్లర్ లేదా పద్ధతి “ కీఅప్ ()' పద్ధతి.
మరోవైపు, ఫంక్షన్ కీ నొక్కినప్పుడు నిర్వహించే లేదా అమలు చేసే పద్ధతి “ కీడౌన్ ()” పద్ధతి మరియు మీరు మా అనుబంధాన్ని తనిఖీ చేయవచ్చు వ్యాసం ఈ ఈవెంట్ కోసం.
ఈ బ్లాగ్‌లో, మేము j క్వెరీ కీఅప్() పద్ధతి యొక్క సంక్షిప్త వివరణను అందిస్తాము.
j క్వెరీ కీఅప్() పద్ధతిని ఎలా ఉపయోగించాలి?
j క్వెరీ ' కీఅప్ వినియోగదారు ఎంచుకున్న ఫీల్డ్‌లోని కీలను నొక్కడం లేదా నమోదు చేయడం ఆపివేసినప్పుడు ()” పద్ధతి అనామక ఫంక్షన్‌ను ప్రేరేపిస్తుంది. నిజ సమయంలో ఎంచుకున్న మూలకంపై డైనమిక్ స్టైలింగ్‌ని వర్తింపజేయడానికి కూడా ఈ పద్ధతి ఉపయోగించబడుతుంది.
వాక్యనిర్మాణం
కీఅప్() j క్వెరీ పద్ధతి కోసం ఉపయోగించే సింటాక్స్ క్రింది విధంగా ఉంది:
$ ( 'ఇది' ) . కీఅప్ ( customFunc )
పై వాక్యనిర్మాణంలో, “ ఇది ” అనేది ఎంచుకున్న HTML మూలకం, మరియు “ customFunc ” అనేది ఒక ఫంక్షన్ ద్వారా అమలు చేయబడుతుంది కీఅప్ 'పై పద్ధతి' ఇది ”.
లోతైన అవగాహన కోసం కొన్ని ఉదాహరణలు చూద్దాం.
ఉదాహరణ 1: “కీఅప్()” పద్ధతిని ఉపయోగించి టెక్స్ట్ రంగును మార్చడం
ఈ సందర్భంలో, దిగువ చూపిన విధంగా వినియోగదారు ఇప్పటికే నొక్కిన కీని విడుదల చేసినప్పుడు నమోదు చేసిన వచనం యొక్క రంగు వేరొక రంగుకు మార్చబడుతుంది:
< html >
< తల >
< స్క్రిప్ట్ src = 'https://code.jquery.com/jquery-3.7.0.js' >< / స్క్రిప్ట్ >
< స్క్రిప్ట్ >
$(పత్రం).రెడీ(ఫంక్షన్() {
$('#డెమో').కీఅప్(ఫంక్షన్() {
$('#డెమో').css('రంగు', 'ఫారెస్ట్ గ్రీన్');
});
});
< / స్క్రిప్ట్ >
< / తల >
< శరీరం >
< div >
Linuxhint డేటాను నమోదు చేయండి: < ఇన్పుట్ id = 'డెమో' రకం = 'వచనం' / >
< / div >
< / శరీరం >
< / html >
పై కోడ్ యొక్క వివరణ క్రింద పేర్కొనబడింది:
- ముందుగా, దీన్ని సందర్శించడం ద్వారా దాని ఆన్‌లైన్ CDNని చొప్పించడం ద్వారా ప్రాజెక్ట్‌లోకి j క్వెరీని దిగుమతి చేయండి లింక్ అధికారిక డాక్యుమెంటేషన్.
- తర్వాత, అనామక ఫంక్షన్‌ని సృష్టించండి, అది “ పత్రం ” లేదా పేజీ లోడ్ అవుతుంది. ఈ ఫంక్షన్ “డెమో” ఐడితో HTML మూలకాన్ని ఎంచుకుంటుంది మరియు “ని జత చేస్తుంది కీఅప్ ()” దానితో పద్ధతి.
- ది ' కీఅప్ ()' పద్ధతి 'ని ఉపయోగించే కాల్‌బ్యాక్ ఫంక్షన్‌ను ప్రేరేపిస్తుంది css ()” టెక్స్ట్ యొక్క ఫాంట్ రంగును సెట్ చేయడానికి “ అటవీ ఆకుపచ్చ ”.
- ఇప్పుడు, ఎంచుకున్న “<ని సృష్టించండి ఇన్పుట్ '< లోపల >' మూలకం శరీరం >' ట్యాగ్ చేసి, దానికి ' ఐడిని కేటాయించండి డెమో ”.
సంకలన ప్రక్రియ పూర్తయిన తర్వాత వెబ్‌పేజీ ప్రివ్యూ:
ఎంచుకున్న కీ విడుదల చేయబడినప్పుడు టెక్స్ట్ మార్పుల రంగును అవుట్‌పుట్ చూపుతుంది.
ఉదాహరణ 2: నేపథ్య రంగును డైనమిక్‌గా మార్చడం
ఈ ఉదాహరణలో, వినియోగదారు నొక్కిన కీని వదిలిపెట్టినప్పుడల్లా ఎంచుకున్న HTML మూలకం కోసం విభిన్న నేపథ్య రంగులు సెట్ చేయబడతాయి. ఈ దృష్టాంతం కోసం కోడ్‌ని చూద్దాం:
< తల >< స్క్రిప్ట్ src = 'https://code.jquery.com/jquery-3.7.0.js' >< / స్క్రిప్ట్ >
< స్క్రిప్ట్ >
బ్యాక్‌గ్రౌండ్‌ షేడ్స్‌ని అనుమతించండి = [ 'ఆక్వామెరైన్' , 'నారింజ' , 'కాడెట్ బ్లూ' , 'అటవీ హరిత' ,
'లేత బూడిద రంగు' , 'సాండీ బ్రౌన్' , 'మెజెంటా' , 'బర్లీవుడ్' ] ;
j ని అనుమతించండి = 0 ;
$ ( పత్రం ) .కీఅప్ ( ఫంక్షన్ ( సంఘటన ) {
$ ( '#hgg' ) .css ( 'నేపథ్య రంగు' , నేపథ్య షేడ్స్ [ j ] ) ;
j++;
j = j% 9 ;
} ) ;
< / స్క్రిప్ట్ >
< / తల >
< శరీరం >
< h1 శైలి = 'రంగు: సీగ్రీన్' >Linuxhint వ్యాసం< / h1 >< br >
< div id = 'hgg' శైలి = 'ప్యాడింగ్: 10px' >
< h2 > j క్వెరీ కీఅప్ విభిన్నంగా సెట్ చేయడానికి ఉపయోగించబడుతుంది నేపథ్య కీ విడుదల చేయబడిన ప్రతిసారీ.< / h2 >
< br / >
< / div >
< / శరీరం >
పై కోడ్ వివరణ:
- ప్రారంభంలో, '< లోపల j క్వెరీ CDNని జోడించడం ద్వారా మీ ప్రాజెక్ట్‌లో j క్వెరీని దిగుమతి చేయండి తల >” ట్యాగ్.
- అప్పుడు, '' పేరుతో ఒక శ్రేణిని సృష్టించండి నేపథ్య షేడ్స్ ” ఇందులో ఎనిమిది యాదృచ్ఛిక రంగులు ఉంటాయి.
- తరువాత, ' కీఅప్ ()' పద్ధతి 'కి జోడించబడింది పత్రం ” మరియు ఇది అనామక కాల్‌బ్యాక్ ఫంక్షన్‌ను ప్రేరేపిస్తుంది. ఈ ఫంక్షన్ HTML మూలకాన్ని 'ఐడితో ఎంచుకుంటుంది hgg 'మరియు CSSని వర్తింపజేస్తుంది' నేపథ్య రంగు ”ఆస్తి.
- శ్రేణి ' నేపథ్య షేడ్స్ ” CSS లక్షణాల విలువగా పాస్ చేయబడింది మరియు ఇండెక్స్ “కి సెట్ చేయబడింది j ” వేరియబుల్. ఈ వేరియబుల్ ప్రతిసారీ ఒకటి పెంచబడుతుంది మరియు ' నుండి పునఃప్రారంభించబడుతుంది 0 'విలువ చేరుకున్నప్పుడు సూచిక' 8 ”. ఎందుకంటే శ్రేణిలోని గరిష్ట సూచిక “ 7 ”.
- ఆ తర్వాత, ఎంచుకున్న “ని సృష్టించండి div '' అనే ఐడితో మూలకం hgg ”, నొక్కిన కీ విడుదల చేయబడినప్పుడు ఈ మూలకం యొక్క నేపథ్య రంగు మార్చబడుతుంది.
సంకలనం తర్వాత వెబ్‌పేజీ ప్రివ్యూ:
నొక్కిన లేదా ఎంచుకున్న కీ విడుదల చేయబడిన ప్రతిసారీ ఎంచుకున్న HTML మూలకం యొక్క నేపథ్య రంగు మారుతున్నట్లు అవుట్‌పుట్ నిర్ధారిస్తుంది. అదంతా 'ని ఉపయోగించడం గురించి కీఅప్ ()' పద్ధతి.
ముగింపు
j క్వెరీ ' కీఅప్ ()” పద్ధతి నొక్కిన కీ విడుదల చేయబడినప్పుడు ఎంచుకున్న HTML మూలకంపై కాల్‌బ్యాక్ ఫంక్షన్‌ను ప్రేరేపిస్తుంది. కీ నొక్కినప్పుడు ఈ పద్ధతి కాల్ చేయదు కానీ విడుదల సమయంలో లేదా కీ అప్‌లో ఈ ఫంక్షన్ కాల్‌బ్యాక్ ఫంక్షన్‌ని అమలు చేస్తుంది. ఈ బ్లాగ్ j క్వెరీ కీఅప్() పద్ధతి యొక్క ఉపయోగం మరియు పనిని వివరించింది.