jQuery Mobile is a front-end framework for creating mobile-side web applications.
Before you learn this tutorial you need to understand first
Before you start learning jQuery Mobile, you should know the basics:
- HTML
- CSS
- jQuery
What is jQuery Mobile?
jQuery Mobile is a web development framework for touchscreen smartphones and tablets.
jQuery Mobile works with all the mainstream smartphones and tablets on:
jQuery Mobile is built on jQuery and jQuery UI class libraries, and if you know jQuery, you can easily learn jQuery Mobile.
jQuery Mobile uses very little HTML5, CSS3, JavaScript and AJAX script code to complete the page layout rendering.
Why use jQuery Mobile?
By using jQuery Mobile you can "write less code to do more things": it can be a flexible and simple way to layout web pages and is compatible with all mobile devices.
 | Different devices using different development languages, jQuery Mobile can be very compatible with different devices or operating systems:
|
|---|
The best reading experience
Although jQuery Mobile is compatible with all mobile devices, it is not fully compatible with PC (due to limited CSS3 support).
For better reading this tutorial, we recommend using Google Chrome.
Add jQuery Mobile to your page
You can add jQuery Mobile to your web page in the following ways:
- Loading jQuery Mobile from CDN (recommended)
- Download the jQuery Mobile library from jQuerymobile.com
Load jQuery Mobile from CDN
| The full name of the CDN is the Content Delivery Network, the content distribution network. The basic idea is to avoid as much as possible on the Internet may affect the speed and stability of data transmission bottlenecks and links, so that the content transmission faster and more stable. The |
|---|
Use the jQuery kernel, you do not need to install anything on your computer; you just need to load the following cascading styles (.css) and JavaScript libraries (.js) on your web pages to use jQuery Mobile:
jQuery Mobile CDN:
<head>
<! - meta uses viewport to ensure that the page is free to zoom
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<! - Introduce jQuery Mobile style ->
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<! - Introducing the jQuery library ->
<script src = "http://code.jquery.com/jquery-1.11.3.min.js"> </ script>
<! - Introducing 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 that the page is free to zoom
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<! - Introduce jQuery Mobile style ->
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<! - Introducing the jQuery library ->
<script src = "http://code.jquery.com/jquery-1.11.3.min.js"> </ script>
<! - Introducing jQuery Mobile library ->
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </ script>
</ head>
try it"
Domestic users recommend using CDN:
jQuery Mobile CDN :
<head>
<! - meta uses viewport to ensure that the page is free to zoom
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<! - Introduce jQuery Mobile style ->
<link rel = "stylesheet" href = "http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<! - Introducing the jQuery library ->
<script src = "http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"> </ script>
<! - Introducing 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 that the page is free to zoom
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<! - Introduce jQuery Mobile style ->
<link rel = "stylesheet" href = "http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<! - Introducing the jQuery library ->
<script src = "http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"> </ script>
<! - Introducing 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 repository.
Download jQuery Mobile
If you want to put jQuery Mobile in your host, you can download the file from jQuerymobile.com .
<head> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = "jquery.mobile-1.4.5.css"> <script src = "jquery.js"> </ script> <script src = "jquery.mobile-1.4.5.js"> </ script> </ head>
Tip: Place the downloaded file in the same directory as the web page.
| Do you want to know why you did not insert type = "text / javascript" in the <script> tag? HTML5 already does not need this attribute. JavaScript is the default scripting language for HTML5 in all modern browsers! |
|---|
EmoticonEmoticon