Tom Stuart 11/02/2009


Ground rules
 No mobile phones

 Take notes

 Shout out, don’t wait!

    

Scripting language for browsers Weakly typed Object-oriented Functional Misunderstood!

Document Object Model

 A standardised way to manipulate


 Not particularly comfortable to use

 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.

 All our work today builds on these

 jQuery will make this easier, more

enjoyable and more robust

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

 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 == ‘’ });

jQuery selection: XPath
 jQuery also includes basic Xpath

 $(‘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

 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().


Part III – Ajax with jQuery

 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()


 Try serializing a form and using alert()

to show the string using Firebug.

 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().


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.

 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.

 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.

 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.

Sign up to vote on this title
UsefulNot useful