jQuery in Nutshell in Hindi

jQuery जावास्क्रिप्ट का एक लाइब्रेरी है जिसका उपयोग किसी वेब साइट के भीतर संक्षिप्त रूप में स्क्रिप्टिंग करने के लिए किया जाता है। 

jQuery शब्द का निहितार्थ 

jQuery शब्द पर गौर करें तो हम पाते हैं कि यह camelcase में लिखा हुआ है। कैमलकेस का अभिप्राय यह है कि compound word की स्थिति में पहले वर्ड को स्माल लेटर में लिखतें हैं जबकि उसके बाद के दूसरे वर्ड के पहले लेटर को अपर केस में लिखते हैं, तीसरे वर्ड के पहले लेटर को uppercase में लिखते हैं इत्यादि। 

कैमलकेस के अंतर्गत जब कोई कंपाउंड वर्ड होता है तो उसके सारे वर्ड्स के पहले लेटर को अपरकेस में लिखते हैं सिवाय पहले वर्ड के। बाकी लेटर्स lowercase में होते हैं।

इसको ध्यान में रखते हुए जेक्वेरी के भीतर जितने भी functions या methods है वे सारे functions या methods कैमलकेस में लिखे हुए हैं। उदाहरण के लिए slideUp(), slideDown(), slideToggle() इत्यादि

jQuery शब्द वस्तुतः जेक्वेरी लाइब्रेरी का एक मेथड है। इसको संक्षेप में $ से भी व्यक्त किया जाता है। इसके भीतर किसी सिलेक्टर को लिखते हैं। दूसरे शब्दों में jQuery मेथड के पैरामीटर के रूप में selector होता है। अर्थात jQuery(selector) एक jQuery ऑब्जेक्ट होता है जो jQuery() मेथड द्वारा return किया जाता है। इस jQuery ऑब्जेक्ट के ऊपर हम किसी दूसरे जेक्वेरी मेथड को अप्लाई कर सकते हैं जो वस्तुतः method chaining का उदाहरण है। उदाहरण के लिए, 

jQuery(document).ready();

इसको संक्षेप में ऐसे भी लिखते हैं 

$(document).ready(); 

यहां सिलेक्टर document है जिसको जेक्वेरी मेथड में argument के रूप में दिया गया है। jQuery() मेथड तब document ऑब्जेक्ट return करता है। अर्थात डॉक्युमेंट ऑब्जेक्ट का निर्माण होता है जिसके ऊपर ready () मेथड का प्रयोग किया गया है। इसका अर्थ यह हुआ कि डॉक्यूमेंट तैयार हो जाए।

jQuery के किसी method के भीतर किसी एनोनिमस फंक्शन को अरगुमेंट के रूप में पास करना आम बात है। यह फंक्शन उस मेथड के कॉल होने पर इवेंट हैंडलर का कार्य करता है। जावास्क्रिप्ट के भीतर एक फंक्शन भी ऑब्जेक्ट की तरह कार्य करता है अतः उसे किसी दूसरे फंक्शन के भीतर argument के रूप में पास किया जा सकता है।

जेक्वेरी जावास्क्रिप्ट का ही अन्तरूनी रूप से प्रयोग करता है अतः जावास्क्रिप्ट के फंक्शन की संरचना को समझना आवश्यक है। नीचे जावास्क्रिप्ट फंक्शन की रूपरेखा दी गई है

function functionName (parameter-list){

//Body of function

}

एनोनिमस फंक्शन के केस में फंक्शन का नाम नहीं देते हैं

function (parameter-list){

//Body of function

}

जेक्वेरी के केस में एनोनिमस फंक्शन का उपयोग इवेंट हैंडलर के रूप में बहुतायत में होता है। एनोनिमस फंक्शन की बॉडी में उस लॉजिक को लिखते हैं जो इवेंट हैंडलर में के रूप में संपादित करना होता है।

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

ऊपर के उदाहरण में ready () एक मेथड है जिसके भीतर किसी इवेंटहैंडलर फंक्शन को पास किया जा सकता है। ऐसा आमतौर पर jQuery में पाया जाता है जैसे कि नीचे दिखाया गया है

$(document).ready(function (){}) ;

एनोनिमस फंक्शन की बॉडी के भीतर उस लॉजीक को लिखते हैं जोकि ready (), click () इत्यादि इवेंट के होने पर घटित होने वाला है।

मान लीजिए कि वेबपेज अर्थात डॉक्यूमेंट के भीतर किसी बटन को क्लिक करने पर डॉक्यूमेंट का बैकग्राउंड कलर रेड हो जाता है तो इस लॉजिक को जेक्वेरी के अंतर्गत निम्न प्रकार से व्यक्त करेंगे।

$(document).ready(function (){

$("#btn").click(function (){

$(document).css("background-color","red");

})

}) ;

ध्यान दे कि click () फंक्शन की बॉडी के भीतर बिजनेस लॉजिक को व्यक्त किया गया है जिसके अंतर्गत document सिलेक्टर के ऊपर css() मेथड का उपयोग किया गया है। css(attribute, value) syntax का प्रयोग किया गया है।

jQuery सिलेक्टर से अभिप्राय एचटीएमएल पेज की भीतर के किसी एलिमेंट या एलिमेंट्स के समूह से होता है किसी वेरिएबल को भी सेक्टर के रूप में दर्शाया जा सकता है जैसे विंडोज।

jQuery का सिलेक्टर CSS के सिलेक्टर से मिलता-जुलता होता है। जिस तरह सीएसएस में सिलेक्टर एक HTML एलिमेंट होता है अथवा विभिन्न प्रकार के HTML एलिमेंटस के ऑपरेटर के संजोग से निर्मित होता है ठीक उसी तरह jQuery के भीतर भी सिलेक्टर का निर्माण होता है। सिलेक्टर्स बनाने के लिए हमें अलग अलग तरह का ऑपरेटर जैसे comma, plus, स्पेस इत्यादि का प्रयोग करना होता है।

jQuery के सिलेक्टर को डबल कोट के भीतर लिखा जाता है अगर वह कोई variable न हो जैसे window, this इत्यादि। अगर आईडी सिलेक्टर है तो ID सिलेक्टर के लिए # का प्रयोग करते हैं जबकि क्लास सिलेक्टर के लिए डॉट सिंबल का प्रयोग करता है।

सिलेक्टर हमेशा कोष्ठक में लिखा जाता है क्योंकि यह jQuery फंक्शन के एक argument के रूप में व्यक्त होता है। इस तरीके से jQuery(selector) एक ऑब्जेक्ट को व्यक्त करता है। इस ऑब्जेक्ट के ऊपर पुनः jQuery के किसी मेथड का प्रयोग करते हैं। 

jQuery लाइब्रेरी में बने बनाए कई सारे मेथडस हैं जैसे show(), hide(), fadeIn(), fadeOut(), slideUp(), slideDown(), slideToggle(), text(), html(), attr(), val(), append(), prepend(), html(), text(), before(), after(), wrap() , empty(), remove(), unwrap(), siblings(), next(), nextAll(), nextUntil(), prev(), prevAll() and prevUntil() इत्यादि जिनको jQuery object के साथ प्रयोग कर सकते हैं।

आगे के लेख में इन अलग-अलग जेक्वेरी मेथडस का अध्ययन करेंगे। वस्तुतः जेक्वेरी सीएसएस सिलेक्टर्स के ऊपर जेक्वेरी methods का प्रयोग है। jQuery सीखने के लिए jQuery के सिंटेक्स के साथ-साथ jQuery के विभिन्न प्रकार के मेथड्स पर कमांड या नियंत्रण की आवश्यकता है।

val() मेथड का उपयोग एचटीएमएल कि किसी कंट्रोल की वैल्यू को read या write करने के लिए किया जाता है। उदाहरण के लिए मान लीजिए कि किसी टेक्स्ट बॉक्स में कुछ वैल्यू डालना है तो उसके लिए val() फंक्शन का यूज करते हैं। इसी तरह टेक्सटबॉक्स के किसी वैल्यू को अगर रीड करना हो तो इसके लिए val() फंक्शन का यूज करते हैं। रीड करते समय val() में किसी तरह का पैरामीटर डालने की आवश्यकता नहीं है जबकि राइट करने के लिए val(data) में पैरामीटर की आवश्यकता होती है पैरामीटर उस डाटा का मान होता है जिस डाटा को उस कंट्रोल के भीतर वैल्यू के रूप में डालना होता है। read the value of first matched element and write value to all matched elements. "Get the current value of the first element in the set of matched elements or set the value of every matched element."

text() का उपयोग HTML टैग के भीतर स्थित text को read write करने के लिए किया जाता है। दूसरे शब्दों में, text() फंक्शन का उपयोग HTML पेज के भीतर किसी टैग में text डालने या उपस्थित टेक्स्ट  को read करने के लिए इस फंक्शन का उपयोग करते हैं। रीड करते समय text() में किसी तरह का पैरामीटर डालने की आवश्यकता नहीं है जबकि tag के भीतर राइट करने के लिए text(data) में पैरामीटर की आवश्यकता होती है। पैरामीटर उस डाटा का मान होता है जिस डाटा को tag के भीतर वैल्यू के रूप में डालना होता है। "The .text() method cannot be used on form inputs or scripts. To set or get the text value of input or textarea elements, use the .val() method. To get the value of a script element, use the .html() method."

html() का उपयोग HTML टैग को read write करने के लिए किया जाता है। दूसरे शब्दों में, html() फंक्शन का उपयोग HTML पेज के भीतर किसी टैग या कंट्रोल को बनाने या बने हुए टैग या कंट्रोल के HTML को read करने के लिए इस फंक्शन का उपयोग करते हैं। रीड करते समय html() में किसी तरह का पैरामीटर डालने की आवश्यकता नहीं है जबकि राइट करने के लिए html(tag) में पैरामीटर की आवश्यकता होती है। पैरामीटर उस tag का मान होता है जिसको पेज के भीतर डालना होता है।

html() फंक्सन का उपयोग जहां पेज के भीतर HTML टैग का निर्माण करने के लिए किया जाता है वहीं दूसरी ओर text () का उपयोग HTML टैग के भीतर टेक्स्ट को लिखने के लिए किया जाता है। 

हम जानते हैं कि किसी भी HTML टैग के कई सारे अटरीब्यूट्स होते हैं। इन अटरीब्यूट्स को read या write करने के लिए attr() फंक्शन का उपयोग किया जाता है। उदाहरण के लिए, input के अटरीब्यूट्स id, name, type और value हैं। अगर input के भीतर की वैल्यू को read write करना हो तो इसके लिए हम attr() फंक्शन का यूज करते हैं।

append(), prepend(), html(), text(), before(), after(), wrap() , empty(), remove(), unwrap()

append() फंक्शन का उपयोग किसी एलिमेंट के चाइल्ड एलिमेंट के रूप में किसी एलिमेंट को append करने के लिए किया जाता है। ऐसा करने पर नया एलमेंट अंतिम चाइल्ड एलिमेंट के तौर पर पैरेंट एलिमेंट के साथ append हो जाता है। added as last child

prepend() फंक्शन का उपयोग किसी एलिमेंट के चाइल्ड एलिमेंट के रूप में किसी एलिमेंट को prepend करने के लिए किया जाता है। ऐसा करने पर नया एलमेंट प्रथम चाइल्ड एलिमेंट के तौर पर पैरेंट एलिमेंट के साथ prepend हो जाता है। added as first child

before() फंक्शन का उपयोग किसी सेलेक्टर एलिमेंट के ठीक पहले एक sibling एलिमेंट के रूप में किसी एलिमेंट को जोड़ने के लिए किया जाता है। ऐसा करने पर नया एलमेंट previous sibling एलिमेंट के तौर पर उस सेलेक्टर एलिमेंट के साथ जुड़ जाता है।

after() फंक्शन का उपयोग किसी सेलेक्टर एलिमेंट के ठीक बाद में एक sibling एलिमेंट के रूप में किसी एलिमेंट को जोड़ने के लिए किया जाता है। ऐसा करने पर नया एलमेंट नेक्स्ट sibling एलिमेंट के तौर पर उस सेलेक्टर एलिमेंट के साथ जुड़ जाता है।

wrap() फंक्शन का उपयोग किसी सेलेक्टर एलिमेंट के parent एलिमेंट के रूप में किसी एलिमेंट को जोड़ने के लिए किया जाता है। ऐसा करने पर नया एलमेंट parent एलिमेंट के तौर पर उस सेलेक्टर एलिमेंट के साथ जुड़ जाता है।

unwrap() फंक्शन का उपयोग किसी सेलेक्टर एलिमेंट को parent एलिमेंट के रूप में मानते हुए उसको पेज सेविलगाव के लिए किया जाता है। ऐसा करने पर सेलेक्टर एलमेंट parent एलिमेंट के तौर पर वर्तमान स्थिति से नष्ट हो जाता है।

eq(index) फंक्शन का उपयोग किसी सेलेक्टर एलिमेंट से प्राप्त matched set के किसी एक एलिमेंट को उसके index के आधार पर चुनने के लिए किया जाता है जिसका index मान function के index मान के बराबर होता है। index का मान सदैव integer number होता है। जब index का मान नेगेटिव होता है तो यह फंक्शन last to first अर्थात पीछे से सर्च शुरू करता है। matched set  के सबसे पहले एलिमेंट का इंडेक्स value शून्य होता है।

gt(index) फंक्शन का उपयोग किसी सेलेक्टर एलिमेंट से प्राप्त matched set के किसी एक या अधिक एलिमेंटस को उसके index के आधार पर चुनने के लिए किया जाता है जिसका index मान function के index मान से अधिक होता है। index का मान सदैव integer number होता है। जब index का मान नेगेटिव होता है तो यह फंक्शन last to first अर्थात पीछे से सर्च शुरू करता है। matched set  के सबसे पहले एलिमेंट का इंडेक्स value शून्य होता है।

lt(index) फंक्शन का उपयोग किसी सेलेक्टर एलिमेंट से प्राप्त matched set के किसी एक या अधिक एलिमेंटस को उसके index के आधार पर चुनने के लिए किया जाता है जिसका index मान function के index मान से कम होता है। index का मान सदैव integer number होता है। जब index का मान नेगेटिव होता है तो यह फंक्शन last to first अर्थात पीछे से सर्च शुरू करता है। matched set  के सबसे पहले एलिमेंट का इंडेक्स value शून्य होता है।

© अजीत कुमार, सर्वाधिकार सुरक्षित।

इस आलेख को उद्धृत करते हुए इस लेख के लिंक का भी विवरण दें। इस आलेख को कॉपीराइट सूचना के साथ यथावत साझा करने की अनुमति है। कृपया इसे ऐसे स्थान पर साझा न करें जहाँ इसे देखने के लिए शुल्क देना पडे।