jQuery के शुरुआती चरण
jQuery के शुरुआती चरण
jQuery के शुरुआती चरण, CoddyKit पर jQuery Academy का एक निःशुल्क पाठ है। यह 1 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह jQuery Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। jQuery Academy पाठ्यक्रम में कुल 1 पाठ शामिल हैं।
परिचय
नमस्कार,
jQuery लाइब्रेरी का उपयोग करने के लिए, हमें सबसे पहले इसे HTML दस्तावेज़ में जोड़ना होगा।
नीचे दिए गए उदाहरण में jQuery लाइब्रेरी का पता head टैग के बीच src एट्रिब्यूट के मान के रूप में जोड़ा गया है।
अब jQuery लाइब्रेरी हमारे प्रोजेक्ट में उपयोग के लिए तैयार है।
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
</head>
<body>
</body>
</html>jQuery से चयन
HTML तत्वों ( जिन्हें अब हम DOM कहेंगे) पर कार्य करने के लिए हमें पहले उस तत्व का चयन करना होगा।
jQuery में चयन करने के लिए $() या jQuery() विधि का उपयोग किया जाता है।
सॉफ़्टवेयर डेवलपर $() विधि का अधिक उपयोग करते हैं।
इस विधि को दिए जाने वाले पैरामीटर से हम तय करते हैं कि किस तत्व का चयन करना है।
Xpath
$ विधि में दिया गया एक्सप्रेशन XPath चयनकर्ता है, जिससे हम CSS के माध्यम से भी परिचित हैं।
दूसरे शब्दों में, हम JQuery में HTML तत्वों का चयन उसी तरह करते हैं जैसे CSS में करते हैं।
Xpath के उदाहरण
मान लीजिए हमारा HTML कोड इस प्रकार है।
<div id="my-box" class="my-box">
<p class="my-p">
<span class="my-text">Hello jQuery</span>
</p>
</div>
आइए jQuery का उपयोग करके HTML तत्वों का चयन करें।
// Dummy $ to demonstrate jQuery selectors in Node.js
function $(selector) {
console.log("Selector:", selector);
return [];
}
// Selects the element with the id of my-box.
$('#my-box')
// Selects the element with the my-box class.
$('.my-box')
// Selects all p elements that are descendants of the element with my-box id
$('#my-box p')
// Select the element with the .my-p class that is the child of the element with my-box class.
$('.my-box > .my-p')jQuery ने हमें अधिक संक्षिप्त कोड लिखने में सक्षम बनाया
यदि हमें Vanilla (साधारण) JavaScript से यही कार्य करना होता, तो हमें कोड की अधिक पंक्तियाँ लिखनी पड़तीं।
jQuery ने अपनी विधियों के माध्यम से हमें अधिक संक्षिप्त कोड लिखने में सक्षम बनाया।
चेतावनी
jQuery केवल एक लाइब्रेरी है और वास्तव में Vanilla JavaScript की तुलना में वेब विकास को आसान बनाती है।
जानकारी
jQuery का एक और लाभ यह है कि हमारे द्वारा लिखा गया कोड सभी आधुनिक ब्राउज़र में समर्थित होता है।
VanillaJS से लिखा गया कुछ कोड कुछ ब्राउज़र में अनपेक्षित प्रभाव डाल सकता है, जबकि jQuery अपने द्वारा प्रदान किए गए अमूर्तीकरण के कारण हर ब्राउज़र में एक जैसा व्यवहार सुनिश्चित करती है।
कोड लिखते समय JQuery हमें ब्राउज़र-विशिष्ट सोच से मुक्त करती है।
$(document).ready
jQuery की मूल बातें सीखने से पहले, आइए $(document).ready विधि के बारे में जानें।
हमें HTML के बारे में याद है कि JavaScript को HTML में head टैग के बीच या body के बीच कहीं भी रखा जा सकता है।
$ (document).ready 2
मान लीजिए हमारे पास नीचे दिए गए जैसा HTML कोड है।
हमारा ब्राउज़र कोड के <!DOCTYPE html> टैग से लेकर </html> के समापन टैग तक उसे समझेगा।
<script src = "https://code.jquery.com/jquery-3.5.1.slim.js"> </script> कथन code.jquery.com के माध्यम से लाइब्रेरी डाउनलोड करना शुरू करेगा।
अगली पंक्ति में jQuery की $ विधि से DOM का चयन किया गया है। हालाँकि, यहाँ एक समस्या है। यदि $ ('# test') विधि के बुलाए जाने तक HTML दस्तावेज़ पूरी तरह लोड नहीं हुआ है, तो हमारा JS कोड विफल हो जाएगा।
ऐसी स्थिति में, दस्तावेज़ के पूरी तरह लोड होने की पुष्टि करने के लिए $(document).ready विधि का उपयोग किया जाता है।
<div id="test">Hello Coddy</div>
<script>
$('#test').text('Hello Coddy')
</script>
$ (document).ready 3
ऊपर दी गई परिभाषा के बाद,
हमें केवल $(document).ready() विधि का उपयोग करना है। यह विधि सभी सामग्री के लोड होने की प्रतीक्षा करेगी और फिर चलेगी।
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div id="test">Hello Coddy</div>
<script>
$(document).ready(function(){
$('#test').text('Hello Coddy')
})
</script>
</body>
</html>प्रश्न
आइए, प्रश्न का उत्तर दीजिए!
बधाई हो
बधाई हो 🎉
इस अनुभाग में हमने jQuery लाइब्रेरी और इसकी $(document).ready() विधि सीखना शुरू किया।
अगले अनुभाग में हम jQuery के चयनकर्ताओं के बारे में सीखेंगे।
एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 22
- पाठ
- 48
अक्सर पूछे जाने वाले प्रश्न
क्या “jQuery के शुरुआती चरण” पाठ निःशुल्क है?
हाँ — jQuery Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “jQuery के शुरुआती चरण” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। jQuery Academy पाठ्यक्रम में कुल 1 पाठ शामिल हैं।
“jQuery के शुरुआती चरण” में मैं क्या सीखूँगा?
jQuery के शुरुआती चरण आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ jQuery Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या jQuery Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर jQuery Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 1 में से 1वाँ पाठ है।
“jQuery के शुरुआती चरण” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस jQuery Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर jQuery Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।