jQuery environment construction

Enter the official website to get the latest version http://jquery.com/download/. It should be noted here that jQuery is divided into 2 series versions 1.x and 2.x. The main difference is that 2.x is no longer compatible with IE6, 7 and 8 browsers, the purpose of this is to be compatible with mobile terminal development. This version is smaller and faster than jQuery 1.x due to some code reduction.

If developers are more concerned about users of older versions of IE, they can only use jQuery 1.9 and earlier versions. For compatibility reasons, our course uses version 1.9. Each series of jQuery versions is divided into: compressed version (compressed) and development version (development). We use the development version during the development process (the development version is convenient for code modification and debugging). The compressed version is used for online release of the project (because the compressed version is larger in size). Smaller and faster).

jQuery is a JavaScript script library that does not require special installation. We only need to introduce the jQuery library through the script tag in the <head> tag of the page.

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   
     <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <title>环境搭建</title>
</head> 
<body>  
  <script type="text/javascript">
   alert($) 
   </script>
  </body>
</html>

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 domestic, it is recommended to use domestic CDN addresses such as Baidu, Youpaiyun, Sina, etc. If your site users are foreign, you can use Google and Microsoft.

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

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

<!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>

Get the latest available version through Google CDN:
It is not recommended to use Google CDN to obtain versions, because 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).

Using Baidu, Youpaiyun, Sina, Google or Microsoft's jQuery has a big advantage:
Many users have already started from when visiting other sites. Baidu, Youpaiyun, Sina, Google or Microsoft have loaded jQuery. 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.

Continuing Learning

new file

<!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>

submit Reset Code

Automatic operation

jQuery environment construction

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]