जैसा कि हमने बात की है, jQuery को एक "चयन और करो" पुस्तकालय के रूप में सोचा जा सकता है। हमने काफी कुछ चुनने के बारे में बात की है, तो अब कुछ कार्यों के बारे में बात करते हैं। याद रखें कि पैटर्न मूल रूप से इस तरह दिखता है:
// Select something! $(".something") // Do something! .hide();अधिक सैद्धांतिक उदाहरणों के साथ काम करने के बजाय, हम सही कुछ वास्तविक दुनिया-वाई में चलते हैं। हमें यह पेन ड्रू बरोंटिनी द्वारा मिला और इसे फोर्क किया गया।
CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पेन क्रेडिट कार्ड फॉर्म देखें
हमारे उदाहरण में, हमने क्रेडिट कार्ड फॉर्म को डिफ़ॉल्ट रूप से छिपा दिया। फिर हमने एक लिंक बनाया, जिस पर क्लिक करके आप क्रेडिट कार्ड फॉर्म को स्लाइड कर सकते हैं। हम चयन लिंक है, तो कर फार्म पर एक slideToggle। चुनें और करें!
हमने अभी तक घटनाओं के बारे में ज्यादा बात नहीं की है, लेकिन यह jQuery का एक बड़ा हिस्सा है। एक घटना एक माउस क्लिक, कुंजी प्रेस, स्क्रॉल, आदि की तरह कुछ है "चयन करें और करो" का "हिस्सा" अक्सर एक घटना के बाद होता है। चिंता न करें, हम इस श्रृंखला के माध्यम से घटनाओं के बारे में बहुत बात करेंगे। अभी के लिए, बस यह जान लें कि jQuery में घटनाओं को बांधने के लिए () सबसे अच्छा / मानक तरीका है। बाइंड, जिसका अर्थ है "इस तत्व या तत्वों के सेट पर इस घटना के लिए देखें।"
मूल योजना:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));हमारे उदाहरण में, लिंक सचमुच एक लिंक था।
टॉगल
जिस तरह से हैश लिंक किसी भी ब्राउज़र में डिफ़ॉल्ट रूप से काम करता है वह यह है कि विंडो उस हैश लिंक से मेल खाता तत्व के साथ नीचे स्क्रॉल करेगी। कभी-कभी यह अच्छा है। मुझे पसंद है कि यह उस लिंक और उस तत्व के बीच एक शब्दार्थ संबंध कैसे बनाता है। किसी भी जावास्क्रिप्ट के बिना, लिंक अभी भी अनिवार्य रूप से समझ में आता है (विशेषकर यदि आप इसे कुछ स्मार्ट शीर्षक देते हैं)।
लेकिन कभी-कभी, यह हैश लिंक जंपिंग व्यवहार एक bummer है। हम इसे रोकने में जावास्क्रिप्ट का उपयोग कर रोका जा सकता है। इस कदर:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));हम इसके बारे में और बात करेंगे।
बेशक, jQuery के अपने प्रलेखन jQuery के सभी "करना" पहलुओं (तरीकों) के लिए एक शानदार संसाधन है।
मुझे लगता है कि इस "चयन और करो" और घटनाओं की बहुत बुनियादी समझ वास्तव में जावास्क्रिप्ट में समझ की दुनिया को खोलती है। मुझे पता है कि यह मेरे लिए किया था। इस पेंचकस के अंत में हम CSS-ट्रिक्स के वर्तमान डिज़ाइन पर एक चोटी लेते हैं और देखते हैं कि जावास्क्रिप्ट का उपयोग कुछ क्लिक घटनाओं पर प्रतिक्रिया करने और UI को बदलने के लिए स्पष्ट रूप से किया जाता है। पिछले डेमो में हम जो कर रहे थे, उसके समान बहुत ही सामान। उदाहरण के लिए, आपके द्वारा क्लिक की जाने वाली चीजों पर एक सक्रिय वर्ग सेट करना, जैसे:
पेन कोड 667161a5931397b4f24195a315d52f3 को क्रिस कॉयियर (@chriscoyier) द्वारा CodePen पर देखें