jQuery:एक संक्षिप्त परिचय
jQuery एक जावास्क्रिप्ट लाइब्रेरी है जो डेवलपर्स को कोड की कुछ पंक्तियों के साथ DOM में हेरफेर करने, ईवेंट हैंडलर, एनिमेशन और AJAX अनुरोध लिखने की अनुमति देता है। यह jQuery एपीआई के लिए अद्वितीय चयनकर्ताओं और विधियों के साथ संभव है। इनमें से एक तरीका है append() .
jQuery एपेंड () क्या है?
append() विधि "सामग्री" (जो एक HTML स्ट्रिंग, टेक्स्ट, एक सरणी, एक तत्व, या अधिक jQuery हो सकती है) के एक या एकाधिक तर्क लेने में सक्षम है, और इसे किसी भी या सभी तत्वों के अंत में संलग्न या "संलग्न" कर सकती है चयनकर्ता। कुछ सामान्य उपयोगों में सूची के अंत में एक आइटम जोड़ना शामिल है (जैसे कि एक टू डू लिस्ट में एक नया "टू डू" आइटम), या एक बटन के क्लिक पर नई सामग्री प्रदर्शित करना। अब एक नज़र डालते हैं कि append() . कैसे कुछ उदाहरण कोड के साथ काम करता है।
jQuery के एपेंड का उपयोग कैसे करें ()
एक टू डू लिस्ट में आइटम डालने का उपरोक्त उदाहरण लेते हुए, हम देखेंगे कि कैसे append() एक चयनकर्ता पर बुलाया जाता है और सभी मिलान करने वाले चयनों में सामग्री सम्मिलित करता है।
हमारे HTML से शुरू करते हुए जो एक बुनियादी टू डू लिस्ट बनाता है:
टू डू लिस्ट
- अध्याय 1 और 2 पढ़ें
- शाम 3:00 बजे बैठक
- कल के पढ़ने के बारे में लिखें
<script> . के अंदर jQuery API में एक पता शामिल करना नोट करना महत्वपूर्ण है <head> . में टैग करें एचटीएमएल पेज के। अन्यथा, हम अपने HTML पृष्ठ में jQuery का उपयोग नहीं कर सकते।
अब, हमारी टू-डू सूची खूबसूरती से प्रस्तुत करती है!
आज हम उत्पादक महसूस कर रहे हैं, तो चलिए सूची के अंत में एक आइटम जोड़ते हैं। रात के खाने की योजना के बारे में क्या?
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
हमारे HTML लेआउट को संदर्भित करते हुए, हम आदेशित सूची देखते हैं (<ol> ) का एक वर्ग है list1 . यह बहुत अच्छी खबर है क्योंकि हम एक और <script> . जोड़कर उस पूरे चयन का चयन कर सकते हैं
<script> . के अंदर टैग, हमारे पास कुछ $ प्रतीक हैं। यह क्या हैं? ये शक्तिशाली jQuery चयनकर्ता हैं।
हम कुछ नाम रखने के लिए किसी तत्व, वर्ग नाम, या आईडी नाम में पास करके अपने डोम में कुछ भी चुन सकते हैं। इस मामले में, हमने list1, . के वर्ग के साथ कुछ भी चुना है जो संपूर्ण <ol> . का चयन करेगा तत्व। उपरोक्त (document) चयनकर्ता पूरे पृष्ठ का चयन करता है और ready() . को कॉल करता है पृष्ठ पूरी तरह से लोड होने तक कोड की अगली पंक्ति को कॉल करने के लिए प्रतीक्षा करने की विधि। यह हमारे कोड को क्रमिक रूप से चालू रखने में मदद करता है।
अब, हमारे ready() . के अंदर कॉलबैक फ़ंक्शन, हमने list1. . के वर्ग के साथ सभी तत्वों का चयन किया है इस मामले में, यह हमारे <ol> . का चयन करेगा और <li> डालें append() . को पास किया गया हमारे समापन के ठीक ऊपर </ol> . इसलिए, हमारा पेज लोड होने के बाद, Make dinner plans सूची आइटम को हमारी टू डू लिस्ट में जोड़ दिया जाएगा:
शानदार! आइए अब एक और उदाहरण देखें। एक बार बटन क्लिक करने के बाद इस बार अधिक सामग्री प्रदर्शित करते हैं।
jQuery एपेंड ():एक वास्तविक दुनिया का उदाहरण
मान लीजिए हमारे पास हमारे वेब पेज पर एक बटन है और जब हम बटन पर क्लिक करते हैं तो हम नई सामग्री प्रदर्शित करना चाहते हैं। यह हमारे उपयोगकर्ताओं के लिए कुशल और अधिक संतुष्टिदायक होगा यदि हम नई सामग्री को बिना पेज रिफ्रेश या रीडायरेक्ट के प्रदर्शित करते हैं।
यहां jQuery . की शक्ति और सुंदरता निहित है :जब बटन क्लिक किया जाता है तो हम बिना रिफ्रेश या रीडायरेक्ट के नई सामग्री प्रदर्शित कर सकते हैं।
इस आधार को देखते हुए HTML:
नमस्ते दुनिया!
हमारे पास एक बटन होने के अलावा हमने अपनी टू डू लिस्ट कैसे शुरू की, इसके समान ही:
"हैलो वर्ल्ड!" के तहत अधिक सामग्री जोड़ने के लिए हमने jQuery के बारे में जो सीखा है उसका उपयोग करें। एक बार बटन क्लिक करने के बाद।
एक बार फिर, हमने अपने
के अंत में एक
जो इस प्रकार प्रदर्शित होता है:
निष्कर्ष
संक्षेप में, हमने देखा है कि कैसे append() विधि स्वयं और कॉलबैक फ़ंक्शंस की एक श्रृंखला के संदर्भ में काम करती है।
बस एक <script> . के अंदर jQuery के चयनकर्ताओं और विधियों को शामिल करके टैग, हम अपने jQuery चयनकर्ता से मेल खाने वाले किसी भी तत्व के अंत में विभिन्न प्रकार की सामग्री को जोड़ने में सक्षम हैं। append() विधि किसी पुनर्निर्देशित या ताज़ा किए बिना विशिष्ट समय पर उपयोगकर्ता को सामग्री प्रदर्शित करने की संभावनाओं की दुनिया खोलती है।