జావాస్క్రిప్ట్ అనేది వెబ్సైట్లకు ఇంటరాక్టివ్ ఫంక్షనాలిటీలను జోడించడానికి ఎక్కువగా ఉపయోగించే ఒక ప్రసిద్ధ బహుముఖ భాష. ఇది ఈ పనులను సమర్ధవంతంగా నిర్వర్తించే j క్వెరీ అనే లైబ్రరీతో వస్తుంది. j క్వెరీ పద్ధతులు ప్రాథమికంగా కోడ్తో ఎక్కువ ప్రమేయం లేకుండా నిర్దిష్ట పనిని చేసే చర్యలు. అటువంటి పద్ధతి ఏమిటంటే ' మార్పు() ఇన్పుట్ ఫీల్డ్ విలువ మార్చబడిందని వెంటనే గమనించడానికి 'మార్పు' ఈవెంట్ను తొలగించే పద్ధతి. ఇది ఎక్కువగా HTML ఫారమ్ ఫీల్డ్లతో పాటు చెక్బాక్స్లు, రేడియో బటన్లు మరియు ఎంపిక పెట్టెలలో ఉపయోగించబడుతుంది.
ఈ వ్రాత j క్వెరీ “మార్పు()” పద్ధతి యొక్క పని మరియు ఆచరణాత్మక అమలుపై వివరిస్తుంది.
j క్వెరీ “మార్పు()” పద్ధతి ఎలా పని చేస్తుంది?
j క్వెరీ ' మార్పు() 'పద్ధతి కాల్పులు' మార్పు ” ఈవెంట్ హ్యాండ్లర్. “మార్పు” ఈవెంట్ అనేది పేర్కొన్న (“ ”, “
వాక్యనిర్మాణం
$ ( సెలెక్టర్ ) .మార్పు ( ఫంక్షన్ )
పై వాక్యనిర్మాణంలో:
-
- సెలెక్టర్: ఇది HTML మూలకం యొక్క తారుమారుని అనుమతిస్తుంది.
- ఫంక్షన్: ఇది ఐచ్ఛిక పరామితి, ఇది “మార్పు()” పద్ధతితో అమలు చేయడానికి ఫంక్షన్ను నిర్దేశిస్తుంది.
ఉదాహరణ 1: ఇన్పుట్ ఫీల్డ్ మారిన విలువను పొందడానికి “మార్పు()” పద్ధతిని వర్తింపజేయడం
ఈ ఉదాహరణలో, ' మార్పు() నిర్దిష్ట HTML “ ” మూలకం మార్చబడిన విలువను తిరిగి ఇవ్వడానికి ” పద్ధతి వర్తించబడుతుంది.
HTML కోడ్
ముందుగా, కింది HTML కోడ్ యొక్క అవలోకనం:
< h2 > j క్వెరీ మార్పు ( ) పద్ధతి h2 >< p > ఇన్పుట్ ఫీల్డ్ విలువను మార్చండి: p >
ఇన్పుట్ ఫీల్డ్: < ఇన్పుట్ రకం = 'వచనం' విలువ = 'Linux' మార్పు = 'హెచ్చరిక(this.value)' >
< p > ఫైర్ చేయడానికి ఇచ్చిన బటన్పై క్లిక్ చేయండి 'మార్పు' సంఘటన: p >
< బటన్ > ఇక్కడ నొక్కండి బటన్ >
ఈ కోడ్ బ్లాక్లో:
-
- 'ని ఉపయోగించి స్థాయి 2 యొక్క ఉపశీర్షికను నిర్వచించండి ” ట్యాగ్.
- తరువాత, '' సహాయంతో పేరాను పేర్కొనండి ” ట్యాగ్.
- ఆ తర్వాత, '' ద్వారా ఇన్పుట్ ఫీల్డ్ని జోడించండి <ఇన్పుట్> 'టాగ్ పేరు' ఇన్పుట్ ఫీల్డ్ ',' వంటి రకాన్ని కలిగి ఉంది వచనం ', మరియు విలువ ' Linux ”, వరుసగా.
- ఇది కూడా అనుబంధిస్తుంది ' మార్పు() పేర్కొన్న ఇన్పుట్ విలువ మారినప్పుడు హెచ్చరిక పెట్టె పాప్ అప్ చేసే ఈవెంట్.
- ది ' ” ట్యాగ్ పేర్కొన్న ప్రకటనతో మరొక పేరాను సృష్టిస్తుంది.
- చివరగా, “ని ఉపయోగించి బటన్ను జోడించండి <బటన్> ” ట్యాగ్.
j క్వెరీ కోడ్
ఇప్పుడు, కింది j క్వెరీ కోడ్ను పరిగణించండి:
< తల >< స్క్రిప్ట్ src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > స్క్రిప్ట్ >
< స్క్రిప్ట్ >
$ ( పత్రం ) .సిద్ధంగా ( ఫంక్షన్ ( ) {
$ ( 'బటన్' ) .క్లిక్ చేయండి ( ఫంక్షన్ ( ) {
$ ( 'ఇన్పుట్' ) .మార్పు ( ) ;
} ) ;
} ) ;
స్క్రిప్ట్ >
తల >
పై కోడ్ లైన్లలో:
-
- పేర్కొనండి ' <స్క్రిప్ట్> ”అధికారిక వెబ్సైట్ “ నుండి j క్వెరీ యొక్క CDN పాత్ను కలిగి ఉన్న “హెడ్” విభాగంలో ట్యాగ్ ”.
- తరువాత, j క్వెరీ కోడ్ మొదట “కి అనుగుణంగా ఉంటుంది పత్రం లక్ష్యంగా ఉన్న DOM ఎలిమెంట్ని ఎంచుకుని, అనుబంధించాల్సిన సెలెక్టర్ సిద్ధంగా () ” పత్రం లోడ్ అయిన వెంటనే పేర్కొన్న ఫంక్షన్()ని అమలు చేసే పద్ధతి.
- ఆ తరువాత, ' బటన్ 'సెలెక్టర్ జోడించబడింది మరియు 'తో లింక్ చేయబడింది క్లిక్() బటన్ క్లిక్పై ఫంక్షన్ని అమలు చేయడానికి అనుమతించే పద్ధతి.
- ఫంక్షన్ నిర్వచనంలో, “ని వర్తింపజేయండి మార్పు() 'పై పద్ధతి' ఇన్పుట్ ”మూలకం దాని విలువ మారినప్పుడు “ఆన్చేంజ్” ఈవెంట్ను కాల్చేస్తుంది.
అవుట్పుట్
ట్రిగ్గర్ చేయబడిన “ఆన్చేంజ్” ఈవెంట్పై ఇన్పుట్ ఫీల్డ్ యొక్క మారిన విలువతో అవుట్పుట్ హెచ్చరిక పెట్టెను ప్రదర్శిస్తుంది.
ఉదాహరణ 2: ఇన్పుట్ ఫీల్డ్ యొక్క నేపథ్య రంగును మార్చడానికి “మార్పు()” పద్ధతిని వర్తింపజేయడం
ఈ ప్రత్యేక ఉదాహరణ '' యొక్క పనిని వివరిస్తుంది. మార్పు() ” విలువను మార్చిన తర్వాత ఇన్పుట్ ఫీల్డ్ యొక్క నేపథ్య రంగును మార్చే పద్ధతి.
HTML కోడ్
ఇచ్చిన HTML కోడ్ని అనుసరించండి:
< h2 > j క్వెరీ మార్పు ( ) పద్ధతి h2 >< p > ఇన్పుట్ ఫీల్డ్ విలువను మార్చండి: p >
ఇన్పుట్ ఫీల్డ్: < ఇన్పుట్ రకం = 'వచనం' విలువ = 'Linux' > p >
ఇక్కడ, “ ” మూలకం దాని రకాన్ని మరియు విలువను మాత్రమే నిర్దేశిస్తుంది.
j క్వెరీ కోడ్
ఇప్పుడు, j క్వెరీ కోడ్కి వెళ్లండి:
< తల >< స్క్రిప్ట్ src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > స్క్రిప్ట్ >
< స్క్రిప్ట్ >
$ ( పత్రం ) .సిద్ధంగా ( ఫంక్షన్ ( ) {
$ ( 'ఇన్పుట్' ) .మార్పు ( ఫంక్షన్ ( ) {
$ ( ఇది ) .css ( 'నేపథ్య రంగు' , 'పసుపు' ) ;
} ) ;
} ) ;
స్క్రిప్ట్ >
తల >
పై కోడ్ లైన్లలో, ' మార్చు () 'పద్ధతి ఒక' జతచేస్తుంది ఫంక్షన్ () ” ఇది “CSS” స్టైలింగ్ ప్రాపర్టీని వర్తింపజేస్తుంది “ నేపథ్య రంగు 'ఎంచుకున్న HTML మూలకంపై అంటే, మార్చబడిన ఇన్పుట్ విలువపై 'ఇన్పుట్'.
అవుట్పుట్
ఇచ్చిన ఇన్పుట్ ఫీల్డ్ విలువ మారినప్పుడు దాని నేపథ్య రంగు మారుతుందని అవుట్పుట్ నిర్ధారిస్తుంది.
ముగింపు
j క్వెరీ అందిస్తుంది ' మార్పు() ఇన్పుట్ ఫీల్డ్ విలువను వినియోగదారు మార్చినప్పుడు “మార్పు” ఈవెంట్ను తొలగించే పద్ధతి. ఇది దాని కార్యాచరణలకు మద్దతు ఇవ్వడానికి అదనపు ఈవెంట్తో కూడా అనుబంధించబడుతుంది, ఇది ' ', '