jQuery ट्यूटोरियल
JQuery के साथ आरंभ करना

AngularJS ASP.NET asp.net-mvc C# Language CSS HTML JavaScript PHP Ruby on Rails twitter-bootstrap

टिप्पणियों

jQuery एक जावास्क्रिप्ट लाइब्रेरी है जो DOM ऑपरेशंस, इवेंट हैंडलिंग, AJAX और एनिमेशन को सरल बनाता है। यह अंतर्निहित DOM और जावास्क्रिप्ट इंजन में कई ब्राउज़र संगतता मुद्दों का भी ध्यान रखता है।

JQuery के प्रत्येक संस्करण को https://code.jquery.com/jquery/ से संपीड़ित (छोटा) और असम्पीडित दोनों स्वरूपों में डाउनलोड किया जा सकता है।

संस्करण

संस्करण	टिप्पणियाँ	रिलीज़ की तारीख
1.0	पहली स्थिर रिलीज	2006/08/26
1.1		2007/01/14
1.2		2007-09-10
1.3	Sizzle कोर में पेश किया	2009/01/14
1.4		2010-01-14
1.5	आस्थगित कॉलबैक प्रबंधन, अजाक्स मॉड्यूल फिर से लिखना	2011-01-31
1.6	`attr()` और `val()` विधियों में महत्वपूर्ण प्रदर्शन लाभ	2011-05-03
1.7	नई ईवेंट एपीआई: `on()` और `off()` ।	2011-11-03
1.8	Sizzle ने फिर से लिखा, सुधार एनिमेशन और `$(html, props)` लचीलापन।	2012-08-09
1.9	हटाए गए इंटरफेस और कोड क्लीनअप को हटाना	2013-01-15
1.10	बग फिक्स और अंतर दोनों 1.9 और 2.0 बीटा चक्र से रिपोर्ट किए गए	2013-05-24
1.11		2014-01-24
1.12		2016/01/08
2.0	प्रदर्शन में सुधार और आकार में कमी के लिए IE 6–8 समर्थन को गिरा दिया	2013-04-18
2.1		2014-01-24
2.2		2016/01/08
3.0	कुछ jQuery कस्टम चयनकर्ताओं के लिए बड़े पैमाने पर स्पीडअप	2016/06/09
3.1	नो मोर साइलेंट एरर्स	2016/07/07

jQuery के नामस्थान ("jQuery" और "$")

jQuery किसी भी jQuery कोड को लिखने के लिए शुरुआती बिंदु है। यह एक फ़ंक्शन jQuery(...) या एक चर jQuery.foo रूप में उपयोग किया जा सकता है।

$ jQuery लिए एक उपनाम है और दोनों को आमतौर पर एक दूसरे के लिए बदल दिया जा सकता है (जहां jQuery.noConflict(); को छोड़कर jQuery.noConflict(); का उपयोग किया गया है - देखें नाम स्थान टकराव से बचें )।

मान लें कि हमारे पास HTML का यह स्निपेट है -

<div id="demo_div" class="demo"></div>

हम इस div में कुछ पाठ सामग्री जोड़ने के लिए jQuery का उपयोग करना चाह सकते हैं। ऐसा करने के लिए हम jQuery text() फ़ंक्शन का उपयोग कर सकते हैं। यह jQuery या $ का उपयोग करके लिखा जा सकता है। अर्थात -

jQuery("#demo_div").text("Demo Text!");

या -

$("#demo_div").text("Demo Text!");

दोनों एक ही अंतिम HTML में परिणाम होगा -

<div id="demo_div" class="demo">Demo Text!</div>

चूंकि jQuery तुलना में $ अधिक संक्षिप्त है, यह आमतौर पर jQuery कोड लिखने का पसंदीदा तरीका है।

jQuery CSS चयनकर्ताओं का उपयोग करता है और एक ID चयनकर्ता के ऊपर के उदाहरण में उपयोग किया गया था। JQuery में चयनकर्ताओं के बारे में अधिक जानकारी के लिए चयनकर्ताओं के प्रकार देखें।

शुरू करना

निम्नलिखित सामग्री के साथ एक फ़ाइल hello.html बनाएँ:

<!DOCTYPE html>
<html>
<head>
    <title>Hello, World!</title>
</head>
<body>
    <div>
        <p id="hello">Some random text</p>
    </div>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#hello').text('Hello, World!');
        });
    </script>
</body>
</html>

JSBin पर लाइव डेमो

इस फाइल को वेब ब्राउजर में खोलें। परिणामस्वरूप आप पाठ के साथ एक पेज देखेंगे: Hello, World!

कोड की व्याख्या

JQuery CDN से jQuery लाइब्रेरी लोड करता है:
```
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
```
यह $ वैश्विक चर, jQuery फ़ंक्शन और नामस्थान के लिए एक उपनाम का परिचय देता है।
ज्ञात हो कि jQuery सहित सबसे आम गलतियों में से एक पुस्तकालय को लोड करने में विफल रहा है किसी भी अन्य लिपियों या पुस्तकालयों पर निर्भर हो सकता है जो इसका उपयोग कर सकते हैं या इसका उपयोग कर सकते हैं।

जब jQuery द्वारा DOM ( डॉक्यूमेंट ऑब्जेक्ट मॉडल ) "तैयार" होने का पता चला है, तो किसी फंक्शन को निष्पादित किया जाएगा:
```
// When the `document` is `ready`, execute this function `...`
$(document).ready(function() { ... });
 
// A commonly used shorthand version (behaves the same as the above)
$(function() { ... });
```

एक बार DOM तैयार होने के बाद, jQuery ऊपर दिखाए गए कॉलबैक फ़ंक्शन को निष्पादित करता है। हमारे फ़ंक्शन के अंदर, केवल एक कॉल है जो 2 मुख्य चीजें करता है:
1. id विशेषता के साथ तत्व को हो जाता है, जो hello (हमारे चयनकर्ता #hello ) के बराबर है। चयनित तर्क के रूप में चयनकर्ता का उपयोग करना jQuery की कार्यक्षमता और नामकरण का मूल है; संपूर्ण पुस्तकालय अनिवार्य रूप से दस्तावेज का विस्तार करने से विकसित हुआ ^{।querySelectorAll MDN} ।
2. Hello, World! लिए चयनित तत्व के अंदर text() सेट करें Hello, World! ।
```
#    ↓ - Pass a `selector` to `$` jQuery, returns our element
$('#hello').text('Hello, World!');
#             ↑ - Set the Text on the element
```

अधिक jQuery के लिए - प्रलेखन पृष्ठ।

HTML पेज के सिर में स्क्रिप्ट टैग शामिल करें

आधिकारिक सीडीएन से jQuery लोड करने के लिए, jQuery वेबसाइट पर जाएं । आपको उपलब्ध विभिन्न संस्करणों और प्रारूपों की एक सूची दिखाई देगी।

अब, jQuery के संस्करण के स्रोत को कॉपी करें, जिसे आप लोड करना चाहते हैं। मान लीजिए, आप jQuery 2.X लोड करने के लिए, असंपीड़ित या न्यूनतम किया गया टैग जो आप कुछ इस तरह दिखाई देगा क्लिक करें:

पूरा कोड कॉपी करें (या कॉपी आइकन पर क्लिक करें) और इसे अपने HTML के <head> या <body> में पेस्ट करें।

सबसे अच्छा अभ्यास किसी भी बाहरी जावास्क्रिप्ट पुस्तकालयों को async विशेषता के साथ हेड टैग पर लोड करना है। यहाँ एक प्रदर्शन है:

<!DOCTYPE html>
    <html>
      <head>
         <title>Loading jquery-2.2.4</title>
         <script src="https://code.jquery.com/jquery-2.2.4.min.js" async></script>
      </head>
      <body>
          <p>This page is loaded with jquery.</p>
      </body>
   </html>

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

नाम स्थान टकराव से बचना

JQuery के अलावा अन्य पुस्तकालय भी एक उपनाम के रूप में $ उपयोग कर सकते हैं। यह उन पुस्तकालयों और jQuery के बीच हस्तक्षेप का कारण बन सकता है।

अन्य पुस्तकालयों के साथ उपयोग के लिए $ जारी करना:

jQuery.noConflict();

इस फ़ंक्शन को कॉल करने के बाद, $ अब jQuery लिए एक उपनाम नहीं है। हालाँकि, आप अभी भी चर jQuery का उपयोग jQuery कार्यों का उपयोग करने के लिए कर सकते हैं:

jQuery('#hello').text('Hello, World!');

वैकल्पिक रूप से, आप jQuery के लिए उपनाम के रूप में एक अलग चर असाइन कर सकते हैं:

var jqy = jQuery.noConflict();
jqy('#hello').text('Hello, World!');

इसके विपरीत, अन्य पुस्तकालयों को jQuery के साथ हस्तक्षेप करने से रोकने के लिए, आप अपने jQuery कोड को तुरंत लागू फ़ंक्शन अभिव्यक्ति (IIFE) में लपेट सकते हैं और तर्क के रूप में jQuery में पास कर सकते हैं:

(function($) {
    $(document).ready(function() {
        $('#hello').text('Hello, World!');
    });
})(jQuery);

इस IIFE के अंदर, $ केवल jQuery के लिए एक उपनाम है।

JQuery के $ उर्फ को सुरक्षित करने के लिए एक और सरल तरीका और सुनिश्चित करें कि DOM तैयार है :

jQuery(function( $ ) { // DOM is ready
   // You're now free to use $ alias
   $('#hello').text('Hello, World!');
});

संक्षेप में,

jQuery.noConflict() : $ jQuery को संदर्भित नहीं करता है, जबकि चर jQuery करता है।
var jQuery2 = jQuery.noConflict() - $ अब jQuery को संदर्भित नहीं करता है, जबकि चर jQuery करता है और इसलिए चर jQuery2 करता है।

अब, एक तीसरा परिदृश्य मौजूद है - क्या होगा यदि हम चाहते हैं कि jQuery केवल jQuery2 में उपलब्ध हो? उपयोग,

var jQuery2 = jQuery.noConflict(true)

यह jQuery जिक्र न तो $ और न ही jQuery में होता है।

यह उपयोगी है जब jQuery के कई संस्करणों को एक ही पृष्ठ पर लोड किया जाना है।

<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
<script>
    var jQuery1 = jQuery.noConflict(true);
</script>
<script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
<script>
    // Here, jQuery1 refers to jQuery 1.12.4 while, $ and jQuery refers to jQuery 3.1.0.
</script>

https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

एक पृष्ठ पर कंसोल के माध्यम से jQuery लोड हो रहा है जिसमें यह नहीं है।

कभी कभी एक पृष्ठ जो उपयोग नहीं कर रहे साथ काम करने के लिए है jQuery , जबकि सबसे डेवलपर्स के लिए उपयोग किया जाता है jQuery काम।

ऐसी स्थितियों में कोई Chrome Developer Tools कंसोल ( F12 ) का उपयोग मैन्युअल रूप से निम्न लोड करके jQuery को लोड किए गए पृष्ठ पर जोड़ने के लिए कर सकता है:

var j = document.createElement('script');
j.onload = function(){ jQuery.noConflict(); };
j.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(j);

जो संस्करण आप चाहते हैं, वह ऊपर ( 1.12.4 ) से भिन्न हो सकता है, आप यहाँ अपनी आवश्यकता के लिए लिंक प्राप्त कर सकते हैं ।

JQuery वस्तु

हर बार jQuery को $() या jQuery() का उपयोग करके बुलाया जाता है, आंतरिक रूप से यह jQuery का एक new उदाहरण बना रहा है। यह स्रोत कोड है जो नया उदाहरण दिखाता है:

// Define a local copy of jQuery
jQuery = function( selector, context ) {

    // The jQuery object is actually just the init constructor 'enhanced'
    // Need init if jQuery is called (just allow error to be thrown if not included)
    return new jQuery.fn.init( selector, context );
}

आंतरिक रूप से jQuery के रूप में अपने प्रोटोटाइप को संदर्भित करता है .fn , और आंतरिक रूप से एक jQuery वस्तु instantiating की यहां इस्तेमाल किया शैली के लिए कि प्रोटोटाइप के स्पष्ट उपयोग के बिना उजागर होने की अनुमति देता है new कॉल करने वाले को।

एक उदाहरण स्थापित करने के अलावा (जो कि jQuery एपीआई, जैसे .each , children , filter , आदि को उजागर किया गया है), आंतरिक रूप से jQuery चयनकर्ता के परिणाम से मेल खाने के लिए एक सरणी जैसी संरचना भी बनाएगा (बशर्ते कि कुछ भी नहीं, undefined , null या इसी तरह के अलावा कुछ और तर्क के रूप में पारित किया गया था)। किसी एक आइटम के मामले में, यह सरणी जैसी संरचना केवल उस आइटम को पकड़ कर रखेगी।

एक साधारण प्रदर्शन एक आईडी के साथ एक तत्व को खोजने के लिए होगा, और फिर अंतर्निहित डोम तत्व को वापस करने के लिए jQuery ऑब्जेक्ट का उपयोग करेगा (यह तब भी काम करेगा जब कई तत्वों का मिलान या वर्तमान हो)।

var $div = $("#myDiv");//populate the jQuery object with the result of the id selector
var div = $div[0];//access array-like structure of jQuery object to get the DOM Element

नाम स्थान jQuery प्लगइन्स लोड हो रहा है

आमतौर पर प्लगइन्स लोड करते समय, सुनिश्चित करें कि हमेशा jQuery के बाद प्लगइन शामिल करें।

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="some-plugin.min.js"></script>

यदि आपको jQuery के एक से अधिक संस्करण का उपयोग करना चाहिए , तो jQuery के आवश्यक संस्करण के बाद प्लगइन को लोड करना सुनिश्चित करें (कोड) इसके बाद jQuery.noConflict(true) सेट करने के लिए; फिर jQuery और उसके संबद्ध प्लगइन के अगले संस्करण को लोड करें:

<script src="https://code.jquery.com/jquery-1.7.0.min.js"></script>
<script src="plugin-needs-1.7.min.js"></script>
<script>
// save reference to jQuery v1.7.0
var $oldjq = jQuery.noConflict(true);
</script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="newer-plugin.min.js"></script>

अब प्लगइन्स को इनिशियलाइज़ करते समय, आपको संबंधित jQuery संस्करण का उपयोग करना होगा

<script>
// newer jQuery document ready
jQuery(function($){
  // "$" refers to the newer version of jQuery
  // inside of this function

  // initialize newer plugin
  $('#new').newerPlugin();
});

// older jQuery document ready
$oldjq(function($){
  // "$" refers to the older version of jQuery
  // inside of this function

  // initialize plugin needing older jQuery
  $('#old').olderPlugin();
});
</script>

दोनों प्लगइन्स को शुरू करने के लिए केवल एक दस्तावेज़ तैयार फ़ंक्शन का उपयोग करना संभव है, लेकिन दस्तावेज़ तैयार फ़ंक्शन के अंदर किसी भी अतिरिक्त jQuery कोड के साथ भ्रम और समस्याओं से बचने के लिए, संदर्भों को अलग रखना बेहतर होगा।

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow