Andy Gibson
School of Applied Computing
University of Dundee


                              Email: argibson86@gmail.com
 ...
Final year BSc Applied Computing

     Graduate in June


    .NET developer for both web and desktop


      ASP.NET M...
Exhibit A

  Name:
  John Resig

  Employer:
  Mozilla Corporation

  Role:
  JavaScript Evangelist

  Creator of:
      •...
What is jQuery?
    A JavaScript framework



    Lightweight (~19k minified & Gzipped)



    Simplifies and encapsulat...
Out of the Box

    Selector Engine (Sizzle)


    DOM Manipulation & Traversal


    Wrapped Set / Chaining


    Even...
An Example – Zebra Stripes


         Header A   Header B   Header C   Header D
         5          A          True       ...
The DOM JavaScript Way
function hasClass(obj) {
     var result = false;
     if (obj.getAttributeNode(quot;classquot;) !=...
The jQuery Way
Add a CSS class to all even table rows:
$(“table tr:nth-child(even)”).addClass(“striped”);
                ...
Browser Compatibility
    It’s not all a walk in the park!

        You at the back, yes you, pay attention!
    




  ...
Syntax

                $ as an alias to the jQuery object
    Provides

        Can avoid conflicts by using $.noConflic...
Available as both a web
 site an an Adobe Air
      application




http://api.jquery.com
Visual Studio 2008
  
       Ships with ASP.NET MVC
       InteliSense through an update and -vsdoc.js files*

      Ec...
jQuery In Action:
Published by Manning
ISBN: 978-1933-988351




   Learning jQuery 1.3:
          Published by Packt
   I...
Andy Gibson:
                                       Email:
          1.3.2                        argibson86@gmail.com
  ...
An Introduction To jQuery
An Introduction To jQuery
An Introduction To jQuery
Upcoming SlideShare
Loading in...5
×

An Introduction To jQuery

1,499

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 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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,499
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
78
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

An Introduction To jQuery

  1. 1. Andy Gibson School of Applied Computing University of Dundee Email: argibson86@gmail.com Blog: http://www.andy-gibson.co.uk Twitter: ARGibson
  2. 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. 3. Exhibit A Name: John Resig Employer: Mozilla Corporation Role: JavaScript Evangelist Creator of: • jQuery • Sizzle Selector Engine • TestSwarm • The Google Address Translator
  4. 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. 5. Out of the Box Selector Engine (Sizzle)  DOM Manipulation & Traversal  Wrapped Set / Chaining  Event Model  AJAX  Effects & Animations  Extensibility 
  6. 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. 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. 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. 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. 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. 11. Available as both a web site an an Adobe Air application http://api.jquery.com
  12. 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. 13. jQuery In Action: Published by Manning ISBN: 978-1933-988351 Learning jQuery 1.3: Published by Packt ISBN: 978-1847-196705
  14. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×