JQuery JQueryMobile

Concepts

JQuery is a JavaScript library. With jQuery you select (query) HTML elements and perform actions on them. Basic syntax is:

$(selector).action()

All selectors in jQuery start with the dollar sign and parentheses:

$(<Selector>)

There are different Selectors:

id selector like $("#id")
element selector like $("p")
class selector like $(".classname")
... (complete list see here)

Mobile Pages

jMobile web pages consist of different pages regularly as part of a single HTML file and each with a header, content and footer section:

<div data-role="page" id="p1">

<div data-role="header" id="p1">... <div data-role="content" id="p1">... <div data-role="footer" id="p1">...

</div> 
<div data-role="page" id="p2">
  ...
</div>

Transition is often implementet as

<a href="p2">...</a>

When the HTML file is loaded, the first page in the body of the file is displayed. If the application is split to multiple html pages, first page is loaded normally. Its HEAD and BODY is loaded into the DOM. That content will stay there (unless page is refreshed) to await further content loading. When second page is loaded, only its BODY content is loaded into the DOM, and when I say its BODY content I mean DIV with an attribute data-role=”page” and its inner content.

This may not sound as something problematic but you should think twice. What if we have several HTML pages and every and each page has something unique, lets say different javascript intended to be used only during that page execution, not to mention additional css files. Everything found in a HEAD of those files are going to be discarded and its javascript is not going to be executed. In order to switch to a complete different html file from a anchor use the rel attribute.

Templates

A good reference can be found here:

<script id="bookTemplate" type="text/x-jQuery-tmpl">

Events

JQuery Events

jQuery Mobile offers several custom events that build upon native events to create useful hooks for development:

mobileinit
pagechange

To bind them to a function use:

$(document).bind("mobileinit", function () { Notes.controller.init(); });

Standard Events

To assign a click event to all paragraphs on a page and to define behavior:

$("p").click(function() { ... });

data roles

uses the data-role attribute

button role

content role

controlgroup role

footer role

data-position="fixed"

header role

listview role

data-inset="true" // creates margins around the list within a content area

navbar role

page role

data-theme="[a|b|c]" define standard colors and fonts

HTML Tag extensions

<a>

data-role="[button|...]"
data-icon="[home|grid|info]"
data-iconpos="notext"
data-transition="slidedown" // defines the optical transition to another page
data-rel="dialog"
data-inline="true"
rel="[external|...]"

<select>

data-native-menu=[true|false]" // enables self customization of select optic

<ul>

data-role="listview"
data-filter="true" // makes the list searchable

API

The $ sign is special and important charactor. $() is used for element selection like:

$(this).hide() - hides the current element.

$("p").hide() - hides all p elements.

$(".test").hide() - hides all elements with class="test", class names are prefixed with .
 
$("#test").hide() - hides the element with id="test", id names are prefixed with #

$("p:first") - selects the first p element

getting attributes of elements: $('<element name>').attr('<attribute name>')
setting attributes of elements: $('a').attr({<attribute name>: '<value>', <attribute name>: '<value>'});

ajax()

$.ajax({
  url: url,
  dataType: 'json', //json data type
  data: data,
  success: callback,
  error: callback
});

returns a jQuery XMLHttpRequest (jqXHR) object.

jQuery()

$() is short of jQuery()

getJSON()

$.getJSON('car-sale-report.json', function() {
  //callback
});

is equivalent to ajax().