Download - An Introduction To jQuery
An Introduction to jQuery
Andy GibsonSchool of Applied ComputingUniversity of Dundee
Email: [email protected]: 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:[email protected]
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
