How to include jquery. Including jQuery via Google and Microsoft

In including jquery everything is simple. There are 2 options:

For offline work - download the jQuery library file itself and include it.
For online work - quickly include jQuery from the Google or Microsoft cdn repository with one line of code.

Each option has its pros and cons. Let's consider them in more detail.

Including jquery via Google or Microsoft

To include the latest version of jquery via Google you need to add one line of code inside <head> - everything is extremely fast and convenient:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

To include an exact version (in this case 3.6.0):

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

The exact number of the latest version can always be viewed in Google Libraries, and then just change the version numbers in the code and it will work.

To include jquery via Microsoft add the code:

<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-3.6.0.min.js"></script>

Including with Google is good because many sites include jQuery in a similar way - exactly via Google API and there is always a high probability that this library is already loaded in the user's browser cache and will not be downloaded a second time.

Including jquery by downloading the library file

Including jQuery from a page of your own site is longer, but more reliable. To do this you need to:

Download the jquery library from the official jquery website;
Save it to a file, let's call it jquery-3.6.0.min.js;
Put it in the js folder on your site and add the following code to <head>:
```
<script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
```
In src we should specify the path to where our file with jquery is located.

And finally, the most reliable and bulletproof option - including from Google, and if Google is unavailable - including from your own site:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
    if (typeof jQuery == 'undefined') {
        document.write(decodeURIComponent("%3Cscript src='/js/jquery-3.6.0.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
</script>

Or the most modern option - write the following code in <head>:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("jquery", "3.6.0");
    google.setOnLoadCallback(jQueryIsLoaded);
    function jQueryIsLoaded () {
        alert('jQuery from Google loaded');
    }
    if (typeof jQuery == 'undefined') {
        document.write(decodeURIComponent("%3Cscript src='/js/jquery-3.6.0.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
</script>