jQuery
दस्तावेज़-तैयार घटना

दस्तावेज़-तैयार क्या है और मुझे इसका उपयोग कैसे करना चाहिए?

jQuery कोड को अक्सर jQuery(function($) { ... }); में लपेटा जाता है jQuery(function($) { ... }); ताकि यह केवल डोम के लोडिंग समाप्त होने के बाद ही चले।

<script type="text/javascript"> 
  jQuery(function($) {
    // this will set the div's text to "Hello".
    $("#myDiv").text("Hello");
  });
</script>

<div id="myDiv">Text</div>

यह महत्वपूर्ण है क्योंकि jQuery (और जावास्क्रिप्ट आमतौर पर) एक DOM तत्व का चयन नहीं कर सकता है जिसे पेज पर प्रस्तुत नहीं किया गया है।

<script type="text/javascript">
  // no element with id="myDiv" exists at this point, so $("#myDiv") is an
  // empty selection, and this will have no effect
  $("#myDiv").text("Hello");
</script>

<div id="myDiv">Text</div>

नोट आप जो कर सकते हैं उर्फ में एक कस्टम हैंडलर पास करके jQuery नाम स्थान .ready() विधि। यह उन मामलों के लिए उपयोगी है जब एक अन्य जेएस लाइब्रेरी jQuery के रूप में उसी छोटे $ उर्फ का उपयोग कर रही है, जो एक संघर्ष पैदा करता है। इस संघर्ष से बचने के लिए, आपको $.noConflict(); कॉल करना होगा $.noConflict(); - यह आपको केवल डिफ़ॉल्ट jQuery के नाम स्थान (लघु $ उर्फ के बजाय) का उपयोग करने के लिए मजबूर करता है।
के लिए एक कस्टम हैंडलर पास करके .ready() हैंडलर, आप jQuery का उपयोग करने के अन्य नाम का चयन करने में सक्षम हो जाएगा।

$.noConflict();

jQuery( document ).ready(function( $ ) {
   // Here we can use '$' as jQuery alias without it conflicting with other 
   // libraries that use the same namespace 
   $('body').append('<div>Hello</div>')
});

jQuery( document ).ready(function( jq ) {
   // Here we use a custom jQuery alias 'jq' 
   jq('body').append('<div>Hello</div>')
});

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

jQuery 2.2.3 और पहले का

ये सभी समान हैं, दस्तावेज़ तैयार होने पर ब्लॉकों के अंदर का कोड चलेगा:

$(function() {
  // code
});

$().ready(function() {
  // code
});

$(document).ready(function() {
  // code
});

क्योंकि ये समतुल्य हैं पहला अनुशंसित रूप है, निम्नलिखित में से एक संस्करण है जो jQuery कीवर्ड के साथ $ बजाय एक ही परिणाम देता है:

jQuery(function() {
  // code
});

jQuery 3.0

नोटेशन

JQuery 3.0 के रूप में, केवल इस फॉर्म की सिफारिश की जाती है:

jQuery(function($) {
  // Run when document is ready
  // $ (first argument) will be internal reference to jQuery
  // Never rely on $ being a reference to jQuery in the global namespace
});

अन्य सभी दस्तावेज़-तैयार हैंडलर jQuery 3.0 में पदावनत हैं।

अतुल्यकालिक

JQuery 3.0 के रूप में, तैयार हैंडलर को हमेशा अतुल्यकालिक रूप से कहा जाएगा । इसका मतलब यह है कि नीचे दिए गए कोड में, लॉग 'हैंडलर' बाहर हमेशा प्रदर्शित किया जाएगा, भले ही दस्तावेज़ निष्पादन के बिंदु पर तैयार हो।

$(function() {
  console.log("inside handler");
});
console.log("outside handler");

> बाहर का हैंडलर
> हैंडलर के अंदर

$ (दस्तावेज़) के बीच अंतर। पहले से ही () और $ (खिड़की)। लोड () के लिए

$(window).load() jQuery के संस्करण 1.8 में पदावनत किया गया था (और पूरी तरह से jQuery 3.0 से हटा दिया गया था) और जैसे कि अब इसका उपयोग नहीं किया जाना चाहिए। इस घटना के बारे में jQuery के पृष्ठ पर पदावनति के कारणों को नोट किया गया है

छवियों के साथ उपयोग किए जाने पर लोड ईवेंट का कैविट्स

एक सामान्य चुनौती डेवलपर्स .load() शॉर्टकट का उपयोग करके हल करने का प्रयास करता है जब किसी छवि (या छवियों का संग्रह) को पूरी तरह से लोड किया जाता है। इसके साथ कई ज्ञात कैविएट हैं जिन्हें नोट किया जाना चाहिए। य़े हैं:

• यह लगातार और न ही मज़बूती से क्रॉस-ब्राउज़र काम नहीं करता है
• यह WebKit में सही तरीके से फायर नहीं करता है यदि छवि src पहले की तरह src सेट है
• यह डोम ट्री को सही ढंग से बबल नहीं देता है
• उन छवियों के लिए आग लगाना बंद कर सकता है जो पहले से ही ब्राउज़र के कैश में रहते हैं

यदि आप अभी भी load() का उपयोग करना चाहते हैं, तो यह नीचे दिया गया है:

$(document).ready() जब तक पूरा डोम उपलब्ध नहीं है, तब तक इंतजार करता है - HTML में सभी तत्व पार्स हो चुके हैं और डॉक्यूमेंट में हैं। हालाँकि, चित्र जैसे संसाधन इस बिंदु पर पूरी तरह से लोड नहीं हो सकते हैं। यदि सभी संसाधनों को लोड होने तक इंतजार करना महत्वपूर्ण है, तो $(window).load() और आप इस ईवेंट की महत्वपूर्ण सीमाओं से अवगत हैं, तो नीचे के बजाय इसका उपयोग किया जा सकता है:

$(document).ready(function() {
  console.log($("#my_large_image").height()); // may be 0 because the image isn't available
});

$(window).load(function() {
  console.log($("#my_large_image").height()); // will be correct
});

घटनाओं को संलग्न करना और डोम के अंदर हेरफेर करना ()

उदाहरण $(document).ready() का उपयोग करता है। पहले से ही $(document).ready() :

1. ईवेंट संचालकों को संलग्न करना
   JQuery ईवेंट हैंडलर संलग्न करें

$(document).ready(function() {
  $("button").click(function() {
    // Code for the click function
  });
});

2. पेज स्ट्रक्चर बनने के बाद jQuery कोड रन करें

jQuery(function($) {
// set the value of an element.
   $("#myElement").val("Hello");
});

3. लोड डोम संरचना में हेरफेर करें
   उदाहरण के लिए: एक छिपाने div जब पहली बार के लिए पृष्ठ लोड और एक बटन के क्लिक करें घटना पर यह दिखाने

$(document).ready(function() {
  $("#toggleDiv").hide();
  $("button").click(function() {
    $("#toggleDiv").show();
  });
});

JQuery (fn) और आपके कोड को निष्पादित करने से पहले अंतर

दस्तावेज़ के लिए तैयार घटना का उपयोग करने से छोटे प्रदर्शन में कमियां हो सकती हैं, जिसमें ~ 300ms तक की देरी से निष्पादन हो सकता है। कभी-कभी समान व्यवहार को बंद करने से ठीक पहले कोड के निष्पादन द्वारा प्राप्त किया जा सकता है </body> टैग:

<body>
  <span id="greeting"></span> world!
  <script>
    $("#greeting").text("Hello");
  </script>
</body>

इसी तरह के व्यवहार का उत्पादन करेंगे, लेकिन जितनी जल्दी हो सके उतना जल्दी प्रदर्शन के लिए दस्तावेज़ तैयार इवेंट ट्रिगर की प्रतीक्षा न करें:

<head>
  <script>
    jQuery(function($) {
      $("#greeting").text("Hello");
    });
  </script>
</head>
<body>
  <span id="greeting"></span> world!
</body>

इस तथ्य पर जोर कि पहले उदाहरण आपके पेज के ज्ञान पर निर्भर करता है और स्क्रिप्ट के स्थान को बंद करने से ठीक पहले </body> टैग और विशेष रूप से span टैग के बाद।