jQuery -

Download

Downloading jQuery is a straightforward process that allows you to include the library in your projects locally. This tutorial will guide you through the steps to download jQuery, explain the different versions available, and show how to include jQuery in your HTML files.

1. jQuery Versions

There are two main versions of jQuery available for download: the compressed (minified) version and the uncompressed version. The minified version is smaller and more suitable for production, while the uncompressed version is easier to read and debug.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery Versions</title>
</head>
<body>
    <p>jQuery is available in two versions: compressed (minified) and uncompressed. The minified version is smaller and better suited for production environments, while the uncompressed version is easier to read and debug.</p>
</body>
</html>

This example explains the differences between the compressed and uncompressed versions of jQuery.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>When to Use Compressed and Uncompressed jQuery</title>
</head>
<body>
    <p>Use the compressed version of jQuery in production to reduce load times. Use the uncompressed version during development to make debugging easier.</p>
</body>
</html>

This example demonstrates when to use the compressed and uncompressed versions.

2. Downloading jQuery from the Official Website

You can download jQuery directly from the official jQuery website. Follow these steps to download the version that best suits your needs.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>Download Compressed jQuery</title>
</head>
<body>
    <p>Download the compressed (minified) version of jQuery from the <a href="https://jquery.com/download/" target="_blank">official jQuery website</a>.</p>
</body>
</html>

This example shows how to download the compressed version of jQuery from the official website.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>Download Uncompressed jQuery</title>
</head>
<body>
    <p>Download the uncompressed version of jQuery from the <a href="https://jquery.com/download/" target="_blank">official jQuery website</a>.</p>
</body>
</html>

This example demonstrates how to download the uncompressed version of jQuery from the official website.

3. Including jQuery in Your Project

After downloading jQuery, you can include it in your project by adding a <script> tag in your HTML file. You can place the jQuery file in the <head> section or before the closing </body> tag.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>Include jQuery in Head</title>
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <p>jQuery included in the head section.</p>
</body>
</html>

This example illustrates including jQuery in the <head> section of an HTML file.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>Include jQuery Before Body</title>
</head>
<body>
    <p>jQuery included before the closing body tag.</p>
    <script src="js/jquery-3.6.0.min.js"></script>
</body>
</html>

This example shows how to include jQuery before the closing </body> tag.

4. Using jQuery with Local Files

Once you have included jQuery in your project, you can start using it to manipulate the DOM, handle events, and perform other tasks. This section provides examples of basic jQuery usage with local files.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>Using Local jQuery</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#changeTextButton").click(function() {
                $("#text").text("Hello, jQuery!");
            });
        });
    </script>
</head>
<body>
    <button id="changeTextButton">Change Text</button>
    <p id="text">This is a paragraph.</p>
</body>
</html>

This example demonstrates how to change the text of an HTML element using jQuery.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>Using Local jQuery</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#showAlertButton").click(function() {
                alert("Button clicked!");
            });
        });
    </script>
</head>
<body>
    <button id="showAlertButton">Show Alert</button>
</body>
</html>

This example shows how to handle a button click event with jQuery.