मुझे jQuery के डॉक्यूमेंट का उपयोग कब करना चाहिए।

107

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

हो सकता है कि जब javascript / jquery कोड को jQuery के अंदर लपेटने की समझ हो, तब कोई व्यक्ति कुछ बुनियादी दिशा-निर्देश प्रदान कर सकता है document.ready?

कुछ विषयों में मेरी रुचि है:

jQuery की .on()विधि: मैं .on()AJAX के लिए विधि का थोड़ा बहुत उपयोग करता हूं (आमतौर पर गतिशील रूप से निर्मित DOM तत्वों पर)। क्या .on()क्लिक हैंडलर हमेशा अंदर होना चाहिए document.ready?
प्रदर्शन: क्या यह विभिन्न जावास्क्रिप्ट / jQuery वस्तुओं को दस्तावेज़ के अंदर या बाहर रखने के लिए अधिक प्रदर्शन योग्य है। पहले से ही (प्रदर्शन अंतर महत्वपूर्ण है?)।
ऑब्जेक्ट स्कोप: AJAX- लोड किए गए पेज उन वस्तुओं तक नहीं पहुँच सकते जो पहले पेज के डॉक्यूमेंट के अंदर थे । वे केवल उन वस्तुओं तक पहुंच सकते हैं जो दस्तावेज़ के बाहर थे। पहले से ही (यानी, वास्तव में "वैश्विक" वस्तुएं)?

अपडेट: एक सर्वोत्तम अभ्यास का पालन करने के लिए, मेरे सभी जावास्क्रिप्ट (jQuery लाइब्रेरी और मेरे ऐप का कोड) मेरे HTML पेज के निचले भाग पर है और मैं deferअपने AJAX से लोड किए गए पृष्ठों पर jQuery युक्त स्क्रिप्ट पर विशेषता का उपयोग कर रहा हूं ताकि मैं इन पृष्ठों पर jQuery पुस्तकालय का उपयोग कर सकते हैं।

— टिम पीटरसन
स्रोत

2

क्योंकि यदि DOM तैयार नहीं है, तो आपको अप्रत्याशित परिणाम मिल सकते हैं।

— रॉबर्ट हार्वे

1

2.- वैसे मैं सिर्फ डिबग करने के लिए बाहर का उपयोग करता हूं और कंसोल द्वारा कुछ

— वर्जन

@RobertHarvey किस तरह का "अप्रत्याशित" परिणाम है? क्या आप एक उदाहरण प्रदान कर सकते हैं?

— टिम पीटरसन

3

आप किसी ऐसे तत्व या विशेषता को संशोधित करने का प्रयास करते हैं जिसने इसे अभी तक DOM के लिए नहीं बनाया है।

— रॉबर्ट हार्वे

143

सरल शब्दों में,

$(document).readyएक ऐसी घटना है जो documentतैयार होने पर भड़क उठती है।

मान लीजिए कि आपने अपना jQuery कोड headअनुभाग में रखा है और किसी domतत्व (एंकर, एक img आदि) तक पहुंचने की कोशिश कर रहे हैं , तो आप इसे एक्सेस नहीं कर पाएंगे क्योंकि htmlऊपर से नीचे तक व्याख्या की गई है और जब आपका jQuery कोड होगा तो आपके html तत्व मौजूद नहीं होंगे। रन।

इस समस्या को दूर करने के लिए, हम हर jQuery / javascript कोड (जो DOM का उपयोग करता है) को $(document).readyफंक्शन के अंदर रखते हैं, जिसे तब बुलाया जाता है जब सभी domतत्वों को एक्सेस किया जा सकता है।

और यही कारण है, जब आप अपना jQuery कोड सबसे नीचे (सभी डोम तत्वों के बाद, ठीक पहले </body>) डालते हैं , तो इसकी कोई आवश्यकता नहीं है$(document).ready

केवल तभी onविधि की आवश्यकता नहीं है $(document).readyजब आप onविधि का उपयोग documentउसी कारण से करते हैं जो मैंने ऊपर बताया था।

    //No need to be put inside $(document).ready
    $(document).on('click','a',function () {
    })

    // Need to be put inside $(document).ready if placed inside <head></head>
    $('.container').on('click','a',function () {
    });

संपादित करें

टिप्पणियों से,

$(document).readyछवियों या लिपियों की प्रतीक्षा नहीं करता। के बीच बड़ा अंतर है $(document).readyऔर$(document).load
केवल कोड जो DOM तक पहुंचता है वह तैयार हैंडलर में होना चाहिए। यदि यह एक प्लगइन है, तो यह तैयार घटना में नहीं होना चाहिए।

— Jashwant
स्रोत

@Dipaks हाँ, क्यों नहीं? हम सिर्फ उपयोग करने के लिए उपयोग किए जाते हैं $(document).ready। देखें इस

— Jashwant

जब तक आप jQuery को लोड करते हैं headऔर तत्वों के हेरफेर के बाद आप स्क्रिप्ट हैं, तब तक document.readyइसकी आवश्यकता नहीं है। छवियाँ हालांकि एक विशेष मामला है ...

— elclanrs

@elclanrs मेरा अद्यतन प्रश्न देखें। मैं अपने HTML पृष्ठ के निचले भाग में jQuery लोड कर रहा हूं, उसके बाद अपने ऐप-विशिष्ट कोड के साथ।

— टिम पीटरसन

@ जशवंत, डोमेस्टिक बनाम प्रदर्शन के अंतर के बारे में कैसे नहीं? क्या वे प्रासंगिक हैं?

— टिम पीटरसन

1

हम jQueryतैयार हैंडलर में सभी कोड नहीं डालते हैं । केवल वह कोड जो DOM तक पहुँचता है। यदि यह एक प्लगइन है, तो यह ready घटना में नहीं होना चाहिए

— जुआन मेंडेस

7

उत्तर:

jQuery का .on () विधि: मैं AJAX के लिए .on () विधि का उपयोग काफी कम (गतिशील रूप से DOM तत्वों को बनाने के लिए) करता हूं। क्या .on () क्लिक हैंडलर हमेशा दस्तावेज़ के अंदर होना चाहिए?

नहीं, हमेशा नहीं। यदि आप अपने जेएस को दस्तावेज़ के प्रमुख में लोड करते हैं तो आपको इसकी आवश्यकता होगी। यदि आप AJAX के माध्यम से पृष्ठ लोड होने के बाद तत्व बना रहे हैं, तो आपको इसकी आवश्यकता होगी। यदि स्क्रिप्ट html तत्व के नीचे है तो आप हैंडलर जोड़ रहे हैं, तो आपको इसकी आवश्यकता नहीं होगी।

प्रदर्शन: क्या यह विभिन्न जावास्क्रिप्ट / jQuery वस्तुओं को दस्तावेज़ के अंदर या बाहर रखने के लिए अधिक प्रदर्शन योग्य है। पहले से ही (क्या प्रदर्शन अंतर महत्वपूर्ण है?)।

निर्भर करता है। हैंडलर को संलग्न करने में उतना ही समय लगेगा, यह सिर्फ इस बात पर निर्भर करता है कि क्या आप चाहते हैं कि यह तुरंत हो जाए क्योंकि पेज लोड हो रहा है या यदि आप चाहते हैं कि जब तक यह पूरा डॉक लोड न हो जाए, तब तक प्रतीक्षा करें। तो यह इस बात पर निर्भर करेगा कि आप पृष्ठ पर क्या कर रहे हैं।

ऑब्जेक्ट स्कोप: AJAX- लोड किए गए पेज उन वस्तुओं तक नहीं पहुँच सकते जो पहले पेज के डॉक्यूमेंट के अंदर थे। वे केवल उन वस्तुओं तक पहुंच सकते हैं जो दस्तावेज़ के बाहर थे। पहले से ही (यानी, वास्तव में "वैश्विक" वस्तुएं)?

यह अनिवार्य रूप से स्वयं का कार्य है, इसलिए यह केवल वैश्विक दायरे (सभी कार्यों के ऊपर / ऊपर) या इसके साथ घोषित किए गए संस्करणों तक पहुंच सकता है window.myvarname = '';

— जस्टिन
स्रोत

6

इससे पहले कि आप सुरक्षित रूप से jQuery का उपयोग कर सकें, आपको यह सुनिश्चित करने की आवश्यकता है कि पृष्ठ उस स्थिति में है जहां यह हेरफेर करने के लिए तैयार है। JQuery के साथ, हम एक फ़ंक्शन में अपना कोड डालकर इसे पूरा करते हैं, और फिर उस फ़ंक्शन को पास करते हैं $(document).ready()। जिस फ़ंक्शन को हम पास करते हैं वह केवल एक अनाम फ़ंक्शन हो सकता है ।

$(document).ready(function() {  
    console.log('ready!');  
});

डॉक्यूमेंट तैयार होने के बाद हम पहले से ही () पास होने वाले फंक्शन को चलाएंगे। यहाँ क्या चल रहा है? हम अपने पृष्ठ के दस्तावेज़ से एक jQuery ऑब्जेक्ट बनाने के लिए $ (दस्तावेज़) का उपयोग कर रहे हैं, और फिर उस ऑब्जेक्ट पर पहले से ही () फ़ंक्शन को कॉल कर रहे हैं, यह उस फ़ंक्शन को पारित कर रहा है जिसे हम निष्पादित करना चाहते हैं।

चूंकि यह ऐसा कुछ है जो आप खुद को बहुत कुछ करते हुए पाएंगे, इसके लिए एक आशुलिपि विधि है यदि आप पसंद करते हैं - $ () फ़ंक्शन $ (दस्तावेज़) के लिए एक उपनाम के रूप में डबल ड्यूटी करता है। () यदि आप इसे एक फ़ंक्शन पास करते हैं:

$(function() {  
    console.log('ready!');  
});

यह एक अच्छी रीडिंग है: जेकरी फंडामेंटल्स

— टॉम सरदयू
स्रोत

3

भ्रमित न होने के लिए (function($){ })(jQuery);जो आपके कोड को लपेटता है ताकि $ उस बंद के अंदर jQuery हो

— जॉन मैग्नोलिया

3

। पहले से ही () - डोम को पूरी तरह से लोड होने पर निष्पादित करने के लिए एक फ़ंक्शन निर्दिष्ट करें।

$(document).ready(function() {
  // Handler for .ready() called.
});

यहाँ सभी jQuery के तरीकों की एक सूची है

परिचय $ (दस्तावेज़) पर पढ़ें । पहले से ही ()

— दीपक
स्रोत

3

वास्तविक होने के document.readyलिए, DOM को सही तरीके से हेरफेर करने के अलावा और किसी चीज़ की ज़रूरत नहीं है और इसकी हमेशा ज़रूरत या सबसे अच्छा विकल्प नहीं है। मेरे कहने का मतलब यह है कि जब आप एक बड़े jQuery प्लगइन का विकास करते हैं, उदाहरण के लिए, तो शायद ही आप इसे पूरे कोड में उपयोग करते हैं क्योंकि आप इसे DRY रखने की कोशिश कर रहे हैं, इसलिए आप जितना संभव हो उतना अमूर्त करें जो DOM में हेरफेर करते हैं, लेकिन इनवॉइस करने के लिए हैं बाद में। जब आपके सभी कोड को कसकर एकीकृत किया जाता है, तो केवल वही तरीका सामने आता है document.ready, initजहां आमतौर पर सभी DOM मैजिक होता है। उम्मीद है कि यह आपके प्रश्न का उत्तर देगा।

— elclanrs
स्रोत

0

आपको डॉक्यूमेंट पूरी तरह से लोड होने तक इंतजार करना चाहिए, क्योंकि आपको डॉक्यूमेंट के पहले से ही सभी दस्तावेज बांधने चाहिए।

लेकिन, आपको सभी कार्यों के लिए फ़ंक्शंस बनाने चाहिए और उन्हें डॉक्यूमेंट के भीतर से कॉल करना चाहिए। जब आप फ़ंक्शंस (अपनी वैश्विक ऑब्जेक्ट्स) बनाते हैं, तो उन्हें जब चाहें कॉल करें। इसलिए एक बार जब आपका नया डेटा लोड हो जाता है और नए तत्व बन जाते हैं, तो उन कार्यों को फिर से कॉल करें।

ये फ़ंक्शन वे हैं जहां आपने ईवेंट और एक्शन आइटम को बाउंड किया है।

$(document).ready(function(){
bindelement1();
bindelement2();
});

function bindelement1(){
$('el1').on('click',function...);
//you might make an ajax call here, then under complete of the AJAX, call this function or any other function again
}

function bindelement2(){
$('el2').on('click',function...);
}

— पुलकित मित्तल
स्रोत

0

मैंने एक डिव का लिंक जोड़ा और क्लिक पर कुछ कार्य करना चाहता था। मैंने DOM में एपेंडेड एलिमेंट के नीचे कोड जोड़ा है लेकिन यह काम नहीं किया। यहाँ कोड है:

<div id="advance-search">
   Some other DOM elements
   <!-- Here I wanted to apppend the link as <a href="javascript:;" id="reset-adv-srch"><span class="bold">x</span> Clear all</a>-->
</div>

<script>
  $("#advance-search #reset-adv-srch").on("click", function (){
     alert('Link Clicked');``
  });
</script>

काम नहीं किया। तब मैंने $ (दस्तावेज) के अंदर jQuery कोड रखा। पहले से ही और यह पूरी तरह से काम किया। यही पर है।

$(document).ready(function(e) {
    $("#advance-search #reset-adv-srch").on("click", function (){
        alert('Link Clicked');
    });
});

— सुरक्षित अहमद
स्रोत

-2

वह तैयार घटना तब होती है जब DOM (दस्तावेज़ ऑब्जेक्ट मॉडल) लोड किया गया है।

क्योंकि यह घटना दस्तावेज़ तैयार होने के बाद होती है, यह अन्य jQuery की घटनाओं और कार्यों के लिए एक अच्छी जगह है। जैसे ऊपर के उदाहरण में।

तैयार () विधि निर्दिष्ट करती है कि क्या होता है जब एक तैयार घटना होती है।

युक्ति: तैयार () विधि का एक साथ उपयोग नहीं किया जाना चाहिए।

— श्रीकांत शेडदार
स्रोत