Scribd
Upload
1K views30 pages

Introduction To Jquery

An introduction to jQuery aimed at Java developers. Covers selectors (CSS, XPath, and method based), manipulation, animation and ajax with jquery. Also has a very short introduction to jquery plugin-writing.

Uploaded by

morticed
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
Download as pptx, pdf, or txt
1K views30 pages

Introduction To Jquery

An introduction to jQuery aimed at Java developers. Covers selectors (CSS, XPath, and method based), manipulation, animation and ajax with jquery. Also has a very short introduction to jquery plugin-writing.

Uploaded by

morticed
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
Download as pptx, pdf, or txt
Download as pptx, pdf, or txt
You are on page 1/ 30

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.

You might also like