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

jQuery क्या है

jQuery एक छोटी JavaScript library है। यह common webpage tasks को आसान बना देती है।

In this page:

  1. jQuery का परिचय
  2. jQuery क्यों इस्तेमाल करें
  3. एक Element Select करना
  4. Text बदलना
  5. एक Click Handle करना

jQuery का परिचय

jQuery raw browser DOM API को एक ज़्यादा friendly, ज़्यादा consistent interface में wrap कर देता है ताकि आप elements को select और manipulate करने के लिए कम code लिखें।

उदाहरण: Introduction to jQuery

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="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <p id="msg">Hello</p>

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

    $("#runBtn").click(function() {
      document.getElementById("msg").style.color = "blue";
      $("#msg").css("color", "blue");
    });

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

jQuery क्यों इस्तेमाल करें

jQuery से पहले, developers को सिर्फ किसी element को select करने या किसी event को attach करने के लिए verbose, browser-specific code लिखना पड़ता था। jQuery ने उस boilerplate को छोटी, chainable one-liners में collapse कर दिया, यही वजह है कि यह एक दशक से ज़्यादा समय तक browser scripting के लिए standard library बनी रही।

उदाहरण: Why Use jQuery

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
    #msg { background: steelblue; color: #1a1a1a; padding: 10px; border-radius: 4px; }
    </style>
  <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">
    <p id="msg">Hello</p>
    <button id="btn">Run Effect</button>
    <div id="output"></div>

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

    function init() {
      $("#btn").on("click", function() {
        $("#output").text("Running...");
        $("#msg").css("color", "gold").text("Updated").fadeOut(1000).fadeIn(1000, function() {
          $("#output").text("Fade out and in complete");
        });
      });
    }
    init();

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

एक Element Select करना

किसी element को select करना लगभग हर jQuery snippet का starting point है, क्योंकि जब तक आपने उसका reference नहीं लिया तब तक आप कुछ भी बदल या पढ़ नहीं सकते। dollar-sign function, $(), एक CSS selector string accept करता है और हर match को wrap करने वाला एक jQuery object return करता है।

उदाहरण: Selecting an Element

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="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <p class="greet">Hi</p>

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

    $("#runBtn").click(function() {
      var el = $(".greet");
      $("#output").text(el.length);
    });

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

Text बदलना

एक बार जब आपके पास एक jQuery object हो, .text() आपको आस-पास के HTML tags को छुए बिना उसके अंदर के text content को पढ़ने या overwrite करने देता है। यह उन सबसे common तरीकों में से एक है जिससे beginners user actions के जवाब में किसी page को update करते हैं।

उदाहरण: Changing Text

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="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <p id="msg">Old text</p>

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

    $("#runBtn").click(function() {
      $("#output").text($("#msg").text());
      $("#msg").text("New text");
    });

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

एक Click Handle करना

Click handling selection और behavior को जोड़ देती है: आप एक element select करते हैं, फिर जब भी user उसके साथ interact करे तो एक function चलाने के लिए .on(click, ...) या .click() call करते हैं। यह pattern -- पहले select करो, फिर react करो -- लगभग सभी interactive jQuery code की backbone है।

उदाहरण: Handling a Click

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="btn">Click me</button>

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

    function init() {
      $("#btn").on("click", function() {
        $("#output").append($("<div>").text("Button clicked"));
      });
    }
    init();

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

किसी Webpage में 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. jQuery को एक अलग language समझ लेना और यह भूल जाना कि यह एक JavaScript library है, इसलिए jQuery script load किए बिना $("#msg").text("Hi") लिखना $ को undefined छोड़ देता है।
  2. plain DOM objects को jQuery objects के साथ mix करना, जैसे document.getElementById("msg").text("Hi") call करना, जो fail हो जाता है क्योंकि .text() सिर्फ jQuery objects पर मौजूद है।
  3. यह मान लेना कि jQuery कुछ ऐसा करता है जो browser नहीं कर सकता, जबकि यह सिर्फ DOM API को $("#msg").css("color", "red") जैसी छोटी, ज़्यादा consistent calls में wrap करता है।
🔒

Chapter Quiz — Complete all 6 topics to unlock

0/6 topics done

Complete these topics first:

Next Lesson → Adding jQuery to a Webpage

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.