jQuery installation


jQuery Installation

Add jQuery to the web page

You can add jQuery to the web page through a variety of methods. You can use the following methods:

  • Download jQuery library from jquery.com
  • Load jQuery from CDN, such as loading jQuery from Google

Download jQuery

There are two versions of jQuery available for download:

  • Production version - used in actual websites, has been streamlined and compressed.
  • Development version - for testing and development (uncompressed, readable code)

Both versions above can be downloaded from jquery.com.

The jQuery library is a JavaScript file that you can reference using the HTML <script> tag:

<head>
<script src="jquery- 1.10.2.min.js"></script>
</head>

Tips: Place the downloaded file in the same directory of the web page Next, you can use jQuery.

lampAre you wondering why we don’t use type="text/ in the <script> tag? javascript"?

In HTML5, you don’t have to do that. JavaScript is the default scripting language in HTML5 and all modern browsers!

Alternatives

If you don't want to download and host jQuery, you can also reference it through a CDN (Content Delivery Network).

The servers of Baidu, Youpaiyun, Sina, Google and Microsoft all have jQuery.

If your site users are from China, it is recommended to use domestic CDN addresses such as Baidu, Youpaiyun, Sina, etc. If your site users are from abroad, you can use Google and Microsoft.

Note: All examples on this site use Baidu jQuery CDN library.

To quote jQuery from Baidu, Youpaiyun, Sina, Google or Microsoft, please use one of the following codes:

Baidu CDN:

Instance

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Youpaiyun CDN:

Instance

<!DOCTYPE html>
<html>
<head>
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

Running instance»

Click the "Run Instance" button to view the online instance

Sina CDN:

Instance

<!DOCTYPE html>
<html>
<head>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Google CDN:

Instance

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance


lampGet the latest available version through Google CDN:

It is not recommended to use Google CDN to get the version as Google products are very unstable in China.
If you observe what's on the Google URL - the jQuery version (1.8.0) is specified in the URL. If you wish to use the latest version of jQuery, you can also remove a number from the end of the version string (such as 1.8 in this example) and Google will return the latest available version in the 1.8 series (1.8.0, 1.8.1, etc.), or It is also possible to leave only the first number, and Google will return the latest available version in the 1 series (from 1.1.0 to 1.9.9).

Microsoft CDN:

Instance

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

Running Instance»

Click the "Run Instance" button to view the online instance


lamp##Use Baidu, Youpai jQuery from Yun, Sina, Google or Microsoft has a big advantage:
Many users have already loaded jQuery from Baidu, Youpaiyun, Sina, Google or Microsoft when visiting other sites . All the result is that when they visit your site, jQuery is loaded from cache, which reduces load times. At the same time, most CDNs ensure that when a user requests a file from them, a response is returned from the server closest to the user, which can also improve loading speeds.
←
→