An Introduction to jQuery

Andy GibsonSchool of Applied ComputingUniversity of Dundee

Email: argibson86@gmail.comBlog: http://www.andy-gibson.co.ukTwitter: ARGibson

An Introduction to Me

Final year BSc Applied Computing Graduate in June

.NET developer for both web and desktop ASP.NET MVC jQuery

Enjoy playing with new technology

There are never enough hours in the day!

jQuery?

Exhibit A

Name:John Resig

Employer:Mozilla Corporation

Role:JavaScript Evangelist

Creator of:•jQuery•Sizzle Selector Engine•TestSwarm•The Google Address

Translator

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

Selector Engine (Sizzle)

DOM Manipulation & Traversal

Wrapped Set / Chaining

Event Model

AJAX

Effects & Animations

Extensibility

Out of the Box

An Example – Zebra Stripes

Header A

Header B

Header C

Header D

5 A True #000000

10 B False #333333

15 C True #666666

20 D True #999999

25 E False #AAAAAA

30 F False #CCCCCC

35 G False #FFFFFF

Odd Even

The DOM JavaScript Wayfunction hasClass(obj) { var result = false; if (obj.getAttributeNode("class") != null) { result = obj.getAttributeNode("class").value; } return result; }function stripe(id) { var even = false; var evenColor = arguments[1] ? arguments[1] : "#fff"; var oddColor = arguments[2] ? arguments[2] : "#eee"; var table = document.getElementById(id); if (! table) { return; } var tbodies = table.getElementsByTagName("tbody"); for (var h = 0; h < tbodies.length; h++) { var trs = tbodies[h].getElementsByTagName("tr"); for (var i = 0; i < trs.length; i++) { if (! hasClass(trs[i]) && ! trs[i].style.backgroundColor) { var tds = trs[i].getElementsByTagName("td");

for (var j = 0; j < tds.length; j++) { var mytd = tds[j]; if (! hasClass(mytd) && ! mytd.style.backgroundColor) { mytd.style.backgroundColor = even ? evenColor : oddColor; } } } } } }

Zebra stripe code from

A List Apart

35 Lines of code!

Source: http://www.alistapart.com/articles/zebratables

1.1 kb

The jQuery Way

Zebra stripe code injQuery

1 Line of code!

51 bytes

$(“table tr:nth-child(even)”).addClass(“striped”);

$(“table tr:nth-child(even)”).css(“background-color”, “#fff”);$(“table tr:nth-child(odd)”).css(“background-color”, “#eee”);

2 Lines of code!

129 bytes

Add a CSS class to all even table rows:

Or, set the background-color styles:

Isn’t that a CSS 3 selector? It sure

is!

Browser Compatibility

Firefox 1.5+

Internet Explorer 6+

Safari 3+(Konquer0r, Chrome,

etc.)

Opera 9+

Compatibility testing: http://jquery.com/test/

jQuery will work on other browsers / versions BUT there are known issues!

It’s not all a walk in the park! You at the back, yes you, pay attention!

Syntax

Provides $ as an alias to the jQuery object Can avoid conflicts by using $.noConflict()

Most operations return a jQuery object Operations are applied to the same set of

elements Allows chaining

It can be code tiem naow?

jQuery Resources

API Browser

Available as both a web site an an Adobe

Air application

http://api.jquery.com

IDE Support

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/

Books

jQuery In Action:Published by ManningISBN: 978-1933-988351

Learning jQuery 1.3:

Published by PacktISBN: 978-1847-196705

Questions?

Email:argibson86@gmail.com

Web:http://www.andy-gibson.co.uk

Twitter:http://twitter.com/ARGibson

Andy Gibson:

Thank you for coming

1.3.2

http://jquery.comhttp://

api.jquery.comhttp://ui.jquery.comhttp://

plugins.jquery.com

WebDD ‘09: 18th April Microsoft Campus, ReadingDDD Scotland: 2nd May GCU GlasgowDDD South West: 23rd May Taunton, Somerset