jQuery on() के लिए एक शुरुआती गाइड

jQuery on() मेथड किसी एलिमेंट पर इवेंट हैंडलर अटैच करने का एक तरीका है। सेलेक्टर को पास किया गया एलिमेंट पेज पर कुछ भी हो सकता है। सबसे आमतौर पर, on() बटन पर क्लिक हैंडलर अटैच करने का एक तरीका है। व्यवहार में, on() किसी भी चयनित एलिमेंट पर कोई भी इवेंट हैंडलर अटैच कर सकता है।

इस गाइड में, हम on() के लिए बेसिक सिंटैक्स को कवर करेंगे और कुछ व्यावहारिक उदाहरणों को एक्शन में देखेंगे। यह उल्लेख करना महत्वपूर्ण है कि jQuery on() वैकल्पिक आर्गुमेंट्स स्वीकार करता है जिन्हें यहां कवर नहीं किया जाएगा। हम आवश्यक आर्गुमेंट्स और सामान्य उपयोग पर टिके रहेंगे। वैकल्पिक आर्गुमेंट्स के बारे में अधिक यहां पाया जा सकता है।

jQuery on() क्या है

jQuery on() मेथड चयनित एलिमेंट पर इवेंट हैंडलर अटैच करने का एक स्थिर तरीका प्रदान करता है। एक बार हैंडलर नामित हो जाने पर, on() एक कॉलबैक फंक्शन लेता है। कॉलबैक फंक्शन एक ऐसा फंक्शन है जिसे मेथड में पास किया जाता है जो बाद में निष्पादित होता है। हमारे उद्देश्यों के लिए, कॉलबैक फंक्शन वह जगह है जहां कुछ होगा।

मान लें कि हमने बटन पर क्लिक इवेंट हैंडलर अटैच करने के लिए on() का उपयोग किया। हमारा कॉलबैक फंक्शन वह जगह है जहां हम परिभाषित करेंगे कि बटन क्लिक होने के बाद क्या एक्शन होगा।

on() jQuery सिंटैक्स

अब जब हमारे पास इस बात का अंदाजा है कि on() कैसे काम करता है, तो आइए इसके विशिष्ट सिंटैक्स को देखें। याद रखें सभी jQuery में, हम अपने एलिमेंट का चयन करके शुरू करते हैं। फिर हम अपना इवेंट हैंडलर अटैच करने के लिए on() मेथड को कॉल करते हैं। on() को पास किया गया पहला आर्गुमेंट इवेंट हैंडलर नाम ही है, और इसके बाद कॉलबैक फंक्शन आता है।

$('.btn').on('click', function() { alert("You clicked the button!") })

यहां, हम अपना बटन चुन रहे हैं, on() कॉल कर रहे हैं, और अपने आवश्यक आर्गुमेंट्स पास कर रहे हैं। ध्यान दें कि इवेंट हैंडलर नाम उद्धरण चिह्नों में होना चाहिए। हमारे कॉलबैक फंक्शन में, हम एक संदेश के साथ अलर्ट प्रदर्शित कर रहे हैं। यह हमें बताता है कि कॉलबैक फंक्शन ठीक से काम कर रहा है।

jQuery alert() के बारे में अधिक यहां पाया जा सकता है।

jQuery on() उदाहरण

आइए हमारे उपरोक्त बटन उदाहरण पर विस्तार करें। अब हम जानते हैं कि jQuery on() के लिए बेसिक सिंटैक्स कैसे काम करता है। हमारे उदाहरण के लिए, आइए बटन क्लिक होने के बाद अलर्ट संदेश प्रदर्शित करने से कुछ अधिक करें।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी टेक जॉब संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही बूटकैंप से मैच करवाएं।

औसत बूटकैंप ग्रेजुएट ने करियर ट्रांजिशन में छह महीने से कम समय बिताया, बूटकैंप शुरू करने से लेकर पहली नौकरी ढूंढने तक।

अलर्ट संदेश के बजाय, हम बटन क्लिक होने के बाद नई सामग्री प्रदर्शित कर सकते हैं। ऐसा करने के लिए, हम अपने कॉलबैक फंक्शन के अंदर jQuery append() मेथड का उपयोग करेंगे। jQuery append() आर्गुमेंट के रूप में पास की गई सामग्री को चयनित एलिमेंट के अंत में अटैच करता है। jQuery append() के बारे में यहां और पढ़ें।

शुरू करने के लिए, हम एक HTML बटन और एक <div> रेंडर कर रहे हैं जहां हम नई सामग्री जोड़ेंगे।

<button class="btn"> Click me! </button> <div class="message"> </div>

यह अभी के लिए केवल बटन रेंडर करेगा।

वहां हमारा बटन है जो क्लिक होना चाहता है! अब, हम इसे jQuery से चुनते हैं और क्लिक होने के बाद एक संदेश प्रदर्शित करते हैं।

$('.btn').on('click', function() { $('.message').append('The button has been clicked.') })

हमारा बटन इसके क्लास नाम द्वारा चुना गया है और इसे क्लिक इवेंट हैंडलर पास किया गया है। हमारे कॉलबैक फंक्शन में, हम "message" क्लास नाम वाले <div> में एक संदेश जोड़ रहे हैं।

हमारा on() मेथड काम करता है! यहां jQuery append() का उपयोग करने के बारे में एक बात ध्यान देने योग्य है कि हमारा संदेश हर बार बटन क्लिक होने पर हमारे <div> के नीचे जुड़ जाएगा। आइए एक अलग उदाहरण देखते हैं।

हमारे अगले उदाहरण में, हम बटन को क्लिक होने के बाद नई सामग्री से बदल देंगे। यह अधिक नियंत्रित यूजर अनुभव की नकल करेगा।

<div> <button class="btn"> Click me! </button> </div>

यहां, हमने अपने बटन को <div> में लपेटा है। यह हमें jQuery html() का उपयोग करने और बटन को टेक्स्ट वाले <p> टैग से बदलने की अनुमति देगा। कभी-कभी हम केवल चाहते हैं कि यूजर्स एक बार बटन क्लिक करें और नई सामग्री पर निर्देशित हों!

$('.btn').on('click', function() { $('div').html('<p>The button has been replaced</p>') })

हमारे पिछले उदाहरण के समान फैशन में, हम बटन का चयन कर रहे हैं और क्लिक हैंडलर अटैच करने के लिए on() का उपयोग कर रहे हैं। हमारे कॉलबैक फंक्शन के अंदर, हम बटन HTML को नई HTML सामग्री वाले पैराग्राफ एलिमेंट से बदल रहे हैं।

बटन क्लिक होने पर:

हमारे पास नई सामग्री है और कोई बटन नहीं! यह यूजर अनुभव को अधिक नियंत्रित तरीके से निर्देशित करने का एक मजबूत तरीका है।

निष्कर्ष

हमने देखा है कि jQuery on() मजबूत कोड की कुछ लाइनों में किसी एलिमेंट पर इवेंट हैंडलर कैसे अटैच कर सकता है। बेसिक सिंटैक्स सीखने के बाद, हमने jQuery on() के उपयोग के दो उदाहरण देखे। यह विशिष्ट तरीके से या अधिक सामान्य तरीके से उपयोग करने के लिए पर्याप्त लचीला है, वांछित परिणाम के आधार पर।

चूंकि यह गाइड jQuery on() के उपयोग का परिचय रहा है, इसलिए कुछ समय अभ्यास करने में बिताएं। इवेंट हैंडलर मास्टरी की ओर बढ़ते हुए खोजे जाने के लिए कई उपयोग हैं!