Introduction to jQuery Mobile


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
If you want to learn this knowledge, you can visit the homepage of this site .

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.
lamp Different devices using different development languages, jQuery Mobile can be very compatible with different devices or operating systems:

  • Android and Blackberry (BlackBerry) use JAVA language.
  • iOS uses the Objective C language
  • Windows Phone uses C # and .net, etc.

jQuery Mobile solves the problem of compatibility with different devices because it only uses HTML, CSS and JavaScript, which is the standard for all mobile web browsers!



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

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

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>

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

2 comments

Leave a Reply

Your email address will not be published. Required fields are marked *