How to include jQuery in your HTML Page

jQuery is a popular Javascript library which makes it easier for you to manipulate elements of your HTML page once it is loaded into the browser. To use jQuery first we have to include it in our HTML pages. You have couple of options when it comes to including jQuery in your HTML pages:

You can visit the official jQuery download page, download a copy of compressed production jQuery 3.x.x into your computer, move the downloaded jquery-3.x.x.min.js into where you have saved your html file and finally add the below line of code into your HTML source code just before the closing body tag </body>:

...
<script type="text/javascript" src="jquery-3.x.x.min.js"></script>
</body>
</html>

Second option is to include the jQuery library from a Content Delivery Network (CDN for short) such as Google CDN. jQuery also provides a CDN of itself. If you opt for this option, you don’t need to download the jQuery library into your computer. All you have to do is simply adding a tag that references the jQuery library from the CDN and it will be downloaded to your computer automatically. For an example if you want to use Google CDN, click this link to open Google CDN. Click ‘jQuery’ from the list of libraries shown in the right sidebar and you’ll see several <script> tags referencing various versions of jQuery that you can include in your HTML file. Simply copy the <script> tag for latest 3.x snippet and paste it into your HTML source code just above the closing </body> tag. See below:

...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>
</html>

If you want to include jQuery from the jQuery CDN itself, click here to open its CDN resources page. Under the section jQuery 3.x, right click on link named ‘minified’ which is listed along side the other links next to the version JQuery Core 3.2.1 (which is the latest release) and copy its URL. Then in your HTML source code add a <script> tag referencing the copied link just before the closing </body> tag as shown below:

...
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</body>
</html>

Now you are ready to use jQuery for DOM manipulations within your HTML page. In the following example see how I have used jQuery to display a simple alert box when the page has finished loading in the browser:

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

<script type="text/javascript">

  $(document).ready(function(){
     alert('Hello World!');
  });

</script>

</body>
</html>

Here is the working example from jsfiddle

Note that I have added my script block (starting from line 4) after I have included jQuery library at line 2. Which is an important order to follow because in case you do the opposite it might not work as intended. You can find more about that from here.

Comments

So empty here ... leave a comment!

Leave a Reply

Your email address will not be published. Required fields are marked *

Sidebar



Do NOT follow this link or you will be banned from the site!