Tom Stuart
11/02/2009
INTRODUCTION TO JQUERY
Ground rules
No mobile phones
Take notes
Shout out, don’t wait!
Javascript
Scripting language for browsers
Weakly typed
Object-oriented
Functional
Misunderstood!
Document Object Model
A standardised way to manipulate
(X)HTML
Not particularly comfortable to use
AJAX
Asynchronous
Javascript
And...
XML
JSON
HTML
Plain text
Images
etc.
Task 1
Using plain Javascript, DOM and
XMLHttpRequest:
Create a page which loads text content from
another page via AJAX and puts this content
into a hidden div element, which is then made
visible.
The content should be loaded when a link is
clicked, and the link should not cause the user
to be redirected.
Retrospective
All our work today builds on these
fundamentals
jQuery will make this easier, more
enjoyable and more robust
INTRODUCTION TO JQUERY
Part II – jQuery itself
History of jQuery
Created in 2005 by John Resig
Began as a simple library for selecting
DOM elements using CSS syntax and
binding elements:
document.getElementById(‘content’)
becomes $(‘#content’)
Has since been extended to allow
XPath selection, plugins, widgets, and
much more...
jQuery selection - CSS
Any selector valid in CSS2 is valid in
jQuery:
div#content
h2.posttitle
a:visited
li > ul
li:first-child
img[alt=“logo”]
a[href$=.pdf]
jQuery selection - CSS
Additional selectors
div:first
a:only-child
li:nth-child(2)
tr:odd
:animated
option:not(:selected)
jQuery selection: methods
We can use jQuery methods to
perform additional filtering
$(‘div’).add(‘p’);
$(‘span’).not(‘#warning’);
$(‘#list’).find(‘a’);
$(‘.hidden’).filter(‘img[src$=.gif]’)
$(‘.hidden’).filter(function() { return
$(this).src ==
‘http://www.google.com/favicon.ico’ });
jQuery selection: XPath
jQuery also includes basic Xpath
support:
$(‘p#content[a]’);
$(‘li[a:contains(‘Delete’)]’);
$(‘input[@name=firstName]’);
$(‘input[@type=radio][@checked]’);
jQuery manipulation
Once we have selected elements,
what can we do with them?
Attach events: $(‘a’).click(function() {});
Hide and show them:
$(‘#content’).hide().show();
Add and remove CSS classes:
$(‘#links’).addClass(‘highlight’).removeClass(
‘hidden’);
Remove them from the document:
$(‘#warning’).slideUp().remove();
Task 2
Using the starterkit page:
Display a dialog box showing ‘Hello World’
when the page loads
Give the ol element with id ‘orderedlist’
the class ‘red’
Give all li elements in orderedlist the class
‘blue’
Toggle the ‘green’ class when the user
hovers over the last li in the list
Add the text ‘hello’ to each li in the
document
Visual Effects
In addition to manipulating the DOM,
we can animate it with jQuery!
$(<Element>).hide(‘slow’);
$(<Element>).show(4000);
$(<Element>).toggle();
$(<Element>).slideDown();
$(<Element>).slideToggle();
$(<Element>).fadeIn();
Task 3
Create a simple storyboard system
with jQuery.
The user is shown a list of stories on
page load along with a form for
submitting their own based on title
and text
When they submit their own, the story
is added to the list
This process is animated
Retrospective
jQuery provides powerful DOM
selection and manipulation
Almost all work in jQuery is done by
calling methods on the jQuery object,
‘$’.
All jQuery methods return the jQuery
object, allowing chaining.
jQuery also provides various utility
methods, such as each().
INTRODUCTION TO JQUERY
Part III – Ajax with jQuery
$.ajax()!
The second of the utility methods
we’ve seen
Example:
$.ajax({
type: “GET”,
url: “some.url”,
data:
“firstName=Tom&location=Manchester”,
success: someFunction,
error: errorFunction
});
Task 4
Reimplement Task 1 using jQuery.
Animate the hidden div when you
display it.
Create and display a span element
with an error message if the content
cannot be displayed. Animate the
display of the message.
Posting forms using Ajax
We want to avoid building URLs:
var data = ‘firstName=‘ +
$(‘#firstName’).val() + ‘&lastName=‘ +
$(‘#lastName’).val();
Instead, we can use serialize():
var data = $(‘#personForm’).serialize();
This data can then be used in the $.ajax()
method.
Try serializing a form and using alert()
to show the string using Firebug.
Retrospective
jQuery greatly simplifies the process
of making AJAX requests.
The preferred way of doing this is
through $.ajax(), although $.post()
and $.get() are available as utility
methods.
Forms can be quickly serialised via
serialize().
INTRODUCTION TO JQUERY
Part IV – Added Extras
jQuery Plugins
jQuery’s extend() and Javascript
combine to make it very easy to
create jQuery plugins.
A search on the website shows almost
2000 officially recognised plugins, and
there are bound to be many more in
development.
Datepicker
Ever been annoyed at the lack of an
<input type=“date”> in HTML?
A few lines of code get you the next
best thing:
<style type="text/css">@import "jquery.datepick.css"
;</style>
<script type="text/javascript" src="jquery.datepick.js"
></script>
<input type=“text” id=“dateinput”
name=“registrationDate”></input>
$(‘#dateinput’).datepick();
Has options for preferred date format,
customised display, animation, etc.
Tablesorter
Same as datepicker – include a
javascript file, a stylesheet, and then:
$(‘#myTable’).tableSorter();
Has the usual plethora of options!
How to write a jQuery plugin
Still think javascript is horrible?
Here’s a jQuery plugin:
$.fn.highlight = function() {
return this.css({fontSize: "32px"})
.animate({fontSize: "12px"}, 1500)
};
And here’s how to call it:
$(<Element>).highlight();
Task 5
Write your own jQuery plugin to make
Task 3’s code simpler
The plugin’s function, addChild()
should take an element as a
parameter
It should add this element to the
selected element (‘this’) and display
an animation as it does so.
Retrospective
Javascript, not jQuery in particular,
makes jQuery trivial to extend.
The selected element is available
within jQuery methods by accessing
‘this’.
Helper functions, widgets, animations
and much more are available from the
plugins section of the jquery website.
