A new client-side framework has been taking the internet by storm, many have already been mesmerised by the power of such a small javascript library. And “what is the name of this fantastic framework?” I hear you ask, “jQuery” is my reply. jQuery is a robust javascript framework with a very small footprint (18kb minified and GZipped) which makes the complicated aspects of javascript very simple. From traversing the Document Object Model to complex AJAX functionality, jQuery can do it all. In this session I will introduce you to the basics of jQuery, showing you, through code, how to select and manipulate elements on the page, attach functions to events, implement ajax and more! This is the perfect opportunity to learn about jQuery and how it can make the life of a web developer so much easier, allowing you to focus more on building your application!

1. Andy Gibson
School of Applied Computing
University of Dundee
Email: argibson86@gmail.com
Blog: http://www.andy-gibson.co.uk
Twitter: ARGibson

2. Final year BSc Applied Computing

 Graduate in June
.NET developer for both web and desktop

ASP.NET MVC

 jQuery
Enjoy playing with new technology


4. Exhibit A
Name:
John Resig
Employer:
Mozilla Corporation
Role:
JavaScript Evangelist
Creator of:
• jQuery
• Sizzle Selector Engine
• TestSwarm
• The Google Address Translator

5. What is jQuery?
A JavaScript framework

Lightweight (~19k minified & Gzipped)

Simplifies and encapsulates monotonous JS

Boiler plate code

Uses no browser sniffing under the hood!

 Object detection instead

6. Out of the Box
Selector Engine (Sizzle)

DOM Manipulation & Traversal

Wrapped Set / Chaining

Event Model

AJAX

Effects & Animations

Extensibility


7. An Example – Zebra Stripes
Header A Header B Header C Header D
5 A True #000000
10 B False #333333
15 C True #666666
Odd Even
20 D True #999999
25 E False #AAAAAA
30 F False #CCCCCC
35 G False #FFFFFF

8. The DOM JavaScript Way
function hasClass(obj) {
var result = false;
if (obj.getAttributeNode(quot;classquot;) != null) {
result = obj.getAttributeNode(quot;classquot;).value;
}
return result;
Zebra stripe code from
}
function stripe(id) {
A List Apart
var even = false;
var evenColor = arguments[1] ? arguments[1] : quot;#fffquot;;
var oddColor = arguments[2] ? arguments[2] : quot;#eeequot;;
var table = document.getElementById(id);
if (! table) { return; }
var tbodies = table.getElementsByTagName(quot;tbodyquot;);
for (var h = 0; h < tbodies.length; h++) {
var trs = tbodies[h].getElementsByTagName(quot;trquot;);
for (var i = 0; i < trs.length; i++) {
35 Lines of code!
if (! hasClass(trs[i]) &&
! trs[i].style.backgroundColor) {
var tds = trs[i].getElementsByTagName(quot;tdquot;);
for (var j = 0; j < tds.length; j++) {
var mytd = tds[j];
if (! hasClass(mytd) &&
! mytd.style.backgroundColor) {
1.1 kb
mytd.style.backgroundColor =
even ? evenColor : oddColor;
}
}
}
}
}
}
Source: http://www.alistapart.com/articles/zebratables

9. The jQuery Way
Add a CSS class to all even table rows:
$(“table tr:nth-child(even)”).addClass(“striped”);
Isn’t that a CSS 3 selector?
It sure is!
Or, set the background-color styles:
$(“table tr:nth-child(even)”).css(“background-color”, “#fff”);
$(“table tr:nth-child(odd)”).css(“background-color”, “#eee”);
129bytes
51 bytes
Zebra stripe code in
2 Linesof code!
1 Line of code!
jQuery

10. Browser Compatibility
It’s not all a walk in the park!

You at the back, yes you, pay attention!

Firefox 1.5+ Internet Explorer 6+ Safari 3+ Opera 9+
(Konquer0r, Chrome, etc.)
jQuery will work on other browsers / versions
BUT there are known issues!
Compatibility testing: http://jquery.com/test/

11. Syntax
$ as an alias to the jQuery object
Provides

Can avoid conflicts by using $.noConflict()

Most operations return a jQuery object

Operations are applied to the same set of elements

Allows chaining


14. Available as both a web
site an an Adobe Air
application
http://api.jquery.com

15. Visual Studio 2008

 Ships with ASP.NET MVC
 InteliSense through an update and -vsdoc.js files*
Eclipse

 Web Platform Tools Support**
NetBeans

 Code completion for JS libraries out of the box
* http://weblogs.asp.net/scottgu/archive/2008/11/21/jquery-intellisense-in-vs-2008.aspx
** http://www.langtags.com/jquerywtp/

16. jQuery In Action:
Published by Manning
ISBN: 978-1933-988351
Learning jQuery 1.3:
Published by Packt
ISBN: 978-1847-196705

17. Andy Gibson:
Email:
1.3.2 argibson86@gmail.com
 http://jquery.com
 http://api.jquery.com
Web:
 http://ui.jquery.com
http://www.andy-gibson.co.uk
 http://plugins.jquery.com
Thank you for Twitter:
coming
http://twitter.com/ARGibson
WebDD ‘09: 18th April Microsoft Campus, Reading
DDD Scotland: 2nd May GCU Glasgow
DDD South West: 23rd May Taunton, Somerset