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
![Page 1: An Introduction To jQuery](https://reader036.vdocument.in/reader036/viewer/2022081413/54954414b4795976588b47f0/html5/thumbnails/1.jpg)
An Introduction to jQuery
Andy GibsonSchool of Applied ComputingUniversity of Dundee
Email: [email protected]: http://www.andy-gibson.co.ukTwitter: ARGibson
![Page 2: An Introduction To jQuery](https://reader036.vdocument.in/reader036/viewer/2022081413/54954414b4795976588b47f0/html5/thumbnails/2.jpg)
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!
![Page 3: An Introduction To jQuery](https://reader036.vdocument.in/reader036/viewer/2022081413/54954414b4795976588b47f0/html5/thumbnails/3.jpg)
jQuery?
![Page 4: An Introduction To jQuery](https://reader036.vdocument.in/reader036/viewer/2022081413/54954414b4795976588b47f0/html5/thumbnails/4.jpg)
Exhibit A
Name:John Resig
Employer:Mozilla Corporation
Role:JavaScript Evangelist
Creator of:•jQuery•Sizzle Selector Engine•TestSwarm•The Google Address
Translator
![Page 5: An Introduction To jQuery](https://reader036.vdocument.in/reader036/viewer/2022081413/54954414b4795976588b47f0/html5/thumbnails/5.jpg)
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
![Page 6: An Introduction To jQuery](https://reader036.vdocument.in/reader036/viewer/2022081413/54954414b4795976588b47f0/html5/thumbnails/6.jpg)
Selector Engine (Sizzle)
DOM Manipulation & Traversal
Wrapped Set / Chaining
Event Model
AJAX
Effects & Animations
Extensibility
Out of the Box
![Page 7: An Introduction To jQuery](https://reader036.vdocument.in/reader036/viewer/2022081413/54954414b4795976588b47f0/html5/thumbnails/7.jpg)
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
![Page 8: An Introduction To jQuery](https://reader036.vdocument.in/reader036/viewer/2022081413/54954414b4795976588b47f0/html5/thumbnails/8.jpg)
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
![Page 9: An Introduction To jQuery](https://reader036.vdocument.in/reader036/viewer/2022081413/54954414b4795976588b47f0/html5/thumbnails/9.jpg)
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!
![Page 10: An Introduction To jQuery](https://reader036.vdocument.in/reader036/viewer/2022081413/54954414b4795976588b47f0/html5/thumbnails/10.jpg)
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!
![Page 11: An Introduction To jQuery](https://reader036.vdocument.in/reader036/viewer/2022081413/54954414b4795976588b47f0/html5/thumbnails/11.jpg)
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
![Page 12: An Introduction To jQuery](https://reader036.vdocument.in/reader036/viewer/2022081413/54954414b4795976588b47f0/html5/thumbnails/12.jpg)
It can be code tiem naow?
![Page 13: An Introduction To jQuery](https://reader036.vdocument.in/reader036/viewer/2022081413/54954414b4795976588b47f0/html5/thumbnails/13.jpg)
jQuery Resources
![Page 14: An Introduction To jQuery](https://reader036.vdocument.in/reader036/viewer/2022081413/54954414b4795976588b47f0/html5/thumbnails/14.jpg)
API Browser
Available as both a web site an an Adobe
Air application
http://api.jquery.com
![Page 15: An Introduction To jQuery](https://reader036.vdocument.in/reader036/viewer/2022081413/54954414b4795976588b47f0/html5/thumbnails/15.jpg)
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/
![Page 16: An Introduction To jQuery](https://reader036.vdocument.in/reader036/viewer/2022081413/54954414b4795976588b47f0/html5/thumbnails/16.jpg)
Books
jQuery In Action:Published by ManningISBN: 978-1933-988351
Learning jQuery 1.3:
Published by PacktISBN: 978-1847-196705
![Page 17: An Introduction To jQuery](https://reader036.vdocument.in/reader036/viewer/2022081413/54954414b4795976588b47f0/html5/thumbnails/17.jpg)
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