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.