← Back to jQuery Course | Chapter 1: Getting Started | Lesson 2 of 6

किसी Webpage में jQuery जोड़ना

आप एक script element जोड़कर एक CDN से jQuery load कर सकते हैं।

In this page:

  1. CDN Script जोड़ना
  2. jQuery Code चलाना
  3. अपना Script रखना
  4. एक Button इस्तेमाल करना
  5. यह Check करना कि jQuery Load हुआ
Syntax
javascript 
<script src="https://code.jquery.com/jquery-version.min.js"></script>

CDN Script जोड़ना

किसी public CDN URL की तरफ़ point करने वाला एक script tag आपके page के चलने से पहले jQuery library file download कर लेता है, बिना किसी local install की ज़रूरत के। शुरुआत करने का यह सबसे तेज़ तरीका है, क्योंकि locally download या configure करने के लिए कुछ नहीं है।

उदाहरण: Add the CDN Script

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
  </style>
</head>
<body>
  <button id="runBtn">Check jQuery</button><button id="resetBtn" class="secondary">Reset</button>
  <div id="output"></div>
  <script>
    $("#runBtn").click(function () {
      $("#output").text("jQuery " + $.fn.jquery + " is loaded from the CDN <script> tag in <head>");
    });
    $("#resetBtn").click(function () { $("#output").empty(); });
  </script>
</body>
</html>

jQuery Code चलाना

एक बार जब CDN script tag ने jQuery को page में load कर दिया, तो global $ function बाद में चलने वाले किसी भी script के लिए available हो जाता है। elements select करने के लिए $() इस्तेमाल करना वह पहली चीज़ है जो ज़्यादातर developers यह confirm करने के लिए try करते हैं कि library सही तरीके से load हुई।

उदाहरण: Run jQuery Code

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>
    var $initial = $("body").children();

    $("#runBtn").click(function() {
      $("#output").text($("body").length);
    });

    $("#resetBtn").click(function() {
      $("body").children().not($initial).remove();
      $("#output").empty();
    });
  </script>
</body>
</html>

अपना Script रखना

आपका अपना script tag HTML में jQuery CDN tag के बाद आना चाहिए, वरना जैसे ही आपका code चलेगा browser एक '$ is not defined' error throw कर देगा। load order सही रखना CDN-based setups के साथ सबसे common early mistakes में से एक है।

उदाहरण: Place Your Script

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
  </style>
</head>
<body>
  <button id="runBtn">Show jQuery version</button><button id="resetBtn" class="secondary">Reset</button>
  <div id="output"></div>
  <script>
    $("#resetBtn").click(function () { $("#output").empty(); });
    $("#runBtn").click(function () {
      $("#output").text("jQuery version: " + $.fn.jquery);
    });
  </script>
</body>
</html>

एक Button इस्तेमाल करना

किसी button को एक click handler से जोड़ना यह साबित करने का एक तेज़ तरीका है कि पूरा setup end-to-end काम करता है -- अगर आपके click करने पर console एक message log करे, तो CDN load और आपका script दोनों सही तरीके से जुड़े हुए हैं।

उदाहरण: Use a Button

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <button id="test">Test</button>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#test").click(function() {
        $("#output").append($("<div>").text("jQuery is working"));
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

यह Check करना कि jQuery Load हुआ

console में jQuery.fn.jquery या $.fn.jquery log करना loaded library की exact version string print करता है, जो यह confirm करने के लिए उपयोगी है कि आपको CDN से expected version मिला, खासतौर पर किसी compatibility issue को debug करते समय।

उदाहरण: Check That jQuery Loaded

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      $("#output").empty();
      $("#output").append($("<div>").text(String($.fn.jquery)));
      $("#output").append($("<div>").text(String(jQuery.fn.jquery)));
    });

    $("#resetBtn").click(function() {
      $("#output").empty();
    });
  </script>
</body>
</html>
Related Topics

jQuery क्या है · jQuery का Syntax · Document Ready इवेंट · jQuery CDN के Fallbacks

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. अपना <script> jQuery CDN tag के ऊपर रखना, इसलिए browser $ is not defined report करता है क्योंकि jQuery अभी तक load नहीं हुआ।
  2. CDN tag जोड़ना लेकिन यह कभी check न करना कि यह load हुआ, इसलिए एक blocked या गलत लिखा गया URL चुपचाप page पर हर $() call तोड़ देता है।
  3. jQuery को एक से ज़्यादा बार load करना (उदाहरण के लिए एक CDN tag plus एक local copy), जो पहली copy को overwrite कर सकता है और उससे जुड़े plugins मिटा सकता है।
🔒

Chapter Quiz — Complete all 6 topics to unlock

0/6 topics done

Complete these topics first:

← Previous Lesson What is jQuery Next Lesson → jQuery Syntax

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.