जावास्क्रिप्ट प्रोग्रामर के लिए JQuery के लिए एक बुनियादी गाइड

विज्ञापन

JQuery ग्रह पर सबसे लोकप्रिय जावास्क्रिप्ट पुस्तकालयों में से एक है (जावास्क्रिप्ट क्या है जावास्क्रिप्ट क्या है, और क्या इंटरनेट इसके बिना मौजूद रह सकता है?जावास्क्रिप्ट उन चीजों में से एक है जिन्हें बहुत से लोग लेते हैं। हर कोई इसका उपयोग करता है। अधिक पढ़ें ). इसकी शुरुआत के समय, जावास्क्रिप्ट (के रूप में संदर्भित किया जाएगा जे एस यहाँ से) बहुत अलग जगह पर था। 14 जनवरी 2006 वह दिन था जब jQuery की घोषणा की गई थी BarCampNYC. जेएस को अभी भी कुछ हद तक कमी थी - ब्राउज़रों ने इसके सभी हिस्सों का समर्थन किया, लेकिन अनुपालन के लिए बहुत सारे हैक और वर्कअराउंड को लागू करना पड़ा।

JQuery ने साथ आकर सब कुछ बदल दिया। JQuery ने ब्राउज़र आज्ञाकारी कोड लिखना बहुत आसान बना दिया। आप कंप्यूटर विज्ञान में डिग्री के बिना वेबपेजों को एनिमेटेड कर सकते हैं - हुर्रे! दस साल, क्या jQuery अभी भी राजा है, और अगर आपने इसे पहले कभी इस्तेमाल नहीं किया है, तो आप इसके साथ क्या कर सकते हैं?

अपने जावास्क्रिप्ट कौशल पर ब्रश करने के अलावा, आप कुछ पढ़ना चाह सकते हैं HTML और सीएसएस ट्यूटोरियल HTML और CSS को इन स्टेप बाय स्टेप ट्यूटोरियल के साथ जानें

HTML, CSS और JavaScript के बारे में उत्सुक? अगर आपको लगता है कि आपके पास स्क्रैच से वेबसाइट बनाने का तरीका सीखने की आदत है, तो यहां कुछ शानदार स्टेप-बाय-स्टेप ट्यूटोरियल ट्राई करने लायक हैं। अधिक पढ़ें पहले यदि आप उनसे परिचित नहीं हैं।

हमारे पास है jQuery की शुरुआत की वेब इंटरएक्टिव बनाना: एक परिचय jQuery के लिएjQuery एक क्लाइंट-साइड स्क्रिप्टिंग लाइब्रेरी है जो लगभग हर आधुनिक वेबसाइट का उपयोग करती है - यह वेबसाइटों को इंटरैक्टिव बनाती है। यह केवल जावास्क्रिप्ट पुस्तकालय नहीं है, लेकिन यह सबसे अधिक विकसित, सबसे समर्थित है, और सबसे व्यापक रूप से उपयोग किया जाता है ... अधिक पढ़ें इससे पहले, JQuery के लिए इस गाइड वास्तव में कोडिंग पर ध्यान दिया जाएगा।

शुरू करना

आप दस्तावेज़ ऑब्जेक्ट मॉडल से आईडी के चयन के जेएस तरीके से परिचित हो सकते हैं (डोम):

document.getElementById ( 'foo');

खैर JQuery इस एक कदम आगे ले जाता है। आपको कक्षाओं, आईडी या कई तत्वों का चयन करने के लिए अलग-अलग तरीकों से कॉल नहीं करना होगा। यहां बताया गया है कि आप एक आईडी कैसे चुनते हैं:

$ ( '# बार');

आसान है ना? लगभग किसी भी DOM तत्व का चयन करने के लिए यह एक ही वाक्यविन्यास है। यहां आप कक्षाओं का चयन कैसे करते हैं:

$ ( 'Baz।');

आप कुछ वास्तविक शक्ति के लिए रचनात्मक भी प्राप्त कर सकते हैं। यह सभी का चयन करता है टीडी तत्वों के अंदर एक तालिका पहले वाले को छोड़कर।

$ ('तालिका td')। नहीं (': प्रथम');

ध्यान दें कि चयनकर्ता के नाम उनके सीएसएस समकक्षों से लगभग कैसे मेल खाते हैं। आप को ऑब्जेक्ट असाइन कर सकते हैं नियमित जेएस चर:

var xyzzy = $ ('# जनक .child');

या आप jQuery चर का उपयोग कर सकते हैं:

var $ xyzzy = $ ('# जनक .child');

डॉलर चिह्न का उपयोग केवल यह संकेत देने के लिए किया जाता है कि यह चर एक jQuery वस्तु है, कुछ ऐसा जो जटिल परियोजनाओं पर बहुत सहायक है।

आप एक तत्व के जनक का चयन कर सकते हैं:

$ ( 'बच्चे') माता-पिता ()।;

या भाई-बहन:

$ ( 'बच्चे') भाई बहन ()।;

ब्राउज़र तैयार होने के बाद आपको अपना कोड निष्पादित करना होगा। यहां बताया गया है कि आप यह कैसे करते हैं:

$ (दस्तावेज़)। पहले से ही (फ़ंक्शन () {कंसोल.लॉग ('तैयार!'); });

ज़्यादा शक्ति

अब जब आप मूल बातें जानते हैं, तो कुछ और जटिल चीज़ों पर चलें। HTML तालिका दी गई:

बनाना
नमूना
रंग


पायाब
अनुरक्षण
काली


छोटा
कूपर
लाल


पायाब
Cortina
सफेद

कहते हैं कि आप हर दूसरी पंक्ति को एक अलग रंग बनाना चाहते हैं (जिसे जाना जाता है ज़ेबरा स्ट्राइप्स). अब आप इसके लिए CSS का उपयोग कर सकते हैं:

# केक tr: nth-child (सम) {पृष्ठभूमि-रंग: लाल; }

यह है कि jQuery के साथ कैसे हासिल किया जा सकता है:

$ ('tr: even')। addClass ('भी');

यह वही प्रदान करेगा, जो प्रदान करेगा यहाँ तक की सीएसएस में परिभाषित एक वर्ग है। ध्यान दें कि वर्ग नाम से पहले पूर्ण विराम की आवश्यकता कैसे है। य़े हैं आमतौर पर केवल मुख्य चयनकर्ता के लिए आवश्यक है। आदर्श रूप से, आप इसे शुरू करने के लिए CSS का उपयोग करेंगे, हालाँकि यह कोई बड़ी बात नहीं है।

JQuery पंक्तियों को छिपा या हटा भी सकता है:

। $ ( '# FordCortina') छिपाने (); । $ ( '# FordCortina') को हटाने ();

इसे हटाने से पहले आपको किसी तत्व को छिपाने की आवश्यकता नहीं है।

कार्य

JQuery फ़ंक्शन जेएस की तरह ही हैं। वे घुंघराले ब्रेसिज़ का उपयोग करते हैं और तर्क स्वीकार कर सकते हैं। जहां यह वास्तव में दिलचस्प है कॉलबैक के माध्यम से। कॉलबैक को लगभग किसी भी jQuery फ़ंक्शन पर लागू किया जा सकता है। कोर एक्शन पूरा होने के बाद वे चलाने के लिए कोड का एक टुकड़ा निर्दिष्ट करते हैं। यह बहुत बड़ी कार्यक्षमता प्रदान करता है। यदि वे मौजूद नहीं थे, और आपने अपने कोड को एक रैखिक फैशन में चलने की उम्मीद करते हुए लिखा था, तो जेएस पिछले एक की प्रतीक्षा करते हुए कोड की अगली पंक्ति को निष्पादित करना जारी रखेगा। कॉलबैक यह सुनिश्चित करता है कि मूल कार्य पूरा होने के बाद कोड केवल चलता है। यहाँ एक उदाहरण है:

$ ('तालिका')। छिपाएँ (फ़ंक्शन () {चेतावनी ('MUO नियम!'); });

सावधान रहें - यह कोड हर तत्व के लिए एक चेतावनी निष्पादित करता है। यदि आपका चयनकर्ता पृष्ठ पर एक से अधिक बार कुछ है, तो आपको कई अलर्ट मिलेंगे।

आप अन्य तर्कों के साथ कॉलबैक का उपयोग कर सकते हैं:

$ ('tr: even'); addClass ('भी', फंक्शन) () {कंसोल.लॉग ('हैलो'); });

ध्यान दें कि समापन ब्रेसिज़ के बाद एक अर्ध कोलन कैसे होता है। जेएस फ़ंक्शन के लिए यह सामान्य रूप से आवश्यक नहीं होगा, हालांकि यह कोड अभी भी एक लाइन पर माना जाता है (जैसा कि कॉलबैक ब्रैकेट के अंदर है)।

एनीमेशन

JQuery वेबपेजों को चेतन करना बहुत आसान बनाता है। आप तत्वों को अंदर या बाहर फीका कर सकते हैं:

$ ( '। Fade1') fadein ( 'धीमी')। $ ('# fade2')। fadeOut (500);

आप तीन गति (धीमी, मध्यम, तेज) या मिलीसेकंड में गति का प्रतिनिधित्व करने वाली संख्या (1000ms = 1 सेकंड) निर्दिष्ट कर सकते हैं। आप चेतन कर सकते हैं लगभग किसी भी सीएसएस तत्व। यह चयनकर्ता की चौड़ाई को उसकी वर्तमान चौड़ाई से 250px तक बढ़ाता है।

$ ('फू')। चेतन ({चौड़ाई: '250px'});

रंगों को चेतन करना संभव नहीं है। आप एनीमेशन के साथ कॉलबैक का उपयोग कर सकते हैं:

$ ('बार')। चेतन ({ऊंचाई: '250px'}, फ़ंक्शन () {$ ('बार')। चेतन ({चौड़ाई: '50px') });

लूप्स

लूप्स वास्तव में jQuery में चमकते हैं। से प्रत्येक() किसी प्रकार के प्रत्येक तत्व पर पुनरावृति करने के लिए उपयोग किया जाता है:

$ ('ली')। प्रत्येक (फ़ंक्शन () {कंसोल.लॉग ($ (यह)); });

आप एक सूचकांक का उपयोग भी कर सकते हैं:

$ ('ली')। प्रत्येक (फ़ंक्शन (i) {कंसोल.लॉग (i + '-' + $ (यह)); });

यह छपेगा 0, फिर 1 और इसी तरह।

आप भी उपयोग कर सकते हैं से प्रत्येक() जेएस की तरह, सरणियों पर पुनरावृति करने के लिए:

var कार = ['Ford', 'जगुआर', 'Lotus']; $ .each (कार, फ़ंक्शन (i, मान) {कंसोल.लॉग (मूल्य); });

नोट किए गए अतिरिक्त तर्क पर ध्यान दें मूल्य - यह एरे तत्व का मान है।

यह ध्यान देने योग्य है कि से प्रत्येक() कर सकते हैं कभी कभी वेनिला जेएस छोरों की तुलना में धीमी हो। यह अतिरिक्त प्रसंस्करण ओवरहेड के कारण है जो jQuery करता है। अधिकांश समय के लिए, यह कोई मुद्दा नहीं है। यदि आप प्रदर्शन के बारे में चिंतित हैं, या बड़े डेटासेट के साथ काम कर रहे हैं, तो अपने कोड को बेंचमार्किंग पर विचार करें jsPerf प्रथम।

AJAX

अतुल्यकालिक जावास्क्रिप्ट और XML या AJAX वास्तव में jQuery के साथ बहुत आसान है। AJAX के पास बड़ी मात्रा में इंटरनेट है, और यह कुछ ऐसा है जिसे हमने कवर किया है भाग ५ jQuery ट्यूटोरियल (भाग 5): AJAX उनका!जैसा कि हम अपने jQuery के मिनी-ट्यूटोरियल श्रृंखला के अंत के पास हैं, यह समय है जब हमने jQuery के सबसे अधिक उपयोग की जाने वाली विशेषताओं में से एक में अधिक गहराई से देखा है। AJAX एक वेबसाइट के साथ संवाद करने की अनुमति देता है ... अधिक पढ़ें हमारे jQuery ट्यूटोरियल jQuery ट्यूटोरियल - आरंभ करना: मूल बातें और चयनकर्तापिछले हफ्ते, मैंने इस बारे में बात की कि किसी भी आधुनिक वेब डेवलपर के लिए jQuery कितना महत्वपूर्ण है और यह बहुत बढ़िया क्यों है। इस हफ्ते, मुझे लगता है कि यह समय है जब हमने अपने हाथों को कुछ कोड के साथ गंदा कर दिया और सीखा कि कैसे ... अधिक पढ़ें . यह एक वेबपेज को आंशिक रूप से लोड करने का एक तरीका प्रदान करता है - पूरे पृष्ठ को फिर से लोड करने का कोई कारण नहीं जब आप केवल फुटबॉल स्कोर को अपडेट करना चाहते हैं, उदाहरण के लिए। jQuery के कई AJAX तरीके हैं, जो सबसे आसान है भार():

$ ( '# Baz') लोड ( 'कुछ / यूआरएल / page.html')।

यह निर्दिष्ट पृष्ठ पर AJAX कॉल करता है (कुछ / यूआरएल / page.html) और डेटा को चयनकर्ता में बदल देता है। सरल!

आप प्रदर्शन कर सकते हैं HTTP जीईटी अनुरोध:

$ .get ('कुछ / url', फ़ंक्शन (परिणाम) {कंसोल.लॉग (परिणाम); });

आप डेटा का उपयोग करके भी भेज सकते हैं पद:

$ .post ('कुछ / अन्य / url', {'make': 'Ford', 'model': 'Cortina "});

फ़ॉर्म डेटा जमा करना बहुत आसान है:

$ .post ('url', $ ('form'); serialize (), function (परिणाम) {कंसोल.लॉग (परिणाम); }

क्रमबद्ध करें() फ़ंक्शन सभी फॉर्म डेटा प्राप्त करता है और इसे ट्रांसमिशन के लिए तैयार करता है।

वादे

वादे को स्थगित निष्पादन के लिए उपयोग किया जाता है। उन्हें सीखना मुश्किल हो सकता है, हालांकि jQuery इसे थोड़ा कम परेशान करता है। ECMAScript 6 जेएस के मूल वादों का परिचय देता है, हालांकि, ब्राउज़र का समर्थन सबसे अच्छा है। अभी के लिए, jQuery के वादे क्रॉस ब्राउज़र समर्थन में बहुत बेहतर हैं।

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

यहाँ एक उदाहरण है:

// dfd == आस्थगित। var dfd = $ .Deferred (); फ़ंक्शन doThing () {$ .get ('कुछ / धीमा / url', फ़ंक्शन () {dfd.resolve ()); }); वापसी dfd.promise (); } $ .जब (doThing ())। तब (फ़ंक्शन () {कंसोल.लॉग ('YAY, यह समाप्त हो गया है)); });

ध्यान दें कि वादा कैसे किया जाता है (dfd.promise ()), और यह केवल तभी हल किया जाता है जब AJAX कॉल पूरा हो जाता है। आप कई AJAX कॉल का ट्रैक रखने के लिए एक चर का उपयोग कर सकते हैं, और केवल एक बार किसी अन्य कार्य को पूरा कर सकते हैं।

प्रदर्शन टिप्स

आपके ब्राउज़र से प्रदर्शन को निचोड़ने की कुंजी DOM तक पहुंच सीमित कर रही है। इनमें से कई युक्तियां जेएस पर भी लागू हो सकती हैं, और आप यह देखने के लिए अपने कोड को प्रोफाइल करना चाह सकते हैं कि क्या यह अस्वीकार्य रूप से धीमा है। उच्च प्रदर्शन जावास्क्रिप्ट इंजन की वर्तमान आयु में, कोड में मामूली अड़चनें अक्सर ध्यान नहीं दे सकती हैं। इसके बावजूद, यह अभी भी सबसे तेज़ प्रदर्शन करने वाला कोड लिखने की कोशिश कर रहा है।

हर कार्य के लिए DOM खोजने के बजाय:

$ ('फू')। सीएसएस ('पृष्ठभूमि-रंग', 'लाल'); $ ('फू')। css ('रंग', 'हरा'); $ ('foo')। css ('चौड़ाई', '100px');

एक चर में वस्तु को स्टोर करें:

$ बार = $ ('फू'); $ bar.css ('पृष्ठभूमि-रंग', 'लाल'); $ bar.css ('रंग', 'हरा'); $ bar.css ('चौड़ाई', '100px');

अपने छोरों का अनुकूलन करें। पाश के लिए एक वेनिला दिया:

var कारों = ['मिनी', 'फोर्ड', 'जगुआर']; for (int i = 0; i 

जबकि स्वाभाविक रूप से बुरा नहीं है, यह लूप तेजी से बनाया जा सकता है। प्रत्येक पुनरावृत्ति के लिए, लूप को कारों की सरणी के मान की गणना करनी होती है (cars.length). यदि आप इसे दूसरे चर में संग्रहीत करते हैं, तो प्रदर्शन प्राप्त किया जा सकता है, खासकर यदि आप बड़े डेटासेट के साथ काम कर रहे हैं:

for (int i = 0, j = Cars.length; मैं 

अब कारों की सरणी की लंबाई में संग्रहीत किया जाता है जे. इसे अब हर पुनरावृत्ति में परिकलित नहीं किया जाना है। यदि आप उपयोग कर रहे हैं से प्रत्येक(), आपको यह करने की आवश्यकता नहीं है, हालांकि ठीक से अनुकूलित वेनिला जेएस jQuery को बेहतर बना सकती है। जहां jQuery वास्तव में चमक रहा है, विकास और डीबगिंग की गति के माध्यम से है। यदि आप बड़े डेटा पर काम नहीं कर रहे हैं, तो jQuery आमतौर पर तेजी से अधिक है।

अब आपको एक jQuery निंजा होने के लिए पर्याप्त मूल बातें पता होनी चाहिए!

क्या आप नियमित रूप से jQuery का उपयोग करते हैं? क्या आपने किन्हीं कारणों से इसका उपयोग बंद कर दिया है? नीचे टिप्पणी में आप हमें अपने विचारों से अवगत कराएं!