jQuery – Simplify your JavaScript
Matthew Dawes
Pacific Northwest National Laboratory
Interlab 2007
What is jQuery?
JavaScript Library
Functionality
DOM scripting & event handling
Ajax
User interface effects
Form validation
2
Why jQuery?
Lightweight – 14kb (Minified and Gzipped)
Cross-browser support (IE 6.0+, FF 1.5+, Safari
2.0+, Opera 9.0+)
CSS-like syntax – easy for developers/non-
developers to understand
Active developer community
Extensible - plugins
3
Example – Show/Hide the old way
Click here to toggle visibility of #foo
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
4
Example – Show/Hide with jQuery
$().ready(function(){
$("a").click(function(){
$("#more").toggle("slow");
return false;
});
});
5
Example – DOM manipulation
function showOneYr(str)
{
$("#main div").css("display","none");
$("#main div#"+str).css("display","block");
}
$().ready(function() {
showOneYr($('#main div').attr("id"));
$("#main p").after("Choose a Year| ");
$("#main h3").each(function() {
yrTxt = $(this).text();
$("#yearLinks").append(''+yrTxt+' | ');
});
$("#yearLinks a").click(function(){
showOneYr('yr'+$(this).text());
return false;
});
});
6
Example – Ajax the old way
function GetXmlHttpObject(handler) {
var objXmlHttp = null; //Holds the local xmlHTTP object instance
//Depending on the browser, try to create the xmlHttp object
if (is_ie){
var strObjName = (is_ie5) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP';
try{
objXmlHttp = new ActiveXObject(strObjName);
objXmlHttp.onreadystatechange = handler;
}
catch(e){
//Object creation errored
alert('Verify that activescripting and activeX controls are enabled');
return;
}
}
else{
// Mozilla | Netscape | Safari
objXmlHttp = new XMLHttpRequest();
objXmlHttp.onload = handler;
objXmlHttp.onerror = handler;
}
//Return the instantiated object
return objXmlHttp;
}
7
Example – Ajax with jQuery
$.get("update_actions.aspx", {st: "yes", f: $(this).attr("ID")} );
8
Example – Ajax with jQuery
$(document).ready(function() {
$("td > img").click(function() {
if($(this).attr('src') == "/images/red_x.jpg")
{
$(this).attr('src', "/images/green_tick.jpg").attr('alt', "Green Check").attr('title', "Complete");
$.get("update_actions.aspx", {st: "yes", f: $(this).attr("ID")} );
}
else
{
$(this).attr('src', "/images/red_x.jpg").attr('alt', "Red X").attr('title', "Not Started");
$.get("update_actions.aspx", {st: "no", f: $(this).attr("ID")} );
}
});
});
9
Example – Form Validation
$().ready(function()
{
// validate the comment form when it is submitted
$("#commentForm").validate();
});
10
Panel Discussion – My Questions
What JavaScript libraries are you using?
How are you implementing them? (site by site as
needed, central repository, etc.)
How do you manage upgrades?
11
Useful jQuery links
www.jquery.com – jQuery homepage
www.learningjquery.com – jQuery tutorial blog
www.visualjquery.com – jQuery documentation
http://ui.jquery.com – jQuery user interface
http://bassistance.de/jquery-plugins/ - homepage of
the author of several useful jQuery plugins.
12