an introduction to jquery
DESCRIPTION
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!TRANSCRIPT
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