The jQuery Local Example

jQuery CDN – Latest Stable Versions

jQuery Core

Showing the latest stable release in each major branch. See all versions of jQuery Core.

jQuery 3.x

jQuery 2.x

jQuery 1.x

jQuery Migrate

jQuery UI

Showing the latest stable release for the current and legacy release families. See all versions of jQuery UI.

jQuery UI 1.13

jQuery UI 1.12

jQuery Mobile

Showing the latest stable release for jQuery Mobile. See all versions of jQuery Mobile.

jQuery Color

Showing the latest stable release for jQuery Color. See all versions of jQuery Color.

• jQuery Color 2.2.0 — uncompressed, minified
• jQuery Color SVG Color Names 2.2.0 — uncompressed, minified
• jQuery Color With Names (last two together) 2.2.0 — uncompressed, minified

QUnit

Showing the latest stable release for QUnit. See all versions of QUnit.

PEP

Showing the latest stable release for PEP. See all versions of PEP.

Books

Copyright 2023 OpenJS Foundation and jQuery contributors. All rights reserved. See jQuery License for more information. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. OpenJS Foundation Terms of Use, Privacy, and Cookie Policies also apply. Web hosting by Digital Ocean | CDN by StackPath

Источник

How to link jQuery in HTML page?

jQuery is a fast and concise JavaScript library primarily designed with a nice motto − Write less, do more. The main purpose of this library is to make it easier to use JavaScript on our website. jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery wraps many lines of JavaScript code into methods that we can call with a single line of code.

How to link jQuery?

There are two ways to link jQuery in an HTML page —

• By downloading the jQuery library locally — you can download the jQuery file on your local machine and include it in the HTML page.
• By including the jQuery from a CDN — you can add the jQuery library into your HTML page directly from a Content Delivery Network (CDN).

1. By downloading the jQuery library locally

• Download the latest version of jQuery library from the official website https://jquery.com/download/. You can download any of the four types of available jQuery versions- uncompressed, minified, slim and slim & minified.
• Now put the downloaded jquery-3.6.0.min.js file in a directory of your website, e.g. /jquery.
• We can link jQuery in an HTML page by using a script tag and providing the downloaded jQuery library file address as the src attribute. The jquery-3.6.0.min.js can be added like below.

Let’s understand with the help of a complete example.

Example

In the example below we include jQuery library in our HTML page as follows –

      
Hello
  

Output

This will produce the following result —

Hello, World! We are using jQuery from local machine

2. By including the jQuery from a CDN

We can link the jQuery library in our HTML page directly from a Content Delivery Network. There are different CDNs that provide the latest version of the jQuery library. For Example, Google, Microsoft, Cloudflare CDNs, and jQuery’s own CDN.

Let’s understand how to link jQuery from these CDNs each with help of examples.

Example #1 − Link jQuery from Google CDN

We can link jQuery in an HTML page by using a script tag and providing a jQuery Google CDN address as the src attribute. The jquery.min.js can be added like below.

Here, in the example below we link the jQuery library in our HTML page as follows −

    div    

Output

Here the fadeIn() method changes the opacity, for selected elements, from hidden to visible. It is to specify the speed of the fading effect, which can be slow or fast.

Example #2 − Link jQuery from Microsoft CDN

We can link jQuery in an HTML page by using a script tag and providing a jQuery Microsoft CDN address as the src attribute. The jquery-3.6.0.js can be added like below.

Here, in the example below we link the jQuery library from Microsoft CDN in our HTML page −

         
 
Hello, World! We are using jQuery from Microsoft CDN.
 
  

Output

When you click on the “Show Message” button, the message will be displayed.

Example #3: Link jQuery from Cloudflare CDN

We can also use Cloudflare CDN to link the jQuery library to our HTML page. To link jQuery in an HTML page we add jQuery Cloudflare CDN address to the src attribute of the script tag. The jquery.min.js can be added like below.

Here, in the example below we link the jQuery library from Cloudflare CDN in your HTML page −

      
Hello
  

Output

This will produce the following result —

Hello, World! We are using jQuery from Cloudflare CDN.

Example #4 − Link jQuery from jQuery CDN

We can also use jQuery CDN to link the jQuery library in our HTML page. To link jQuery in an HTML page we add the jQuery CDN address to the src attribute of the script tag. We also have to add integrity and crossorigin to the script. We can directly copy the script code from the jQuery website. jquery-3.6.0.min.js can be added like below-

Here, in the example below we link the jQuery library from jQuery CDN in your HTML page −

      
Hello
  

Output

This will produce the following result —

Hello, World! We are using jQuery from jQuery CDN.

Источник

How to link jQuery from Google CDN?

jQuery is a JavaScript library primarily designed with the purpose to make it easier to use JavaScript on our website. jQuery wraps many lines of JavaScript code into methods that we can call with a single line of code. Google provides CDN support for jQuery via the googleapis.com domain. The latest version of Google CDN provides four different types of jQuery versions- normal (uncompressed), minified, slim, and slim & minified. Google CDN provides the jQuery via ajax.googleapis.com domain.

Different jQuery Versions

jQuery is provided with different versions having different sizes or functionality. The four versions are discussed below.

• jquery.js is the normal jQuery file that is uncompressed. This version is bigger than the others with all functions included.
• query.min.js is the minified version of the jQuery where spaces and unnecessary characters are removed to make the size less.
• jquery.slim.js is the less functional version where some less used functions are removed. It includes the most popular and core functions.
• jquery.slim.min.js is the smallest version where spaces and unnecessary characters and some functions are removed. It’s a minified version of jquery.slim.js.

Example #1 − Link Normal jQuery from Google CDN

To link normal jQuery from Google CDN, add the Google CDN address in the src attribute of the script tag. The jquery.js can be added like below.

Let’s understand how to link minified jQuery from Google CDN with the help of a complete example.

Here, we are using the Google CDN version of the library. You can try to run the following code to learn how to use Google CDN to link jQuery.

      
Hello
  

Output

This will produce the following result —

Hello, World! We are using Uncompressed jQuery.

Example #2 − Link Minified jQuery from Google CDN

We can link a minified jQuery from Google CDN by using script tag and providing the Google CDN address as the src attribute. The jquery.min.js can be added like below.

Let’s understand how to link minified jQuery from Google CDN with the help of a complete example.

Here, in the example below we include the minified jQuery library in your HTML page as follows –

      
Hello
  

Output

On successful execution of the above code, It will produce following result —

Hello, World! We are using Minified jQuery.

Example #3 − Link Slim jQuery from Google CDN

We add the Google CDN address in the src attribute of the script tag, to link slim jQuery from Google CDN. The jquery.slim.js can be added like below.

Let’s understand how to link minified jQuery from Google CDN with the help of a complete example.

Here, in the example below we link the slim jQuery library in your HTML page as follows –

      
Hello
  

Output

This will produce the following result —

Hello, World! We are using Slim jQuery.

Example #4 − Link Slim and Minified jQuery from Google CDN

To link slim and minified jQuery from Google CDN, add the Google CDN address in the src attribute of the script tag. The jquery.slim.min.js can be added like below.

Let’s understand how to link slim and minified jQuery from Google CDN with the help of a complete example.

Here, we are using the Google CDN version of the library. You can try to run the following code to learn how to use Google CDN to link slim and minified jQuery.

      
Hello
  

Output

The browser will display the following result —

Hello, World! We are using Slim and Minified jQuery.

Advantages of using jQuery from Google CDN

• Since the jQuery file is loaded from Google CDN and not from your website, it decreases the load on your website. It improves the overall performance of the website.
• Google has servers all over the world decreasing the latency. It ensures that the user will get geographically close responses.
• The users already have the file ready as more websites use jQuery from Google CDN. It increases the chance of a cache-hit.

Источник

Как подключить последнюю версию jQuery?

Посдкажите, как подключить самую последнюю версию jQuery.

Сейчас в каждом проект так:

Есть ли какое-то подключение, чтобы было примерно так:

К сожалению никак. Авторы выше ошибаются.

However, since jQuery 1.11.1, both jQuery and Google stopped updating these URL’s; they will forever be fixed at 1.11.1. There is no supported alternative URL to use. For an explanation of why this is the case, see this blog post;

myskypesla: Человек тупо скопировал ответ с моей ссылки и видимо против того, чтобы вы развивались и учились искать ответы сами.

Нурлан: Да я эти ссылки уже давно просмотрел, но вопрос был про google cdn, ответ на который я не нашёл, точнее нашел но там только версия 1. вот и написал тут.

А вообще это опасно, что-то сломается, а вам думать из-за чего.

Николай: Вы тупо скопировали ответ с ссылки, что я привел выше. И что я по вашей логике не прав, а вы правы? Человек должен уметь гуглить и читать, что ему выдает гугл. Вопрос идентичный, ответ там есть, который повторюсь, вы тупо скопировали сюда. Так что следите за собой.

Источник