इस आर्टिकल JQuery Tutorial in Hindi में हम आपको JQuery के बारे में सारी जानकारी देंगे।
JQuery Tutorial in Hindi की इस exclusive guide में आप सीखेंगे – JQuery क्या है? JQuery को क्यों use किया जाता है? JQuery की advantages? इसके features? इसके Examples आदि।
यह tutorial मुखयतः beginners के लिए हैं मगर experienced भी इस आर्टिकल में अपने Jquery स्किल्स को दोहरा सकतें हैं।
ऐसे ही और Hindi Tutorials आप हमारी वेबसाइट में पढ़ सकतें हैं।
चलिए शुरू करते हैं :
What is JQuery in Hindi?
JQuery एक बहुत ही lightweight(लाइटवेट) लाइब्रेरी है। यह JavaScript की library है।
इसके code का syntax बहुत ही छोटा होता है इसीलिए इसे “Write less, do more” लाइब्रेरी कहा जाता है। जिसका मतलब यह है कि इसमें हमें कोड कम ही लिखना पड़ता है और काम ज्यादा हो जाता है।
यह एक बहुत ही small और fast JS library होती है।
JQuery का use करके हम किसी भी JavaScript code को अपने वेब पेज में आसानी से इस्तेमाल कर सकतें हैं।
JQuery में JavaScript का वो कोड जो की मुख्यतः इस्तेमाल होता है , उसे कोड को methods में डाल दिया गया है जिससे हमें जटिल task करने के लिए भी simple JQuery methods को ही कॉल करना होगा और पीछे JavaScript का सारा code चल जाएगा।
इस JQuery tutorial in Hindi में हम कुछ सबसे ज्यादा इस्तेमाल होने वाले JQuery के methods को भी सीखेंगे।
JQuery का मुख्य कार्य JavaScript को आसान बनाना है यह इसकी जटिल functionalities को सरल बनाता है।
JQuery एक –
- small और lightweight लाइब्रेरी है।
- इसमें “write less, do more” फीचर है।
- यह JavaScript को सरल बनाती है।
JQuery की History
JQuery को सबसे पहले 2006 जनवरी में रिलीज़ किया गया था।
इसे John Resig ने develop और release किया था।
JQuery के कई versions अब तक रिलीज़ हो चुकें हैं। नीचे दी हुई लिस्ट में JQuery के सभी release हुए versions की लिस्ट है –
JQuery Version List
| Version | Date |
|---|---|
| 1 | August 26, 2006 |
| 1.1 | January 14, 2007 |
| 1.2 | September 10, 2007 |
| 1.3 | January 14, 2009 |
| 1.4 | January 14, 2010 |
| 1.5 | January 31, 2011 |
| 1.6 | May 3, 2011 |
| 1.7 | November 3, 2011 |
| 1.8 | August 9, 2012 |
| 1.9 | January 15, 2013 |
| 1.1 | May 24, 2013 |
| 1.11 | January 24, 2014 |
| 1.12 | January 8, 2016 |
| 2 | April 18, 2013 |
| 2.1 | January 24, 2014 |
| 2.2 | January 8, 2016 |
| 3 | June 9, 2016[31] |
| 3.1 | July 7, 2016 |
| 3.2 | March 16, 2017[32] |
| 3.3 | January 19, 2018[33] |
| 3.4 | April 10, 2019[35] |
| 3.5 | April 10, 2020[1] |
JQuery के Advantages क्या हैं?
JQuery के बहुत सारे advantages हैं। इस छोटी लाइब्रेरी के बहुत सारे लाभ हैं जो निम्नलिखित हैं :
1) Simple / आसान — JQuery को सीखना और इस्तेमाल करना बहुत ही आसान है। जिसे simple HTML, CSS और JavaScript की जानकारी हो वह इस लाइब्रेरी को आसानी से use कर सकता है।
2) Free — JQuery एकदम फ्री है इसे आप free में डाउनलोड और इस्तेमाल कर सकतें हैं।
3) JavaScript को Simplify करती है — JQuery का सबसे बड़ा लाभ यह है कि यह JavaScript को आसान बनाता है। यह JS के जटिल कार्यों को आसान बनाता है।
4) समय की बचत / saves time — JQuery यूज़ करने से समय की बहुत बचत होती है क्यूंकि इसमें कोड बहुत कम लिखना पड़ता है।
अब इस JQuery tutorial in Hindi में हम इस सरल और lightweight लाइब्रेरी के फीचर्स सीखेंगे।
JQuery के Features क्या हैं?
JQuery के बहुत सारे features हैं और यही features JQuery को एक बहुत ही लोकप्रिय JavaScript लाइब्रेरी बनाते हैं।
JQuery के निम्नलिखित features हैं :
- इसमें DOM manipulation कर सकतें हैं।
- आसानी से HTML manipulation हो सकता है।
- CSS manipulation भी आसान है।
- AJAX को सपोर्ट करता है।
- DOM element selection / डॉम एलिमेंट सिलेक्शन
- JSON Parsing / JSON पार्सिंग हो सकती है।
- Effects and Animations के लिए use कर सकतें हैं।
- HTML event methods सपोर्टेड हैं।
- Extensibility through plug-ins / JQuery को प्लगइन के रूप में भी इस्तेमाल कर सकतें हैं।
- Utilities
JQuery को क्यों use करते हैं?
JQuery एक JavaScript की ही लाइब्रेरी है इसलिए लोग यह सवाल पूछते हैं कि जब हमारे पास JavaScript है तो JQuery की क्या जरूरत है?
JQuery से हम वही काम करते हैं जो JavaScript और Ajax आदि से किया जा सकता है।
JQuery के कई ऐसे फीचर्स हैं जो इसे जावास्क्रिप्ट से अलग बनाते हैं इसे कई विशिष्ट कार्यों के लिए उपयोग कर सकतें हैं।
- JQuery किसी भी application की performance को अच्छा करती हैं।
- इसका use करके हम ऐसी एप्लीकेशन बना सकतें हैं जो ब्राउज़र कम्पेटिबल हों।
- यह ब्राउज़र के नए फीचर्स को इस्तेमाल करता है।
- इससे हम कम समय में बड़े एप्लीकेशन बना सकतें हैं।
JQuery एक बहुत ही लोकप्रिय जावास्क्रिप्ट की लाइब्रेरी है इसीलिये इसे कई popular कंपनी इस्तेमाल करती हैं जिनमे से Microsoft, Google, Netflix मुख्य हैं।
JQuery के साथ हम क्या-क्या कर सकतें हैं?
हम JQuery tutorial in Hindi में अब उन विशिष्ट tasks(कार्यों) को देखेंगे जो हम JQuery के द्वारा कर सकतें हैं।
निम्नलिखित Tasks JQuery के साथ हम कर सकतें हैं :
1) JQuery से हम DOM elements आदि को आसानी से manipulate(बदलना) कर सकतें हैं।
2) किसी भी element को असानी से select किया जा सकता है।
3) हम किसी भी HTML एलिमेंट की dimensions को बदल सकतें हैं।
4) हम JQuery में AJAX को बहुत आसानी से implement कर सकतें हैं।
5) बहुत कम code के साथ हम complex(जटिल) CSS लिख सकतें हैं।
6) इसमें effects और animations आसानी से लगा सकतें हैं।
यह तो सिर्फ कुछ मुख्य tasks हैं, JQuery से आप और भी बहुत कुछ कार्य कर सकतें हैं।
JQuery को डाउनलोड और use कैसे करें?
JQuery को use करने के लिए आपके पास इसकी library होनी चाइये जो बिलकुल Free है।
इसे आप दो तरीको से ले सकतें हैं या तो आप इसकी एक कॉपी अपने सिस्टम पर डाउनलोड करके रख सकतें हैं या आप CDN का इस्तेमाल सकतें हैं।
JQuery एक JavaScript की लाइब्रेरी है तो इसे भी आपको <Script> tag के अंदर लिखना होता है या आप .js एक्सटेंशन वाली फाइल में भी JQuery का कोड लिख सकतें हैं।
Download JQuery
JQuery को इसकी official वेबसाइट से डाउनलोड किया जा सकता है।
JQuery के दो version होते हैं एक तो इसका original version होता है जो की uncompressed होता है।
दूसरा compressed version होता है जिसका size कम होता है मगर यह भी same ही काम करता है।
आपको compressed version ही इस्तेमाल करना चाइये क्यूंकि यह साइज में छोटा होता है तो यह परफॉरमेंस पर असर नहीं डालता।
JQuery को आप डाउनलोड कर सकतें हैं – https://jquery.com/download/.
आपको एक .js फाइल डाउनलोड हो जायेगी जिसे आपको आपके फाइल में import करना होगा। जैसा की नीचे दिया गया है –
<script src="jquery/jquery-3.5.1.min.js"></script>
आने जहाँ भी सिस्टम में आपकी JQuery फाइल को सेव किया है वहीं का path दीजियेगा।
JQuery CDN
अगर आप JQuery को डाउनलोड नहीं करना चाहते तो CDN का भी इस्तेमाल कर सकतें हैं।
CDN एक Content Delivery Network होता है जो हमें कंटेंट प्रोवाइड करता है।
CDN का use करके हम अपनी application की परफॉरमेंस को और बढ़ा सकतें हैं।
JQuery के CDN को इस्तेमाल करने के लिए आप नीचे वाले कोड को अपनी फाइल में डाल दें।
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>JQuery Tutorial in Hindi Common Examples
JQuery Tutorial in Hindi के इस सेक्शन में हम इसके कुछ मुख्य और सबसे ज्यादा use होने वाले examples देखेंगे।
आपको अगर कोई और Example भी चाइये तो आप नीचे कमेंट बॉक्स में बता सकतें हैं।
इस example में हम एक simple web page बना रहे हैं जिसमे हम JQuery के द्वारा HTML element में रंग भर रहे हैं।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JQuery Example 1 : Change the color of HTML element</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("P").css("color", "red");
});
</script>
</head>
<body>
<P>Hello, World!</P>
</body>
</html>निष्कर्ष : JQuery Tutorial in Hindi
JQuery tutorial in Hindi में आपने पढ़ा की JQuery क्या होती है इसे कैसे use करते हैं इसके Features और Advantages क्या है। आपने इसके examples भी देखे।
JQuery एक JavaScript की library है जो बहुत ही fast और lightweight है। यह बहुत लोकप्रिय लाइब्रेरी है।
यदि आपको इस JQuery tutorial in hindi में कुछ doubts हैं तो आप नीचे कमेंट बॉक्स में पूछ सकतें हैं।