पिछले हफ्ते, मैंने इस बारे में बात की कि किसी भी आधुनिक वेब डेवलपर के लिए jQuery कितना महत्वपूर्ण है और यह कमाल क्यों है। इस हफ्ते, मुझे लगता है कि यह समय है कि हम अपने हाथों को कुछ कोड के साथ गंदा कर लें और सीखें कि वास्तव में हमारी परियोजनाओं में jQuery का उपयोग कैसे करें।

मैं इसे अभी कहूंगा - jQuery का उपयोग करने के लिए आपको जावास्क्रिप्ट सीखने की आवश्यकता नहीं है। यह शायद सबसे अच्छा है यदि आप jQuery को जावास्क्रिप्ट के विकास के रूप में सोचते हैं - इसे करने का एक बेहतर तरीका - कार्यक्षमता जोड़ने वाली लाइब्रेरी की तुलना में। आपको जिस भी जावास्क्रिप्ट की आवश्यकता होगी उसे रास्ते में उठाया जाएगा। हालांकि यह माना जाता है कि एक वेब डेवलपर के रूप में आपको एचटीएमएल और सीएसएस का बहुत अच्छा ज्ञान है (और यहां उपयोगी मुफ्त एक्सएचटीएमएल गाइड है यदि नहीं!)

दस्तावेज़ वस्तु मॉडल

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

से यह सरल आरेखडब्ल्यू3स्कूलअवधारणाओं को काफी अच्छी तरह से समझाता है। आपको यह देखने में सक्षम होना चाहिए कि तत्व का जनक है, जबकि तत्व का तत्काल . है

jQuery code codes here`

$ ('चयनकर्ता')तरीका();

बस, वहाँ शीर्षक में। यह डीओएम में हेरफेर करने के लिए jQuery कोड के एक टुकड़े की मूल संरचना है। आसान, है ना?

NSचयनकर्ताइस नियम से मेल खाने वाली चीजों को खोजने के लिए jQuery को बताता है, और सीएसएस चयनकर्ताओं के समान है (और फिर शीर्ष पर कुछ और)। तो, जैसे कि CSS में आप सभी लिंक्स को स्टाइल करेंगे

a { }

jQuery में भी ऐसा ही किया जाएगा

$('a')

यह किसी भी HTML तत्वों के लिए किया जा सकता है - div, h1, span - जो भी हो। अधिक विशिष्ट होने के लिए आप सीएसएस कक्षाओं और आईडी का भी उपयोग कर सकते हैं।

उदाहरण के लिए, 'findme' वर्ग के सभी लिंक खोजने के लिए, आप इसका उपयोग करेंगे:

$('a.findme')

आपको हर बार तत्व के प्रकार को निर्दिष्ट करने की आवश्यकता नहीं है - लेकिन यदि आप करते हैं, तो यह नियम को और अधिक विशिष्ट बनाता है। आप अभी कह सकते थे

$('.findme')

जो कक्षा के साथ सब कुछ मेल खाएगा मुझे ढूढ़ें , यह एक लिंक था या नहीं।

नामित आईडी तत्व का उपयोग करने के लिए, का उपयोग करें # इसके बजाय हस्ताक्षर करें। यहां मुख्य अंतर यह है कि एक आईडी चयनकर्ता केवल एक वस्तु का चयन करेगा, जबकि एक वर्ग चयनकर्ता एक से अधिक खोज सकता है।

विंडोज़ 10 अपडेट पर धीमी गति से काम कर रहा है

$('#something')

मूल रूप से यदि आप CSS में कर सकते हैं तो jQuery भी इसे करेगा। वास्तव में, आप कुछ काफी जटिल CSS3 शैली के छद्म चयनकर्ता भी कर सकते हैं जैसे :first

$('body p:first')

जो पेज के पैराग्राफ को पकड़ लेगा। आपको कुछ विशेषताओं वाले तत्व भी मिलते हैं। इस उदाहरण पर विचार करें; हम पृष्ठ पर सभी लिंक ढूंढना चाहते हैं जो आंतरिक रूप से इंगित करते हैं उपयोग करना और उन्हें किसी तरह हाइलाइट करें। यहां बताया गया है कि हम उन्हें कैसे ढूंढ सकते हैं:

$('a[href*='makeuseof']')

क्या यह अच्छा नहीं है? खैर, मुझे लगता है कि है।

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

समीकरण का अगला भाग हैतरीका- उन चीजों का क्या करें जब आप उन सभी को पा लें - लेकिन हम इसे अगले पाठ के लिए छोड़ देंगे। यदि आप अभी विभिन्न चयनकर्ताओं को आज़माकर शुरुआत करना चाहते हैं, तो मेरा सुझाव है कि आप निम्नलिखित सीएसएस पद्धति से चिपके रहें। इसमें दो पैरामीटर लगते हैं - एक CSS संपत्ति का नाम , और एक नया मूल्य उस संपत्ति को आवंटित करने के लिए। तो, सभी लिंक को एक लाल पृष्ठभूमि रंग देने के लिए, आप यह करेंगे:

$('a').css('background-color','red');

काफी सरल! हालांकि यह किसी भी व्यावहारिक उपयोग का नहीं हो सकता है, यह आपको अपने चयनकर्ताओं का उपयोग करके स्थित किसी भी तत्व को आसानी से देखने देगा। अब आगे बढ़ें, और चुनें - DOM आपका इंतजार कर रहा है।

मुझे आशा है कि यह ट्यूटोरियल आपके लिए उपयोगी रहा है; मैंने इसे यथासंभव सरल समझने की कोशिश की है। बेझिझक कोई भी प्रश्न पूछें या प्रतिक्रिया दें, लेकिन ध्यान रखें कि मैं निश्चित रूप से कोई कुलीन jQuery निंजा नहीं हूं।

साझा करना साझा करना कलरव ईमेल अपने वर्चुअलबॉक्स लिनक्स मशीनों को सुपरचार्ज करने के लिए 5 टिप्स

वर्चुअल मशीनों द्वारा पेश किए गए खराब प्रदर्शन से थक गए हैं? अपने वर्चुअलबॉक्स प्रदर्शन को बढ़ावा देने के लिए आपको यहां क्या करना चाहिए।

आगे पढ़िए संबंधित विषय

वेब संस्कृति
वेब विकास
जावास्क्रिप्ट
प्रोग्रामिंग
jQuery

लेखक के बारे में जेम्स ब्रूस(707 लेख प्रकाशित)

James ने आर्टिफिशियल इंटेलिजेंस में बीएससी किया है और CompTIA A+ और Network+ प्रमाणित है। जब वह हार्डवेयर समीक्षा संपादक के रूप में व्यस्त नहीं होता है, तो वह लेगो, वीआर और बोर्ड गेम का आनंद लेता है। MakeUseOf में शामिल होने से पहले, वह एक प्रकाश तकनीशियन, अंग्रेजी शिक्षक और डेटा सेंटर इंजीनियर थे।

जेम्स ब्रूस की और फ़िल्में या टीवी शो

हमारे न्यूज़लेटर की सदस्यता लें

तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें