An Introduction To jQuery
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

An Introduction To jQuery

  • 3,003 views
Uploaded 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!

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,003
On Slideshare
2,944
From Embeds
59
Number of Embeds
2

Actions

Shares
Downloads
77
Comments
0
Likes
1

Embeds 59

http://www.andy-gibson.co.uk 49
http://www.slideshare.net 10

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Andy Gibson School of Applied Computing University of Dundee Email: argibson86@gmail.com Blog: http://www.andy-gibson.co.uk 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) && ! mytd.style.backgroundColor) { 1.1 kb mytd.style.backgroundColor = even ? evenColor : oddColor; } } } } } } Source: http://www.alistapart.com/articles/zebratables
  • 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: http://jquery.com/test/
  • 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 http://api.jquery.com
  • 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 * http://weblogs.asp.net/scottgu/archive/2008/11/21/jquery-intellisense-in-vs-2008.aspx ** http://www.langtags.com/jquerywtp/
  • 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 argibson86@gmail.com  http://jquery.com  http://api.jquery.com Web:  http://ui.jquery.com http://www.andy-gibson.co.uk  http://plugins.jquery.com Thank you for Twitter: coming http://twitter.com/ARGibson WebDD ‘09: 18th April Microsoft Campus, Reading DDD Scotland: 2nd May GCU Glasgow DDD South West: 23rd May Taunton, Somerset