jQuery addClass() मेथड: एक संपूर्ण गाइड

jQuery addClass() कैसे काम करता है

jQuery addClass() मेथड डेवलपर्स को एलिमेंट्स को अधिक वैश्विक तरीके से बदलने का एक तरीका देता है। जैसा कि मेथड के नाम से पता चलता है, हम एक चयनित एलिमेंट में क्लास एट्रिब्यूट जोड़ सकते हैं। हम ऐसा क्यों करना चाहेंगे?

आइए एक ऐसे वेब पेज का उदाहरण लेते हैं जिसमें कुछ मौजूदा एलिमेंट्स हैं जैसे शीर्षक, एक पैराग्राफ, और एक बटन जिसे क्लिक करने पर कुछ होता है। इस पेज के साथ एक स्टाइलशीट है जो इन एलिमेंट्स के क्लास नाम का उपयोग करके उन्हें स्टाइल करती है। बटन क्लिक होने पर, मौजूदा सामग्री की शैली या उपस्थिति बदल सकती है।

हम addClass() मेथड का उपयोग बटन क्लिक होने के बाद मौजूदा सामग्री के लिए एक नया स्टाइल एट्रिब्यूट सम्मिलित करने के लिए कर सकते हैं, जो केवल कोड की एक पंक्ति का उपयोग करके मौजूदा सामग्री की स्टाइलिंग को बदलना संभव बनाता है। ऐसा करने से डेवलपर को एलिमेंट्स को स्टाइल किए गए तरीके से हेरफेर करने के बारे में सोचने की अनुमति मिलती है।

आइए उदाहरण में गहराई से गोता लगाएँ और देखें कि हम इसे कैसे कोड कर सकते हैं।

उदाहरण: addClass() का बुनियादी उपयोग

हमारे उदाहरण में, हम बटन क्लिक होने पर किसी ऑब्जेक्ट के क्लास एट्रिब्यूट को बदल रहे हैं। इस उदाहरण कोड में जाने से पहले, आइए देखते हैं कि addClass() कैसे काम करता है। मान लीजिए हमारे पास यह HTML है:

<head> <meta charset="utf-8"> <title>addClass demo</title> <style> p { margin: 8px; font-size: 16px; } .selected { color: blue; } .highlight { background: yellow; } </style> <script src="https://code.jquery.com/jquery-3.5.0.js"></script> </head> <body> <p>Hello</p> <p>and</p> <p>Goodbye</p>

हम <head> में <style> का उपयोग करके अपने <p> टैग के लिए कुछ बुनियादी स्टाइलिंग शामिल कर रहे हैं। हमने अपने jQuery API लिंक को भी शामिल किया है। <body> में, हमारे पास "Hello," "and," "Goodbye," शब्द हैं, जो तीन अलग-अलग <p> टैग्स में लिपटे हुए हैं। addClass() कैसे काम करता है यह देखने के लिए, आइए वापस <style> पर चलते हैं।

<style> के अंदर दो क्लासेस हैं। एक है "selected," जो रंग एट्रिब्यूट को नीले रंग में रेंडर करता है। दूसरी क्लास है "highlight." यह क्लास बैकग्राउंड एट्रिब्यूट को पीले रंग के रूप में रेंडर करती है। अभी, हम देख सकते हैं कि इनमें से कोई भी स्टाइल रेंडर नहीं हो रही है:

स्टाइल्स रेंडर नहीं हो रही हैं क्योंकि हमारे <p> टैग्स से कोई क्लास जुड़ी नहीं है। मैन्युअली <p> में क्लास लिखने के बजाय, हम addClass() का उपयोग करके किसी भी या सभी <p> एलिमेंट पर कोई भी या सभी क्लास एट्रिब्यूट्स सम्मिलित कर सकते हैं।

<script> $(document).ready(() => { $('p').addClass('selected') }) </script>

यहां, हम बस सभी <p> एलिमेंट्स को चुन रहे हैं और उनमें 'selected' का एक क्लास एट्रिब्यूट जोड़ रहे हैं। हम उम्मीद करते हैं कि हमारे <p> एलिमेंट्स के सभी उदाहरण अब नीले रंग में रेंडर होंगे।

बिल्कुल जैसा हमने उम्मीद की थी! jQuery addClass() मेथड एक सिंगल आर्गुमेंट के रूप में एक से अधिक क्लास एट्रिब्यूट स्वीकार करने में सक्षम है। उदाहरण के लिए:

<script> $(document).ready(() => { $('p').addClass('selected highlight') }) </script>

एक ही पैरेंथेसिस में दोनों क्लासेस को शामिल करने के सिंटैक्स पर ध्यान दें। यह हमारे <p> एलिमेंट्स को नीले रंग में और पीले रंग के बैकग्राउंड के साथ रेंडर करता है।

अब जब हमने देख लिया है कि addClass() एलिमेंट्स में क्लास एट्रिब्यूट्स कैसे जोड़ सकता है, आइए बटन के साथ अपने मूल उदाहरण पर वापस चलते हैं।

jQuery addClass() का उपयोग करना

यहां हमने अपने पहले उदाहरण में एक बटन जोड़ा है:

<head> <meta charset="utf-8"> <title>addClass demo</title> <style> p { margin: 8px; font-size: 16px; } .selected { color: blue; } .highlight { background: yellow; } </style> <script src="https://code.jquery.com/jquery-3.5.0.js"></script> </head> <body> <p> <strong>jQuery addClass Example</strong> </p> <p>Hello</p> <p>and</p> <p>Goodbye</p> <button> Click to add class </button>

उपरोक्त कोड अब एक बटन रेंडर करता है, लेकिन यह अभी कुछ नहीं करता। पिछले उदाहरण में, हमने सभी <p> टैग्स को एक ही समय में बदल दिया था। अब आइए बटन क्लिक होने पर केवल एक एलिमेंट को बदलते हैं। हम jQuery click() मेथड को शामिल करके ऐसा कर सकते हैं।

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

आइए इसे एक्शन में देखते हैं!

<script> $('button').click(() => { $('p').last().addClass('selected') }) </script>

कॉलबैक फंक्शन में, हम <p> एलिमेंट्स को चुन रहे हैं और <p> के अंतिम उदाहरण को खोजने के लिए last() कॉल कर रहे हैं। यहां से, हम 'selected' का क्लास एट्रिब्यूट जोड़ते हैं। हम उम्मीद करते हैं कि अंतिम <p> एलिमेंट जो "Goodbye" शब्द को संदर्भित करता है, बटन क्लिक होने पर नीले रंग में बदल जाएगा।

आइए बटन पर क्लिक करें और पता लगाएं।

बिल्कुल वही जो हम देखने की उम्मीद कर रहे थे! हमने देखा है कि jQuery addClass() का उपयोग आमतौर पर पेज लोड होते ही सभी <p> एलिमेंट्स को स्टाइल्ड क्लासेस में बदलने के माध्यम से कैसे किया जा सकता है। हमने यह भी देखा है कि addClass() का उपयोग click() जैसे अन्य jQuery मेथड्स के साथ कैसे किया जा सकता है ताकि चयनित बटन क्लिक होने पर विशेष रूप से एक <p> एलिमेंट के क्लास एट्रिब्यूट्स को बदला जा सके।

निष्कर्ष

आज, हमने सीखा कि jQuery addClass() क्या है और यह कैसे काम करता है। हमने यह भी सीखा कि addClass() स्कोप में अत्यधिक लचीला है और एक साथ कई क्लास एट्रिब्यूट्स को बदल सकता है। उपरोक्त उदाहरण jQuery addClass() के संभावित उपयोगों के बुनियादी उदाहरण हैं। आगे बढ़ने के लिए, अपने दम पर प्रयोग करें और जांचें कि addClass() आपके वेब ऐप के लिए कैसे उपयोगी है।