लेआउट डिजाइनर के लिए jQuery (भाग 1): लिंक के लिए तीर

यह मिनी-लेख एक बहुत ही साधारण चीज़ के लिए समर्पित है, जो कि सबसे पहले, <a href=emplated jquery.com> jQuery लाइब्रेरी के उपयोगकर्ताओं को नौसिखिया करने के लिए, सबसे पहले, ब्याज की होगी । मैं आपको दिखाता हूं कि प्रत्येक लिंक पर एक छोटी छवि कैसे संलग्न करें, इसे बाहर खड़ा करने के लिए।

टास्क नंबर 1

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

 $ (दस्तावेज़)। पहले से ही (फ़ंक्शन) ({
	 $ ("a")। परिशिष्ट ("<img src = 'link_arrow.png' />");
 });

$ (दस्तावेज़)

अब देखते हैं कि यह कैसे काम करता है। घटनाओं को संसाधित करने के लिए, हम एक अतुल्यकालिक तंत्र का उपयोग करते हैं, अर्थात, हम उस विधि के पास जाते हैं जिसे इस घटना के होने पर बुलाया जाना चाहिए। पहली घटना जो हम संभाल रहे हैं वह $ है (दस्तावेज़)। यह तब होता है जब दस्तावेज़ प्रसंस्करण के लिए तैयार होता है, जब इसे लोड किया जाता है। आप पारंपरिक जावास्क्रिप्ट Window.onload की घटना के साथ इस घटना की तुलना कर सकते हैं। लेकिन $ (दस्तावेज़) पहले से ही तेज़ है, इसलिए वेब पेज के सभी तत्वों को लोड करने की प्रतीक्षा नहीं है जो कि स्क्रिप्ट के काम करने के लिए आवश्यक नहीं हो सकते हैं, उदाहरण के लिए, बड़ी छवियां।

$ (...)

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

अब हमारे पृष्ठ पर कोई भी लिंक एक छोटे तीर के साथ होगा, जिसकी छवि लिंक_अरो.पिंग फ़ाइल में संग्रहीत है।



लेकिन एक चौकस पाठक यह कहेगा कि शुद्ध सीएसएस का उपयोग करके ऐसा प्रभाव प्राप्त किया जा सकता है, वह यह भी नोटिस कर सकता है कि विकिपीडिया पृष्ठों पर केवल बाहरी लिंक ही तीर से चिह्नित हैं। यह शुद्ध सीएसएस का उपयोग करके सर्वर कोड के बिना प्राप्त नहीं किया जा सकता है (या कम से कम इस तरह के समाधान को खोजना मुश्किल है, विशेष रूप से क्रॉस-ब्राउज़र)। निम्नलिखित भागों में और अधिक जटिल चयन (बाहरी लिंक सहित) कैसे करें।

PS या भविष्य की योजना

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

लेखों का चक्र

• लेआउट डिजाइनर के लिए jQuery (भाग 1): लिंक के लिए तीर
  
  टाइप्टर के लिए jQuery (भाग 2): स्वादिष्ट मेनू