JQuery के लिए एक शुरुआती मार्गदर्शिका चालू ()

JQuery on() विधि किसी तत्व पर ईवेंट हैंडलर संलग्न करने का एक तरीका है। चयनकर्ता को दिया गया तत्व पृष्ठ पर कुछ भी हो सकता है। आमतौर पर, on() एक बटन पर क्लिक हैंडलर संलग्न करने का एक तरीका है। व्यवहार में, on() किसी भी ईवेंट हैंडलर को किसी भी चयनित तत्व से जोड़ सकता है।

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

jQuery क्या है ()

JQuery 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 बटन और एक

प्रस्तुत कर रहे हैं जहां हम नई सामग्री जोड़ेंगे।

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

<div class="message">

</div>

यह अभी के लिए सिर्फ बटन प्रस्तुत करेगा।

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

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

हमारे बटन को उसके वर्ग के नाम से चुना जाता है और एक क्लिक ईवेंट हैंडलर पास किया जाता है। हमारे कॉलबैक फ़ंक्शन में, हम अपने

में "message" के वर्ग नाम के साथ एक संदेश जोड़ रहे हैं।

हमारा on() विधि काम करती है! JQuery का उपयोग करने के बारे में ध्यान देने योग्य एक बात append() यहाँ यह है कि हर बार बटन क्लिक करने पर हमारा संदेश हमारे

के नीचे संलग्न हो जाएगा। आइए एक अलग उदाहरण देखें।

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

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

यहां, हमने अपने बटन को

में लपेटा है। यह हमें jQuery html() . का उपयोग करने की अनुमति देगा और बटन को टेक्स्ट वाले

टैग से बदलें। कभी-कभी हम चाहते हैं कि उपयोगकर्ता केवल एक बार एक बटन क्लिक करें और नई सामग्री पर निर्देशित हों!

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

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

एक बार बटन क्लिक करने के बाद:

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

निष्कर्ष

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

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