Your SlideShare is downloading. ×
An Introduction To jQuery
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

An Introduction To jQuery


Published on

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 …

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!

Published in: Technology

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Andy Gibson School of Applied Computing University of Dundee Email: Blog: 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 
  • 3. Exhibit A Name: John Resig Employer: Mozilla Corporation Role: JavaScript Evangelist Creator of: • jQuery • Sizzle Selector Engine • TestSwarm • The Google Address Translator
  • 4. 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
  • 5. Out of the Box Selector Engine (Sizzle)  DOM Manipulation & Traversal  Wrapped Set / Chaining  Event Model  AJAX  Effects & Animations  Extensibility 
  • 6. 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
  • 7. 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) && ! { 1.1 kb = even ? evenColor : oddColor; } } } } } } Source:
  • 8. 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
  • 9. 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:
  • 10. 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 
  • 11. Available as both a web site an an Adobe Air application
  • 12. 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 * **
  • 13. jQuery In Action: Published by Manning ISBN: 978-1933-988351 Learning jQuery 1.3: Published by Packt ISBN: 978-1847-196705
  • 14. Andy Gibson: Email: 1.3.2   Web:   Thank you for Twitter: coming WebDD ‘09: 18th April Microsoft Campus, Reading DDD Scotland: 2nd May GCU Glasgow DDD South West: 23rd May Taunton, Somerset