Transcript A really fairly simple guide to: mobile browser-based application development (part 4, JQuery & DOM) Chris Greenhalgh G54UBI / 2011-03-03 Chris Greenhalgh ([email protected])

A really fairly simple guide to:
mobile browser-based application
development (part 4, JQuery & DOM)
Chris Greenhalgh
G54UBI / 2011-03-03
Chris Greenhalgh ([email protected])
1
Contents
• DOM concepts
• JQuery
– Selectors
– Some common operations
Chris Greenhalgh ([email protected])
2
HTML describes a tree of elements
<p style="font-size: 10">
Some 10-point text,
<b> Bold </b>
</p>
Attributes:
style “font-size: 10”
p
“Some 10-point
text,”
b
“Bold”
Chris Greenhalgh ([email protected])
3
The Document Object Model
• The DOM is an API onto the browser’s internal
tree model of the web page
– Allows Javascript in a web page to manipulate the
page itself
• Add, delete and move “nodes”, i.e. elements and text
• Change attributes, including CSS styling
– Exposed through the “document” object
• The API is quite verbose and not completely
consistent in different browsers
Chris Greenhalgh ([email protected])
4
JQuery
• JQuery is a Javascript library or framework
which makes it easier to write dynamic web
pages
– http://jquery.com/
• (There are lots of others, too)
• JQuery includes support for (amongst other
things):
– DOM and CSS manipulation
– Network operations (AJAX)
Chris Greenhalgh ([email protected])
5
Setting up JQuery
• Before you can use JQuery (or an Javascript
library) you must include it in your page…
– Copy the javascript library, e.g. jquery-1.4.2.min.js
– Add a script element to the HTML file header
before any other scripts which depend on JQuery:
<script type="text/javascript"
src=" jquery-1.4.2.min.js"></script>
Chris Greenhalgh ([email protected])
6
Ready?
• Browsers are inconsistent in when Javascript
runs and when the DOM is available
• So JQuery provides a way to run code as soon
as the DOM is ready:
This is an anonymous
(unnamed) function –
just a wrapper for its
statements
$(document).ready( function() {
alert(‘ready!’);
} );
– i.e. “when the document is read, run the code for
the given function”
Chris Greenhalgh ([email protected])
7
JQuery code structure
• Most Jquery commands look something like
this:
$ ('#maindiv') . show('fast');
Global
function
Element
selector
Operation(s)
(methods)
Produces a list of elements
to be operated on
Chris Greenhalgh ([email protected])
8
JQuery Selectors
• As with CSS, by
– element (tag) name
• E.g. “p”
– ID attribute
• E.g. “#Alice”
– class attribute
• E.g. “.sans”
• And in a lot more ways
– See JQuery “selectors”
<p>A paragraph.</p>
<p>Another paragraph.</p>
<p class="sans">
Paragraph with class
sans</p>
<p class="sans"> Another
paragraph with class
sans</p>
<p class="sans"
id="Alice"> Paragraph
with class sans and id
Alice.</p>
Chris Greenhalgh ([email protected])
9
JQuery operations
• Show/hide an element
(animation)
– .show(‘fast'), .hide ()
• Get/set an attribute
– .attr('value'),
.attr('value','14');
• Get/set the HTML
content of an element
– .html(),
.html('<p>Stuff…</p>');
• Get/set a CSS style
property value
– .css('width'),
.attr('width','100px');
• Change CSS class
– .addClass('boldc'),
.removeClass('boldc');
• Lots more
– See JQuery API
documentation
http://api.jquery.com/
Chris Greenhalgh ([email protected])
10
Summary
• You should now be able to
– Include JQuery in your browser app
– Use JQuery to dynamically change the content and
appearance of your application page
• Showing and hiding elements
• Changing content
• Changing CSS styling
Chris Greenhalgh ([email protected])
11