Difference between jQuery and jQuery Mobile?

Question

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?

Answer 1

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.