jQuery: एक संक्षिप्त परिचय
jQuery एक JavaScript लाइब्रेरी है जो डेवलपर्स को DOM में हेरफेर करने, इवेंट हैंडलर लिखने, एनिमेशन बनाने और AJAX अनुरोध करने में सक्षम बनाती है - वो भी कोड की कुछ ही पंक्तियों में। यह jQuery API के लिए विशिष्ट सिलेक्टर्स और मेथड्स के माध्यम से संभव होता है। इन्हीं मेथड्स में से एक है append()।
jQuery append() क्या है?
append() मेथड एक या एक से अधिक "कंटेंट" आर्गुमेंट्स लेता है (जो HTML स्ट्रिंग, टेक्स्ट, ऐरे, एलिमेंट, या अधिक jQuery ऑब्जेक्ट्स हो सकते हैं), और उन्हें सिलेक्टर से मेल खाने वाले किसी भी या सभी एलिमेंट्स के अंत में जोड़ता या "अपेंड" करता है। कुछ सामान्य उपयोगों में एक सूची के अंत में आइटम जोड़ना (जैसे टू-डू सूची में एक नया "टू-डू" आइटम), या बटन क्लिक पर नई सामग्री प्रदर्शित करना शामिल है। आइए अब कुछ उदाहरण कोड के साथ देखते हैं कि append() कैसे काम करता है।
jQuery append() का उपयोग कैसे करें
उपरोक्त टू-डू सूची में आइटम डालने के उदाहरण को लेते हुए, हम देखेंगे कि कैसे append() को एक सिलेक्टर पर कॉल किया जाता है और यह सामग्री को सभी मेल खाने वाले चयनों में सम्मिलित करता है।
हमारे HTML से शुरू करते हैं जो एक बुनियादी टू-डू सूची बनाता है:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h2>To Do List</h2> <ol class="list1"> <li>Read Chapters 1 & 2 </li> <li>Meeting at 3:00pm</li> <li>Write about yesterday's reading</li> </ol> </body> </html>
HTML पेज के <head> में <script> टैग के अंदर jQuery API का एड्रेस शामिल करना महत्वपूर्ण है। अन्यथा, हम अपने HTML पेज में jQuery का उपयोग नहीं कर पाएंगे।
अब, हमारी टू-डू सूची खूबसूरती से रेंडर होती है!
हम आज उत्पादक महसूस कर रहे हैं, तो चलिए सूची के अंत में एक आइटम जोड़ते हैं। डिनर प्लान्स के बारे में क्या ख्याल है?
हमारे HTML लेआउट को देखते हुए, हम देखते हैं कि ऑर्डर्ड लिस्ट (<ol>) का क्लास list1 है। यह अच्छी खबर है क्योंकि हम <body> के नीचे एक और <script> टैग जोड़कर उस पूरे चयन को चुन सकते हैं:
<script> $(document).ready( () => { $(".list1").append("<li>Make dinner plans</li>") }) </script>
<script> टैग के अंदर, हमारे पास कुछ $ सिंबल हैं। ये क्या हैं? ये शक्तिशाली jQuery सिलेक्टर्स हैं।
हम अपने DOM में किसी भी चीज़ को एलिमेंट, क्लास नाम, या आईडी नाम पास करके चुन सकते हैं। इस मामले में, हमने list1 क्लास वाली किसी भी चीज़ को चुना है, जो पूरे <ol> एलिमेंट को चुनेगा। उपरोक्त (document) सिलेक्टर पूरे पेज को चुनता है और अगली कोड लाइन को तब तक कॉल करने के लिए इंतजार करता है जब तक पेज पूरी तरह से लोड न हो जाए, इसके लिए ready() मेथड को कॉल करता है। यह हमारे कोड को क्रमिक रूप से चलाने में मदद करता है।
अब, हमारे ready() कॉलबैक फंक्शन के अंदर, हमने list1 क्लास वाले सभी एलिमेंट्स को चुना है। इस मामले में, यह हमारे <ol> को चुनेगा और append() को पास किए गए <li> को हमारे क्लोजिंग </ol> के ठीक ऊपर सम्मिलित करेगा। इसलिए, हमारे पेज लोड होने के बाद, Make dinner plans लिस्ट आइटम हमारी टू-डू सूची में अपेंड हो जाएगा:
बहुत बढ़िया! अब आइए एक और उदाहरण देखते हैं। इस बार बटन क्लिक होने पर अधिक सामग्री प्रदर्शित करते हैं।
jQuery append(): एक वास्तविक दुनिया का उदाहरण
मान लीजिए हमारे वेब पेज पर एक बटन है और हम चाहते हैं कि बटन क्लिक होने पर नई सामग्री प्रदर्शित हो। यदि हम पेज रिफ्रेश या रीडायरेक्ट के बिना नई सामग्री प्रदर्शित करते हैं तो यह हमारे उपयोगकर्ताओं के लिए कुशल और अधिक संतोषजनक होगा।
यहीं jQuery की शक्ति और सुंदरता निहित है: हम बटन क्लिक होने पर पेज रिफ्रेश या रीडायरेक्ट के बिना नई सामग्री प्रदर्शित कर सकते हैं।
इस बेस HTML को देखते हुए:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div class="content"> <p>Hello World!</p> </div> <button id="btn-main">Click Me!</button> </body> </html>
यह हमारी टू-डू सूची के उदाहरण से काफी मिलता-जुलता है, सिवाय इसके कि हमारे पास एक बटन है:
आइए जो हमने jQuery के बारे में सीखा है उसका उपयोग करके "Hello World!" के नीचे बटन क्लिक होने पर अधिक सामग्री अपेंड करते हैं।
<script> $(document).ready( () => { $("#main-btn").click( () => { $("p").append("<b>Goodbye</b>") }) }) </script>
एक बार फिर, हमने अपने <body> के अंत में एक <script> टैग शामिल किया है। हमारी टू-डू सूची के उदाहरण की तरह, हम कुछ और करने से पहले डॉक्यूमेंट के लोड होने का इंतजार कर रहे हैं।
एक बार डॉक्यूमेंट लोड हो जाने पर, हम बटन पर क्लिक करके अपने बटन पर click() मेथड को कॉल कर सकते हैं। अब हमारा <p> टैग चुना गया है और हम append() मेथड को HTML स्ट्रिंग ” <b>Goodbye</b>." के आर्गुमेंट कंटेंट के साथ कॉल करते हैं। यह शब्द Goodbye को बोल्ड में <p> टैग के अंत में सम्मिलित करेगा।
हमारा अंतिम आउटपुट इस तरह दिखेगा:
<div class="content"> <p>Hello World.</p><b>Goodbye</b>. </div> <button id="btn-main">Click Me</button>
और स्क्रीन पर इस तरह:
या यदि हम Goodbye को <div> के अंत में अपेंड करना चाहते हैं, तो हम बस <p> सिलेक्टर को content क्लास में बदल देते हैं:
<script> $(document).ready( () => { $("#main-btn").click( () => { $(".content").append("<b>Goodbye</b>") }) }) </script>
जो इस तरह प्रदर्शित होता है:
निष्कर्ष
सारांश में, हमने देखा है कि append() मेथड अपने आप में और कॉलबैक फंक्शंस की एक श्रृंखला के संदर्भ में कैसे काम करता है।
बस jQuery सिलेक्टर्स और मेथड्स को <script> टैग के अंदर शामिल करके, हम अपने jQuery सिलेक्टर से मेल खाने वाले किसी भी एलिमेंट के अंत में विभिन्न प्रकार की सामग्री को अपेंड करने में सक्षम होते हैं। append() मेथड रीडायरेक्ट या रीफ्रेश के बिना विशिष्ट समय पर उपयोगकर्ता को सामग्री प्रदर्शित करने की संभावनाओं की दुनिया खोलता है।
