How to embed jQuery into HTML page

jQuery is a popular JavaScript library that makes easier to include dynamic and interactive content on the website. It offers a wide range of tools for navigating, modifying, and animating HTML documents as well as for managing events, executing AJAX requests, and building plugins.

With this, you can perform the same task written in JavaScript with just a few lines of code.

Compatible with most browsers and supports CSS3 selectors to find and style property manipulation.

Demo

Download and Include
Add jQuery to HTML
Add External jQuery file
Demo
Conclusion

1. Download and Include

Navigate to jQuery Official website.
The library is available in two versions – compressed and uncompressed. The compressed has less size as compared to uncompressed because it doesn’t have extra white spaces and comments. The uncompressed version is readable and easier to debug.
Download the compressed version.
Use <script > to include the library in HTML either in <head> or <body>.

<script src='jquery-3.6.3.min.js'></script>

You can also use the available CDN to include the library.

Google CDN

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

2. Add jQuery to HTML

In the web page write your jQuery code within the document ready state in the <script > tag.

Example

In the example, I created a textbox and button. Included jQuery library using CDN.

Defined click event on the button. On click update textbox value by calling val().

<input type='text' id='txt1' />
<input type='button' id='button' value='Click me' />

<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
    $('#button').click(function(){
         $('#txt1').val("Button clicked");
    });
});
</script>

3. Add External jQuery file

Create a script.js file and put the above script on it.
I have created the script.js in the root folder. You can also create it inside a folder like – scripts/script.js or js/script.js.

script.js

$(document).ready(function(){
 
    $('#button').click(function(){
         $('#txt1').val("Button clicked");
    });
});

index.html

To include an external jQuery file you first need to include the jQuery library.
In the <script > tag specify the file path in src attribute.
For example – if your JS file is in js folder then the path will be js/script.js.
I have stored the file in the root folder, that’s why I directly mention the file name.

<input type='text' id='txt1' />
<input type='button' id='button' value='Click me' />

<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src='script.js' type="text/javascript"></script>

4. Demo

Both examples will give the same output.

View Demo

5. Conclusion

Adding jQuery to an HTML page is a quick and easy process that only requires a few simple steps. After adding you can take advantage of the numerous features and functionalities offered by the jQuery library.

You can develop dynamic, interactive web pages with jQuery that engage visitors and offer a good user experience.

You can either use the external jQuery library or the CDN version to include.

If you have created an external script and used jQuery on it then it must be included after the jQuery library script otherwise, it wouldn’t work and generate the errors.

If you found this tutorial helpful then don't forget to share.

Contents

1. Download and Include

2. Add jQuery to HTML

3. Add External jQuery file

4. Demo

5. Conclusion