जावास्क्रिप्ट के साथ jQuery लोड करें और jQuery का उपयोग करें

Question 1

मैं jQuery लाइब्रेरी को डोम के साथ जोड़ रहा हूँ:

 var script = document.createElement('script');
 script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
 script.type = 'text/javascript';
 document.getElementsByTagName('head')[0].appendChild(script);

हालाँकि जब मैं दौड़ता हूँ:

jQuery(document).ready(function(){...

कंसोल त्रुटि की रिपोर्ट करता है:

Uncaught ReferenceError: jQuery is not defined

मैं डोम में एक बार गतिशील रूप से उपयोग करने के साथ-साथ jQuery को कैसे लोड करूं?

Question 2

यहाँ एक छोटा सा उदाहरण के साथ एक कामकाजी JSField है, जो वास्तव में वही दिख रहा है जो आप खोज रहे हैं (जब तक कि मैंने आपके अनुरोध को गलत नहीं समझा है) : http://jsfiddle.net/9N7Z2/188/

डायनामिक रूप से जावास्क्रिप्ट लोड करने की उस पद्धति के साथ कुछ समस्याएँ हैं। जब यह बहुत ही बेसल फ्रेमवर्क की बात आती है, तो jQuery की तरह, आप वास्तव में शायद उन्हें स्टेटिकली लोड करना चाहते हैं, क्योंकि अन्यथा, आपको पूरे जावास्क्रिप्ट लोडिंग फ्रेमवर्क को लिखना होगा ...

आप कुछ मौजूदा जावास्क्रिप्ट लोडर का उपयोग कर सकते हैं, या window.jQueryपरिभाषित करने के लिए देख कर अपना स्वयं का लिख सकते हैं ।

// Immediately-invoked function expression
(function() {
    // Load the script
    var script = document.createElement("SCRIPT");
    script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
    script.type = 'text/javascript';
    script.onload = function() {
        var $ = window.jQuery;
        // Use $ here...
    };
    document.getElementsByTagName("head")[0].appendChild(script);
})();

बस याद रखें कि यदि आपको वास्तव में पुराने ब्राउज़रों का समर्थन करने की आवश्यकता है, जैसे IE8, loadइवेंट हैंडलर निष्पादित नहीं करते हैं। उस स्थिति में, आपको window.jQueryबार-बार उपयोग करने की मौजूदगी के लिए चुनाव करने की आवश्यकता होगी window.setTimeout। यहाँ उस विधि के साथ एक कार्यशील JSFiddle है: http://jsfiddle.net/9N7Z2/3/

बहुत सारे लोग ऐसे हैं जो पहले ही कर चुके हैं जो आपको करने की आवश्यकता है। मौजूदा जावास्क्रिप्ट लोडर ढांचे में से कुछ की जाँच करें, जैसे:

~~https://developers.google.com/loader/~~ (अब प्रलेखित नहीं)
~~http://yepnopejs.com/~~ (पदावनत)
http://requirejs.org/

Question 3

JQuery को गतिशील रूप से लोड करने का एक और तरीका है ( स्रोत )। आप भी इस्तेमाल कर सकते हैं

document.write('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><\/script>');

इसे उपयोग करने के लिए बुरा अभ्यास माना जाता है document.write, लेकिन पूरा होने के लिए इसका उल्लेख करना अच्छा है।

देखें कि डॉक्यूमेंट क्यों लिखा गया है? कारणों के लिए। समर्थक है कि है document.writeतो उसे कॉलबैक फ़ंक्शन बनाने के लिए कोई जरूरत नहीं है, अन्य assests लोड करने से आपके पेज को ब्लॉक करता है।

Question 4

एनकोसिया की वेबसाइट सुझाती है:

<script type="text/javascript" 
        src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  // You may specify partial version numbers, such as "1" or "1.3",
  //  with the same result. Doing so will automatically load the 
  //  latest version matching that partial revision pattern 
  //  (e.g. 1.3 would load 1.3.2 today and 1 would load 1.7.2).
  google.load("jquery", "1.7.2");

  google.setOnLoadCallback(function() {
    // Place init code here instead of $(document).ready()
  });
</script>

लेकिन यहां तक कि वह स्वीकार करते हैं कि यह सिर्फ निम्नलिखित प्रदर्शन करने की तुलना नहीं करता है जब यह इष्टतम प्रदर्शन के लिए आता है:

    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript"> window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js">\x3C/script>')</script>
    <script type="text/javascript" src="scripts.js"></scripts>
</body>
</html>

Question 5

आपको अपना कोड AFTER jQuery समाप्त लोड करने के लिए चलाने की आवश्यकता है

var script = document.createElement('script'); 
document.head.appendChild(script);    
script.type = 'text/javascript';
script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js";
script.onload = function(){
    // your jQuery code here
}

या यदि आप इसे एक async फ़ंक्शन में चला रहे हैं तो आप awaitउपरोक्त कोड में उपयोग कर सकते हैं

var script = document.createElement('script'); 
document.head.appendChild(script);    
script.type = 'text/javascript';
script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js";
await script.onload
// your jQuery code here

यदि आप पहले चेक करना चाहते हैं कि क्या jQuery पहले से ही पेज में मौजूद है, तो यह प्रयास करें

Question 6

आपके द्वारा यह त्रुटि प्राप्त करने का कारण यह है कि जावास्क्रिप्ट स्क्रिप्ट के लोड होने की प्रतीक्षा नहीं कर रहा है, इसलिए जब आप चलते हैं

jQuery(document).ready(function(){...

इस बात की कोई गारंटी नहीं है कि स्क्रिप्ट तैयार है (और कभी नहीं होगी)।

यह सबसे सुंदर समाधान नहीं है, लेकिन इसके व्यावहारिक है। अनिवार्य रूप से आप jQuery ऑब्जेक्ट विज्ञापन चलाने के लिए हर 1 सेकंड की जाँच कर सकते हैं जब इसके कोड में लोड होता है। मैं एक टाइमआउट (20 बार चलाने के बाद क्लियरटाइम) कहता हूं कि चेक को अनिश्चित काल तक रोकने के लिए।

var jQueryIsReady = function(){
    //Your JQuery code here
}

var checkJquery = function(){
    if(typeof jQuery === "undefined"){
        return false;
    }else{
        clearTimeout(interval);
        jQueryIsReady();
    }
}
var interval = setInterval(checkJquery,1000);

Question 7

आवश्यकता का उपयोग करते हुए। यदि आप एक ही काम को सुरक्षित तरीके से कर सकते हैं। आप सिर्फ jquery पर अपनी निर्भरता को परिभाषित कर सकते हैं और फिर उस कोड को निष्पादित कर सकते हैं जिसे आप निर्भरता का उपयोग करना चाहते हैं जब यह नामस्थान को प्रदूषित किए बिना लोड किया जाता है:

मैं आमतौर पर जावास्क्रिप्ट पर सभी निर्भरता के प्रबंधन के लिए इस पुस्तकालय की सिफारिश करता हूं। यह सरल है और संसाधन लोडिंग के कुशल अनुकूलन के लिए अनुमति देता है। हालांकि JQuery के साथ इसका उपयोग करते समय आपको कुछ सावधानियां बरतनी पड़ सकती हैं। उनसे निपटने का मेरा पसंदीदा तरीका इस गीथब रेपो में बताया गया है और निम्नलिखित कोड नमूने द्वारा परिलक्षित होता है:

<title>jQuery+RequireJS Sample Page</title>
   <script src="scripts/require.js"></script>
   <script>
   require({
       baseUrl: 'scripts',
       paths: {
           jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min'
       },
       priority: ['jquery']
    }, ['main']);
    </script>

Question 8

HTML:

<html>
  <head>

  </head>
  <body>

    <div id='status'>jQuery is not loaded yet.</div>
    <input type='button' value='Click here to load it.' onclick='load()' />

  </body>
</html>

स्क्रिप्ट:

   <script>

        load = function() {
          load.getScript("jquery-1.7.2.js");
          load.tryReady(0); // We will write this function later. It's responsible for waiting until jQuery loads before using it.
        }

        // dynamically load any javascript file.
        load.getScript = function(filename) {
          var script = document.createElement('script')
          script.setAttribute("type","text/javascript")
          script.setAttribute("src", filename)
          if (typeof script!="undefined")
          document.getElementsByTagName("head")[0].appendChild(script)
        }

        </script>

Question 9

से DevTools कंसोल, आप चला सकते हैं:

document.getElementsByTagName("head")[0].innerHTML += '<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"><\/script>';

उपलब्ध jQuery संस्करण की जाँच करें https://code.jquery.com/jquery/ पर ।

यह लोड किया गया है या नहीं यह देखने के लिए, देखें: जावास्क्रिप्ट का उपयोग करके यदि जक्वेरी लोड की गई है या नहीं ।