Difference between jQuery and jQuery Mobile?

93
votes

I'm new to mobile web development, and I just made a mobile-app with PhoneGap, employing frequent use of jQuery.

But there were naturally a couple of glitches related to how I formatted things and the way they actually appeared on the mobile device screens I was testing with, and in trying to work these out I stumbled across many suggestions to make things easier on myself by using jQuery mobile.

Now this confuses me-- jQuery had no roll in formatting. That was just my beginner's level knowledge of mobile CSS that caused the problems.

So what exactly does jQuery mobile do, and how is it different from ordinary jQuery? If I already know jQuery, what's going to be new to me?

4
jqueryjquery-mobile
"I couldn't believe nobody had asked this before." Actually they did: stackoverflow.com/q/6636388/368167 – Tamer Shlash
What is mobile css? – Legends

4 Answers

95
votes

jQuery is purely designed to simplify and standardise scripting across browsers. It focuses on the low-level stuff: creating elements, manipulating the DOM, managing attributes, performing HTTP requests, etc.

jQueryUI is a set of user interface components & features built on top of jQuery (i.e. it needs jQuery to work): buttons, dialog boxes, sliders, tabs, more advanced animations, drag/drop functionality.

jQuery and jQueryUI are both designed to be 'added' to your site (desktop or mobile) - if you want to add a particular feature, jQuery or jQueryUI might be able to help.

jQuery Mobile, however, is a full framework. It's intended to be your starting point for a mobile site. It requires jQuery and makes use of features of both jQuery and jQueryUI to provide both UI components and API features for building mobile-friendly sites. You can still use as much or as little of it as you like, but jQuery Mobile can control the whole viewport in a mobile-friendly way if you let it.

Another major difference is that jQuery and jQueryUI aim to be a layer on top of your HTML and CSS. You should be able to just leave your markup alone and enhance it with jQuery. However, jQuery Mobile provides ways to define where you want components to appear using HTML alone - e.g. (from the jQuery Mobile site):

<ul data-role="listview" data-inset="true" data-filter="true">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>

The data-role attribute tells jQuery Mobile to turn this list into a mobile-friendly UI component and the data-inset and data-filter attributes set properties of that - without writing a single line of JavaScript. jQueryUI components, on the other hand, are normally created by writing a few lines of JavaScript to instantiate the component in the DOM.

28
votes

What jQuery mobile is

JQM(jQuery mobile) is a user interface system for mobile phones that is built on top of jQuery . jQuery is required for JQM to work. Unlike other similar mobile phone frameworks JQM targets support for all major mobile, tablet, e-reader and desktop platforms and not just mobile webkit browsers. One of the most notable features of the framework is the Ajax navigation system that uses animated page transitions(very cool).

What may be new to you

One thing about JQM that throws a curve ball at new users is the ajax navigation. Coming from jquery you are probably used to including your javascript in every page and then using dom ready( $(function(){ ... } or $(document).ready(function(){ .... }) to fire up all your fun javascript activities. But because JQM uses ajax navigation the system will pull other pages into the same dom as the first page and does not load your scripts contained in the <head>. When the next page is loaded via ajax you will notice that your stuff inside $(function(){ ...} will not work on the second page. The solution to this is binding to the pageinit event. These following examples will help you out in the beginning of your journey:

$(document).on('pageinit', function(){ // this fires for each new page

});

In order to target a certain page you add the id of the page:

$(document).on('pageinit','#page2', function(){ // this fires for #page2 only 

});

Understanding the new page events will help you alot when starting out with JQM. http://jquerymobile.com/demos/1.1.0/docs/api/events.html Good luck!

6
votes

jQuery is a DOM manipulating/traversing and AJAX JavaScript framework. It abstracts out a lot of the complexity between the different browsers automatically. There are countless jQuery plugins that simplify many task.

jQuery Mobile is a UI framework geared to mobile applications that is built on jQuery. It has theming and UI components.

In all, they are complimentary. You don't have to use jQuery Mobile to use jQuery. But to use jQuery Mobile, you have to use jQuery.

2
votes

Don't have enough points to comment above so adding to thread to answer Andy's second question of dependencies.

I believe what you are looking for is here: jQuery Mobile Demo

<!DOCTYPE html> 
<html>
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-    [version].min.css" />
    <script src="http://code.jquery.com/jquery-[version].min.js"></script>
    <script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
</head>

<body>
    ...content goes here...
</body>
</html>