परिचय करने के लिए jQuery (भाग 2): तरीके और कार्य

विज्ञापन

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

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

यदि आप पाठ 1 से याद करते हैं, तो यह jQuery में DOM हेरफेर की मूल संरचना है। DOM मैनिप्युलेशन केवल एक चीज नहीं है जिसे आप jQuery के साथ कर सकते हैं, लेकिन यह सबसे आसान जगह है और सबसे आम है, इसलिए हमने इसे चुना है।

जल्दी से पुनरावृत्ति करने के लिए, ए चयनकर्ता इस कथन का एक हिस्सा आपको DOM के भागों का पता लगाने के लिए सीएसएस जैसे तत्व के नाम, वर्ग या ID का उपयोग करने की अनुमति देता है। उदाहरण के लिए, सभी को हथियाने के लिए के एक वर्ग के नाम के साथ

।छिपा हुआ, हम उपयोग करेंगे:

$ ( 'Div.hidden')

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

तरीकों पर तो; आप वैसे भी DOM के तत्वों के साथ क्या कर सकते हैं?

सबसे पहले, मैंने आपको इसका परिचय दिया .css पिछली बार विधि ताकि आप इसे परीक्षण के लिए उपयोग कर सकें। प्रारूप सरल है:

.css ( 'संपत्ति', 'मान');

CSS द्वारा निश्चित कुछ भी इसलिए jQuery द्वारा समायोजित किया जा सकता है - रंग, पारदर्शिता, स्थान, आकार - नाम पर लेकिन कुछ। बदलाव तत्काल है।

यदि आप सीएसएस में परिवर्तन नहीं करते हैं, तो मुझे आपके लिए बहुत अच्छी खबर मिली है; वहाँ भी एक विधि कहा जाता है .animate (). हालांकि यह थोड़ा अधिक जटिल है:

.animate ({ 'संपत्ति': 'value'}, गति);

उदाहरण के तौर पे:

.animate ({ 'अस्पष्टता': '0.25', 'ऊंचाई': '100px'}, 'तेजी से');

इस बिंदु पर, आप सोच रहे होंगे कि घुंघराले ब्रेसिज़ क्या हैं; उन्हें "ऑब्जेक्ट शाब्दिक" कहा जाता है, और आम तौर पर एक सूची बनाने के लिए उपयोग किया जाता है संपत्ति मूल्य जोड़े, एक तरह की तरह अनुक्रमित सरणी यदि आप अन्य भाषाओं से आ रहे हैं। आप उन्हें jQuery में बहुत अधिक उपयोग करेंगे, इसलिए मैं यह फिर से कहूँगा - बंद कोष्ठक और ब्रेसिज़ के लिए ठीक से जाँच करने की आदत डालें!

चेक आउट यह पन्ना चेतन विधि के बहुत सारे काम करने के उदाहरणों के लिए।

किसी चीज़ के CSS गुणों में हेरफेर करने के साथ-साथ, आप इसके साथ की सामग्री को समायोजित कर सकते हैं .पाठ (), .html (), और .val () विधियाँ भी (वैल फार्म तत्वों की सामग्री के लिए है). ये तरीके दोनों के रूप में कार्य करते हैं सेटters और प्राप्तमंत्रियों; यदि आप कोई मूल्य निर्दिष्ट नहीं करते हैं, तो उन्हें वर्तमान मूल्य मिलेगा। यदि आप कोई मान निर्दिष्ट करते हैं, तो वे वर्तमान मान को बदल देंगे।

यहाँ कुछ त्वरित उदाहरण हैं:

टिप्पणी फ़ील्ड में नाम फ़ील्ड का वर्तमान मान प्राप्त करें और इसे किसी चर में असाइन करें comment_name:

var commenter_name = $ (# टिप्पणी-फ़ॉर्म #name) .val ();

का मान निर्धारित करें से पकड़ा गया मान COMMENTER_NAME:

$ ('span.name')। पाठ (टिप्पणीकार_नाम);

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

मान लें कि आप प्रत्येक 3 जी के बाद विज्ञापन छवि ब्लॉक को गतिशील रूप से सम्मिलित करना चाहते हैं सामग्री कॉलम में अनुच्छेद, लेकिन आप इसे जावास्क्रिप्ट में कर रहे हैं ताकि प्रारंभिक पृष्ठ लोड हो सके साफ रखा। बहुत जटिल लगता है, है ना? मुश्किल से…

$('div # सामग्रीपी: nth-child (3n)').उपरांत('');

इसे तोड़ते हुए, हमने jQuery से पूछा:

1. "सामग्री" की आईडी के साथ div खोजें
2. उस div के भीतर p का निहित खोजें
3. हर 3 पी को फ़िल्टर करें nth-child छद्म चयनकर्ता का उपयोग करना (उस पर और अधिक यहाँ)
4. के बाद एक मनमाना img डालें प्रत्येक मिलान तत्व

मैं संभवतः यहाँ सभी विधियों को सूचीबद्ध नहीं कर सकता और न ही आप इसे पढ़ना चाहेंगे। मुद्दा यह है कि इसमें हेरफेर करने पर जो कुछ भी आप सोच सकते हैं, उसके लिए बहुत कुछ करने की एक विधि है एपीआई की जाँच करें एक के लिए आप उपयोग कर सकते हैं।

इसके अलावा, ध्यान रखें कि कुछ करने के लिए एक से अधिक तरीके हो सकते हैं। यदि उदाहरण के लिए आप सही ऑब्जेक्ट को संकीर्ण नहीं कर सकते हैं insertAfter (), शायद खोजने के बारे में सोचें आगे बच्चे को नीचे और उपयोग करना insertBefore () बजाय।

विधि जंजीर

अंत में, चलो विधि के बारे में एक त्वरित शब्द है, मूल रूप से सिर्फ इसलिए कि यह भयानक है। पहले, आइए कोड की निम्नलिखित पंक्तियों पर विचार करें:

$ ( 'एनएवी # मेनू') fadein ( 'तेज')। $ ( 'एनएवी # मेनू') addClass ( 'beingShown')। $ ( 'एनएवी # मेनू') सीएसएस ( 'मार्जिन-सही', '10px')।

यह पर्याप्त उचित लगता है, है ना? लेकिन आप केवल एक लाइन में ही ऐसा कर सकते हैं:

$ ( 'एनएवी # मेनू') fadein ( 'तेज') addClass ( 'beingShown') सीएसएस ( 'मार्जिन-सही', '10px')।।।

वह ठीक यही काम करता है, और कहा जाता है विधि जंजीर. चूँकि लगभग सभी jQuery विधियाँ एक jQuery ऑब्जेक्ट को स्वयं लौटाती हैं, इसलिए प्रत्येक अगले में फीड कर सकता है। इसका मतलब कम कोड है - जो हमेशा एक अच्छी बात है - लेकिन यह वास्तव में तेजी से भी चलता है।

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

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

यदि आप इस पद पर सिर्फ ठोकर खाए हैं, तो आप शायद किसी प्रकार के एक वेब डेवलपर हैं और हमारे सभी चेक आउट करना चाहते हैं वर्डप्रेस और ब्लॉगिंग लेख, या यहां तक ​​कि हमारे सर्वश्रेष्ठ वर्डप्रेस प्लगइन्स सर्वश्रेष्ठ वर्डप्रेस प्लगइन्स अधिक पढ़ें पृष्ठ।