Open In App

jQuery CDN

Last Updated : 26 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

A Content Delivery Network (CDN) is a system of distributed servers that deliver web content to users based on their geographic location. Including the jQuery CDN in your project can improve the performance, enhance reliability, and simplify maintenance.

What is a jQuery CDN?

A jQuery CDN is a service that hosts the jQuery library on multiple servers around the world. When you include jQuery in your web project via a CDN, your website links to the jQuery files hosted on these servers. This allows users to download jQuery from a location geographically closer to them, reducing load times and improving overall performance.

Why use jQuery CDN Links?

  • Performance: jQuery files hosted on a CDN are distributed across multiple servers globally, which enhances the loading speed.
  • Reduce Server load: Using the CDN link to the website means your server does not have to handle the load every time for each visitor, which makes it easy to manage whenever heavy traffic comes on the website and makes it more performable.
  • Ease of use: It is easy to use developers can include the link in their HTML file.

Official jQuery CDN Link

// Uncompressed jQuery CDN Link
<script src="https://code.jquery.com/jquery-3.7.1.js" crossorigin="anonymous"></script>

// Minified jQuery CDN Link
<script src="https://code.jquery.com/jquery-3.7.1.min.js" crossorigin="anonymous"></script>

How to Include jQuery using CDN Link?

To include jQuery in your project via a CDN, add a <script> tag to your HTML file that points to the jQuery library hosted by the CDN. Here’s a basic syntax to use the jQuery CDN:

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>jQuery Example</title>

    <!-- Include jQuery CDN Link -->
    <script src=
"https://code.jquery.com/jquery-3.7.1.min.js" 
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" 
        crossorigin="anonymous">
    </script>
</head>

<body>
    <!-- Content goes here -->
</body>

</html>

Example to use jQuery CDN Link in a HTML Document

This example illustrates the basic implementation of the jQuery CDN Link.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>jQuery CDN Link Example</title>

    <!-- jQuery CDN link -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" 
        crossorigin="anonymous">
    </script>
</head>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <p id="bg" style="font-size: 20px;">
        Click the button below for apply
        background color using jQuery
    </p>
    
    <button id="btn">Click</button>

    <script>

        // jQuery Code      
        $("#btn").click(clicked);

        function clicked() {
            $("#bg").css("background-color", "rgb(169, 232, 142)");
        }   
    </script>
</body>

</html>

Output:

jquery
jQuery CDN

Advantages of Using CDN Link

  • Decreased Load Time: If we use CDN links to our projects it will decrease the load time of a particular website this is because it is loaded by the content delivery network, not from your website.
  • Global Network: Use the CDN links of Google, Cloudflare, Microsoft, etc., according to the user of your website and the global network of the companies provided CDN links.

Disadvantages of Using CDN Link

  • Availability Dependency: When you are using CDN links it means it will depend on the availability of that CDN.
  • Regional Restrictions: If the CDN is blocked in a certain region then the user of that area would not properly access the website.
  • Version Control: It is dependent on the version if you have specified the version in your project then you have to change it over time otherwise you will not be able to benefit from the latest version changes and bug fixes.

Next Article
JQuery Selectors

S
shivanigupta18rk
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox