5 बातें जो आप jQuery के बारे में नहीं जानते होंगे

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



1) आपको $ (दस्तावेज़) का उपयोग करने की आवश्यकता नहीं है। पहले से ही () यदि आप किसी फ़ंक्शन को निष्पादित करना चाहते हैं जब दस्तावेज़ हेरफेर के लिए तैयार है तो इसे केवल $ () में पास करें



2) आप शायद पहले से ही जानते हैं कि आप इस प्रकार का एक तत्व बनाने के लिए टैग को $ () फ़ंक्शन में पास कर सकते हैं और आप ऑब्जेक्ट की विशेषताओं को पास कर सकते हैं (दूसरे तर्क के रूप में) जो कि बनाए गए तत्व पर सेट हो जाएगा। दूसरा तर्क किसी भी संपत्ति हो सकता है जिसे आप attr () विधि से पास करते हैं। इसके अलावा, यदि किसी संपत्ति का नाम (क्लिक, माउसओवर) के समान नाम है, तो संपत्ति का मूल्य इस घटना के लिए हैंडलर के कार्य के रूप में उपयोग किया जाता है।

निम्न कोड, उदाहरण के लिए, एक नया तत्व बनाता है, तीन HTML विशेषताएँ सेट करता है और उस पर एक ईवेंट हैंडलर (क्लिक) फ़ंक्शन रजिस्टर करता है:

var image = $("<img>", { src: image_url, alt: image_description, className: "translucent_image", click: function() {$(this).css("opacity", "50%");} });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

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

किसी ईवेंट हैंडलर को नेमस्पेस में बाँधने के लिए, ईवेंट नाम और हैंडलर के नामस्थान का उपयोग करें:

 //  f    mouseover    "myMod" $('a').bind('mouseover.myMod', f);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यदि आपके मॉड्यूल ने नेमस्पेस के उपयोग से सभी ईवेंट्स को लॉग इन किया है, तो आप आसानी से उन सभी का उपयोग कर सकते हैं जो unbind ():

 //     mouseover, mouseout //    "myMod" $('a').unbind("mouseover.myMod mouseout.myMod"); //        myMod $('a').unbind(".myMod");
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

4) jQuery में सरल एनीमेशन विधियाँ हैं जैसे कि fadeIn (), और इसमें सामान्य-उद्देश्य एनीमेशन विधि चेतन () भी शामिल है। विकल्प ऑब्जेक्ट की कतार गुण जिसे आप चेतन करने के लिए सबमिट करते हैं () निर्धारित करता है कि क्या अनुसूचित एनीमेशन तब तक विलंबित हो जाएगा जब तक कि पिछले सभी एनिमेशन पूरा नहीं हो जाते। डिफ़ॉल्ट रूप से, एनिमेशन को बदले में कहा जाता है, लेकिन आप कतार की संपत्ति को गलत पर सेट करके इसे अक्षम कर सकते हैं। आउट ऑफ टर्न एनिमेशन तुरंत शुरू होते हैं।

इसके बाद की एनिमेशन कतारों में गैर-कतई एनिमेशन के लिए देरी नहीं होगी। निम्नलिखित कोड पर विचार करें:

 $("img").fadeIn(500) .animate({"width":"+=100"}, {queue:false, duration:1000}) .fadeOut(500);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

प्रभाव fadeIn () और fadeOut () में एक कतार है, और हमने एक कतार के बिना चेतन () विधि (जो 1 सेकंड के लिए चौड़ाई गुण को एनिमेट करता है) को कॉल किया। ऑब्जेक्ट की चौड़ाई एनीमेशन fadeIn () के रूप में एक ही समय में शुरू होती है। FadeOut () प्रभाव fadeIn () प्रभाव समाप्त होते ही शुरू हो जाएगा



5) jQuery "अजाक्सस्टार्ट" और "अजाक्सटॉप" घटनाओं को शुरू करता है जो अजाक्स नेटवर्क गतिविधि की शुरुआत और समाप्ति को इंगित करता है। जब jQuery किसी भी अजाक्स अनुरोध को निष्पादित नहीं करता है और एक नया अनुरोध आरंभ होता है, तो jQuery "ajaxStart" घटना को बढ़ाता है। यदि नए अनुरोधों को कॉल किया जाता है, लेकिन वर्तमान अनुरोध पूरा नहीं हुआ है, तो ajaxStart ईवेंट को नहीं उठाया गया है। AjaxStop इवेंट को तब निकाल दिया जाता है जब पिछले लंबित अजाक्स अनुरोध पूरा हो गया है और jQuery अब नेटवर्क गतिविधि नहीं दिखा रहा है।

"लोड हो रहा है ..." एनीमेशन या नेटवर्क गतिविधि आइकन दिखाने / छिपाने के लिए इन घटनाओं में से कुछ उपयोगी हो सकता है। उदाहरण के लिए:

 $("#loading_animation").bind({ ajaxStart: function() { $(this).show(); }, ajaxStop: function() { $(this).hide(); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

इन 2 घटनाओं "ajaxStart" और "ajaxStop" को पृष्ठ के किसी भी तत्व से जोड़ा जा सकता है। jQuery उन्हें विश्व स्तर पर कहता है।



मुझे एक अनुवादक से 2/5 पता नहीं था, हालांकि मैं नियमित रूप से jQuery रिलीज़ (ajaxStart / ajaxStop बंडल विशेष रूप से प्रसन्न था) का पालन करता हूं, मुझे लगता है कि यह इस पुस्तक को सभी को पढ़ने के बाद लायक है। आप अन्य कौन सी सुविधाएँ जोड़ सकते हैं?