जावास्क्रिप्ट एक प्रसिद्ध बहुमुखी भाषा है जिसका उपयोग ज्यादातर वेबसाइटों में इंटरैक्टिव कार्यात्मकताओं को जोड़ने के लिए किया जाता है। यह jQuery नाम की एक लाइब्रेरी के साथ आता है जो इन कार्यों को कुशलतापूर्वक करता है। JQuery के तरीके मूल रूप से वे कार्य हैं जो कोड की अधिक भागीदारी के बिना एक विशिष्ट कार्य करते हैं। ऐसा ही एक तरीका है ' परिवर्तन() ' विधि जो 'परिवर्तन' घटना को तुरंत नोटिस करती है कि इनपुट फ़ील्ड का मान बदल गया है। यह ज्यादातर HTML फॉर्म फ़ील्ड्स के साथ-साथ चेकबॉक्स, रेडियो बटन और चुनिंदा बॉक्स में उपयोग किया जाता है।
यह राइट-अप jQuery के “परिवर्तन ()” पद्धति के कार्य और व्यावहारिक कार्यान्वयन पर विस्तार से बताता है।
JQuery 'परिवर्तन ()' विधि कैसे काम करती है?
जेक्वेरी ' परिवर्तन() 'विधि आग लगाती है' परिवर्तन ' आयोजन प्रबंधकर्ता। 'परिवर्तन' घटना एक विशेष प्रकार की जावास्क्रिप्ट घटना है जो तब होती है जब निर्दिष्ट ('<इनपुट>', '
वाक्य - विन्यास
$ ( चयनकर्ता ) ।परिवर्तन ( समारोह )
उपरोक्त सिंटैक्स में:
-
- चयनकर्ता: यह HTML तत्व के हेरफेर की अनुमति देता है।
- समारोह: यह एक वैकल्पिक पैरामीटर है जो फ़ंक्शन को 'परिवर्तन ()' विधि से निष्पादित करने के लिए निर्दिष्ट करता है।
उदाहरण 1: इनपुट फ़ील्ड परिवर्तित मान प्राप्त करने के लिए 'परिवर्तन ()' विधि लागू करना
इस उदाहरण में, ' परिवर्तन() एक विशेष HTML '<इनपुट>' तत्व परिवर्तित मान वापस करने के लिए 'विधि लागू की जाती है।
HTML कोड
सबसे पहले, निम्नलिखित HTML कोड का अवलोकन:
< एच 2 > jQuery परिवर्तन ( ) तरीका एच 2 >< पी > इनपुट फ़ील्ड का मान बदलें: पी >
इनपुट क्षेत्र: < इनपुट प्रकार = 'मूलपाठ' कीमत = 'लिनक्स' परिवर्तन पर = 'चेतावनी (यह। मूल्य)' >
< पी > फायर करने के लिए दिए गए बटन पर क्लिक करें 'परिवर्तन पर' आयोजन: पी >
< बटन > यहाँ क्लिक करें बटन >
इस कोड ब्लॉक में:
-
- स्तर 2 के एक उपशीर्षक को 'का उपयोग करके परिभाषित करें' <एच2> ' उपनाम।
- अगला, 'की मदद से पैराग्राफ निर्दिष्ट करें ' उपनाम।
- उसके बाद, 'के माध्यम से एक इनपुट फ़ील्ड जोड़ें' <इनपुट> 'टैग नामित' इनपुट क्षेत्र ”, का प्रकार “ मूलपाठ ”, और मान “ लिनक्स ', क्रमश।
- यह एक 'को भी जोड़ता है परिवर्तन पर() ”इवेंट जो एक अलर्ट बॉक्स को पॉप अप करता है जब निर्दिष्ट इनपुट मान बदलता है।
- ' ” टैग बताए गए बयान के साथ एक और पैराग्राफ बनाता है।
- अंत में, 'का उपयोग करके एक बटन जोड़ें' <बटन> ' उपनाम।
jQuery कोड
अब, निम्नलिखित jQuery कोड पर विचार करें:
< सिर >< लिखी हुई कहानी स्रोत = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' >> लिखी हुई कहानी >
< लिखी हुई कहानी >
$ ( दस्तावेज़ ) ।तैयार ( समारोह ( ) {
$ ( 'बटन' ) .क्लिक करें ( समारोह ( ) {
$ ( 'इनपुट' ) ।परिवर्तन ( ) ;
} ) ;
} ) ;
लिखी हुई कहानी >
सिर >
उपरोक्त कोड लाइनों में:
-
- विवरण दें ' <स्क्रिप्ट> 'टैग' हेड 'सेक्शन में जिसमें आधिकारिक वेबसाइट से jQuery का सीडीएन पथ शामिल है' ”।
- अगला, jQuery कोड पहले 'से मेल खाता है' दस्तावेज़ लक्षित DOM तत्व का चयन करने के लिए चयनकर्ता और 'को संबद्ध करें' तैयार() ” विधि जो दस्तावेज़ लोड होते ही बताए गए फ़ंक्शन () को लागू करती है।
- उसके बाद, ' बटन 'चयनकर्ता जोड़ा गया है और' के साथ जुड़ा हुआ है क्लिक करें () ” विधि जो बटन क्लिक पर फ़ंक्शन के निष्पादन की अनुमति देगी।
- फ़ंक्शन परिभाषा में, 'लागू करें' परिवर्तन() 'पर' विधि इनपुट ” तत्व जो 'ऑनचेंज' घटना को सक्रिय करता है जब इसका मूल्य बदलता है।
उत्पादन
ट्रिगर 'ऑनचेंज' ईवेंट पर आउटपुट इनपुट फ़ील्ड के परिवर्तित मान के साथ एक अलर्ट बॉक्स प्रदर्शित करता है।
उदाहरण 2: एक इनपुट फ़ील्ड की पृष्ठभूमि का रंग बदलने के लिए 'परिवर्तन ()' विधि को लागू करना
यह विशेष उदाहरण 'के काम की व्याख्या करता है' परिवर्तन() ” मान बदलने पर इनपुट फ़ील्ड की पृष्ठभूमि का रंग बदलने की विधि।
HTML कोड
दिए गए HTML कोड का पालन करें:
< एच 2 > jQuery परिवर्तन ( ) तरीका एच 2 >< पी > इनपुट फ़ील्ड का मान बदलें: पी >
इनपुट क्षेत्र: < इनपुट प्रकार = 'मूलपाठ' कीमत = 'लिनक्स' >> पी >
यहाँ, “ ” तत्व केवल इसके प्रकार और मान को निर्दिष्ट करता है।
jQuery कोड
अब, jQuery कोड पर जाएँ:
< सिर >< लिखी हुई कहानी स्रोत = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' >> लिखी हुई कहानी >
< लिखी हुई कहानी >
$ ( दस्तावेज़ ) ।तैयार ( समारोह ( ) {
$ ( 'इनपुट' ) ।परिवर्तन ( समारोह ( ) {
$ ( यह ) सीएसएस ( 'पृष्ठभूमि का रंग' , 'पीला' ) ;
} ) ;
} ) ;
लिखी हुई कहानी >
सिर >
उपरोक्त कोड लाइनों में, ' परिवर्तन () 'विधि एक' जोड़ती है समारोह() ' जो 'सीएसएस' स्टाइलिंग गुण लागू करता है ' पृष्ठभूमि का रंग 'चयनित HTML तत्व पर, अर्थात्, परिवर्तित इनपुट मान पर' इनपुट '।
उत्पादन
आउटपुट इस बात की पुष्टि करता है कि दिए गए इनपुट फ़ील्ड का मान बदलने पर उसकी पृष्ठभूमि का रंग बदल जाता है।
निष्कर्ष
jQuery प्रदान करता है ' परिवर्तन() ' विधि जो 'परिवर्तन' घटना को सक्रिय करती है जब उपयोगकर्ता इनपुट फ़ील्ड के मान को बदलता है। यह अपनी कार्यात्मकताओं का समर्थन करने के लिए एक अतिरिक्त घटना से भी जुड़ा हो सकता है यह केवल '<इनपुट>', '<चयन>', और '