Adding JQuery In Your Page

web page में JQuery use करने के दो तरीके हैं -

  1. Download jQuery Library
  2. Include jQuery  from CDN (Content Delivery Network)

Use Downloaded jQuery Library

jQuery library , jQuery की official website https://jquery.com/download/ से download कर सकते हैं। इसके दो version हैं compressed और uncompressed.


uncompressed version development और debugging के किये सही है , but production के लिए compressed version ही use करें।


library download करने के बाद के बाद। .js extension वाली file को current working directory में रख लें। फिर web page (HTML Page) के head या body section में include कर दें।

? web page में हमेशा jQuery file को अपनी custom js file से पहले ही include करें नहीं तो आपके js code के लिए jQuery library available  नहीं रहेगी , और error आएगी।

Copy Fullscreen Close Fullscreen Run
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery Adding Downloaded Library</title>
    <script type="text/javascript" src="jquery-3.5.1.js"></script>
  </head>
  <body>
  <h1>Hello jQuery !</h1>
  </body>
</html>

कुछ इस तरह से downloaded jQuery library को अपने web page में include करते हैं।

? include करते समय type="text/javascript" नहीं भी लिखते तो भी कोई बात नहीं , क्योंकि HTML5 में js default scripting language है।

Include jQuery From CDN

Alternatively अगर jQuery library को download करके use करना नहीं चाहते हैं तो आप CDN (Content Delivery Network) से आसानी से include कर सकते हैं।


CDN (Content Delivery Network) से jQuery include करने के लिए google या jQuery किसी की jQuery file include कर सकते हैं जो इसे host किये हो। यह भी एक तरह से jQuery Library का path ही है जो कि किसी दूसरे server पर available है।

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
or
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

jQuery Simple Example

Copy Fullscreen Close Fullscreen Run
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery Simple Example</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  </head>
  <body>
  <h1>Hello jQuery !</h1>
  <script type="text/javascript">
    $(function()
    {
      alert("Hello World !");
    });
  </script>
  </body>
</html>

Hey ! I'm Rahul founder of learnhindituts.com. Working in IT industry more than 4.5 years. I love to talk about programming as well as writing technical tutorials and blogs that can help to others .... keep learning :)

Get connected with me - LinkedIn Twitter Instagram Facebook