jQuery Mobile Installation
Add jQuery Mobile to Your Web Page
You can add jQuery Mobile to your web page in the following ways:
- Load jQuery Mobile from CDN (Recommended)
- Download the jQuery Mobile library from jQuerymobile.com
Load jQuery Mobile from CDN
| CDN stands for Content Delivery Network, i.e., a content distribution network. Its basic idea is to avoid as much as possible the bottlenecks and links on the Internet that may affect the speed and stability of data transmission, making content delivery faster and more stable. |
Using the jQuery core, you don't need to install anything on your computer; you only need to load the following cascading style sheets (.css) and JavaScript libraries (.js) in your web page to use jQuery Mobile:
jQuery Mobile CDN:
<head>
<!-- meta uses viewport to ensure the page can be freely scaled -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Import jQuery Mobile styles -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Import jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Import jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<!-- meta uses viewport to ensure the page can be freely scaled -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Import jQuery Mobile styles -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Import jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Import jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
Try it »
Users in China are recommended to use Baidu CDN:
jQuery Mobile CDN (Baidu):
<head>
<!-- meta uses viewport to ensure the page can be freely scaled -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Import jQuery Mobile styles -->
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Import jQuery library -->
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Import jQuery Mobile library -->
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<!-- meta uses viewport to ensure the page can be freely scaled -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Import jQuery Mobile styles -->
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Import jQuery library -->
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Import jQuery Mobile library -->
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
Try it »
The library referenced in this tutorial is the Baidu CDN resource library.
Download jQuery Mobile
If you want to put jQuery Mobile on your own host, you canjQuerymobile.comdownload the file.
<head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="jquery.mobile-1.4.5.css.html"> <script src="jquery.js.html"></script> <script src="jquery.mobile-1.4.5.js.html"></script> </head>
Tip:Place the downloaded file in the same directory as your web page.
|
Are you wondering why type="text/javascript" is not inserted in the <script> tag? This attribute is no longer needed in HTML5. JavaScript is the default scripting language for HTML5 in all modern browsers! |