This document provides an overview of JQuery, JQuery Mobile, and how they can be used together. JQuery is a popular JavaScript library that simplifies client-side scripting through DOM handling, animations, events, and AJAX. JQuery Mobile builds on JQuery to provide widgets and interfaces optimized for mobile devices. PhoneGap allows building hybrid mobile apps using HTML5, CSS, and JS that are wrapped in native containers, allowing access to device APIs. JQuery handles DOM and AJAX, JQuery Mobile provides the UI, and PhoneGap wraps the app as native.

1. JQuery
+
JQuery
Mobile
Jussi
Pohjolainen
Tampere
University
of
Applied
Sciences

2. Overview
• JQuery
– Most
popular
JavaScript
library
to
simplify
client-­‐side
scripBng
– DOM
Handling,
animaBons,
events,
AJAX
– Hides
browser
differences!
• JQuery
UI
– Desktop
widgets,
such
as
date
picker,
dialog,
progress
bar,
tabs…
– Built
on
top
of
JQuery
• JQuery
Mobile
– Mobile
app
framework,
mainly
touch
UI
widgets
– Support
for
all
mobile
operaBng
systems
– Built
on
top
of
JQuery
• Possible
to
mix:
JQuery
(dom
handling)
+
JQuery
Mobile
(UI).

3. PhoneGap?
• PhoneGap
(Adobe)
framework
allows
to
build
hybrid
apps
for
mobile
plaTorms
• Hybrid
apps?
– Web
apps
(HTML5+JS)
that
are
wrapped
inside
of
naBve
WebView
widget
• Benefits
– Can
be
sold
in
app
stores
– Can
access
naBve
APIs
• One
possible
stack
for
building
cross
plaTorm
apps:
– JQuery
for
DOM
and
AJAX
Handling
– JQuery
Mobile
for
User
Interface
– PhoneGap
for
wrapping
the
app
as
naBve

4. JQUERY

5. Quick
Start
• Download
JQuery
file
(hp://jquery.com/)
– 1.x
– 2.x
• Smaller
and
faster,
but
does
not
support
ie6,
7
or
8.
• Windows
Phone
8
plaTorm
supports
IE10.
• Make
your
(x)html
page
and
reference
to
the
file
in
script
block
• Make
your
code
and
use
JQuery
funcBons!

6. <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
// When document is ready to be manipulated
jQuery(document).ready( pageReadyToBeManipulated );
function pageReadyToBeManipulated() {
// If link is clicked
jQuery("a").click( linkClick );
}
function linkClick(event) {
alert("Thanks for visiting!");
// Prevent the default action
event.preventDefault();
}
//]]>
</script>

7. Some
Basic
Syntax
• JQuery
can
be
used
in
two
ways:
– JQuery()
– Or
– $()
• $
is
an
alias
to
JQuery()!
$
more
commonly
used

8. <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
// When document is ready to be manipulated
$(document).ready( pageReadyToBeManipulated );
function pageReadyToBeManipulated() {
// If link is clicked
$("a").click( linkClick );
}
function linkClick(event) {
alert("Thanks for visiting!");
// Prevent the default action
event.preventDefault();
}
//]]>
</script>

9. // USING ANONYMOUS FUNCTIONS
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready( function() {
$("a").click(function(event){
alert("Thanks for visiting!");
event.preventDefault();
});
});
//]]>
</script>

10. // EVEN SHORTER SYNTAX, FORGET THE DOCUMENT PARAMETER
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
$().ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
event.preventDefault();
});
});
//]]>
</script>

11. Geers
in
the
TradiBonal
Way
• getElementsById
• getElementsByTagName
• getAttribute

12. JQuery
and
Selectors
• Select
all
h1
elements
– $(“h1”)
• Select
the
first
one
– $(“h1”)[0]
• Add
contents
– $(“h1”)[0].innerHTML = “hello!”;
• Lot
of
different
selectors
– http://api.jquery.com/category/selectors/

13. CreaBng
Elements
in
TradiBonal
Way
• createElement
• createTextNode
• setAttribute
• appendChild
• removeChild

14. JQuery
Insert
$().ready(function(){
$("a").click(function(event){
// Insert the new element after element with id here
$("<p>New Element</p>").insertAfter("#here");
event.preventDefault();
});
});

15. ManipulaBon
FuncBons
• .addClass()
• .after()
• .append()
• .css()
• …
• See: http://api.jquery.com/category/
manipulation/

16. Some
Effects:
Lot
of
Anim
FuncBons
$('#clickme').click(function() {
$('#book').slideUp('slow', function() {
// Animation complete.
});
});

17. JQUERY
MOBILE

18. JQuery
Mobile
• UI
for
all
popular
mobile
device
plaTorms
– hp://jquerymobile.com/
• Built
on
top
of
JQuery
• Themes
can
be
changed
• See
demo:
– hp://view.jquerymobile.com/1.3.2/dist/demos/

19. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first jQuery Mobile code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header">
<h1>jQuery Mobile</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-dividertheme="b">
<li data-role="list-divider">Options</li>
<li><a href="option1.html">Option 1</a></li>
<li><a href="option2.html">Option 2</a></li>
<li><a href="option3.html">Option 3</a></li>
<li><a href="option4.html">Option 4</a></li>
</ul>
</div>
<div data-role="footer">
<h4>&copy; 2013</h4>
</div>
</div>
</body>
</html>