Get going with
          George.Adamson@SoftwareUnity.com
          www.SoftwareUnity.com UX, UI, IA, Usabiity, Accessibil...
Find stuff... then do something with it

               $(“DIV”).fadeOut(“slow”)


                                       ...
the old way...
                      <body onload=”do stuff”>

          the new way...
                      $(function()...
Find stuff...

         $(“#invoiceTable TR:odd”)

         $(“DIV.searchBar :checkbox”)

         $(“IMG[src $= ‘.png’]”)...
Find stuff... then do something with it

              $(“#invoiceTable TR:odd”)
                .addClass(“rowStripe”)

 ...
Chaining...
                      $(“TABLE TR.answers”)
                        .hide()
                        .prevAll()...
Traversing and filtering...
     $(“INPUT:checked”)
       .parents(“DIV.content”)
       .find(“.results :button”)
       ...
Events...

 $(“A”)
   .click(function(){
     do stuff
     return false;
   });

 $(“INPUT:text”)
     .bind(“keydown”, f...
Effects...

       $(“A”)
         .click(function(){
           $(this).fadeOut(“fast”);
           return false;
       ...
AJAX...
        $(quot;#twitterquot;)
          .load(quot;myTweets.aspxquot;);


        $.getJSON(tweetUrl, function(dat...
Write a plugin...
            $.fn.myPlugin = function(options){
              do stuff
            }

         Call it......
http://docs.jquery.com

          http://ui.jquery.com

          http://www.learningjquery.com



                       ...
Upcoming SlideShare
Loading in …5
×

Get going with jQuery (by George Adamson at DDD South West)

1,812 views

Published on

Introduction to jQuery, presented by George Adamson at www.DDDSouthWest.com conference in May 2009

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,812
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
32
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Get going with jQuery (by George Adamson at DDD South West)

  1. 1. Get going with George.Adamson@SoftwareUnity.com www.SoftwareUnity.com UX, UI, IA, Usabiity, Accessibility, jQuery, JS, CSS, AJAX jQuery simplifies how we manipulate DOM elements, handle events, ajax and animations Friday, 22 May 2009
  2. 2. Find stuff... then do something with it $(“DIV”).fadeOut(“slow”) “jQuery changes the way we write JavaScript” Friday, 22 May 2009
  3. 3. the old way... <body onload=”do stuff”> the new way... $(function(){ do stuff }) Shorthand for: jQuery(document).ready(function(){ do stuff }); You can still do $(document.body).load(function(){ do stuff }); Or $(document.body).bind(“load”, function(){ do stuff }); Friday, 22 May 2009
  4. 4. Find stuff... $(“#invoiceTable TR:odd”) $(“DIV.searchBar :checkbox”) $(“IMG[src $= ‘.png’]”) DIV>UL [attr*=value] [attr] $(“LI:nth-child(2)”) .class :nth-child(n) :first :nth(n) :not(selector) No more getElementById() or document.all[] or document.layers[] :hidden :radio and a bunch of for loops and if :has(selector) :disabled :checked statements for good measure Friday, 22 May 2009
  5. 5. Find stuff... then do something with it $(“#invoiceTable TR:odd”) .addClass(“rowStripe”) $(“DIV.searchBar :checkbox”) .removeAttr(“checked”) .toggleClass() .text() $(“IMG[src $= ‘.png’]”) .slideDown(“fast”) .attr() .filter() .val() .css() $(“LI:nth-child(2)”) .siblings() .css({ color:”#000”, .prev() .find() left:”50%” }) .appendTo() :remove() :wrap() Friday, 22 May 2009
  6. 6. Chaining... $(“TABLE TR.answers”) .hide() .prevAll() .filter(“:odd”) .addClass(“oddRow”) Friday, 22 May 2009
  7. 7. Traversing and filtering... $(“INPUT:checked”) .parents(“DIV.content”) .find(“.results :button”) .trigger(“focus”) Friday, 22 May 2009
  8. 8. Events... $(“A”) .click(function(){ do stuff return false; }); $(“INPUT:text”) .bind(“keydown”, function(e){ alert(e.keyCode); }); .bind(“click”,fn) .ready(fn) .one(fn) .trigger(type) No more Encourages Unobtrusive addEventListener() JavaScript and Progressive .unbind(type,fn) or attachEvent() etc. Enhancement (PE) .live(fn) .hover(fn,fn) Friday, 22 May 2009
  9. 9. Effects... $(“A”) .click(function(){ $(this).fadeOut(“fast”); return false; }); $(“LI:gt(3)”) .animate({ .slideDown() .hide() width: quot;70%quot;, .toggle() .animate() opacity: 0.4, .show() .fadeIn() marginLeft: quot;0.6inquot;, fontSize: quot;3emquot;, .slideToggle() borderWidth: quot;10pxquot; .stop() .fadeTo() }, 2000); Friday, 22 May 2009
  10. 10. AJAX... $(quot;#twitterquot;) .load(quot;myTweets.aspxquot;); $.getJSON(tweetUrl, function(data){ $.each(data, function(i, item){ $(quot;<p/>quot;) .html(item.text) .prependTo(quot;#tweetquot;); }); }); .getJSON() .load() :nth(n) .post() .getScript() With the jQuery forms plugin: .get() $(quot;#myFormquot;).ajaxForm(function(){ alert(quot;Form submitted!quot;); .serialize() }); ajax events Friday, 22 May 2009
  11. 11. Write a plugin... $.fn.myPlugin = function(options){ do stuff } Call it... $(“DIV.special”).myPlugin() No more browser sniffing (well, not so much, anyway) Friday, 22 May 2009
  12. 12. http://docs.jquery.com http://ui.jquery.com http://www.learningjquery.com George.Adamson@SoftwareUnity.com www.SoftwareUnity.com UX, UI, IA, Usabiity, Accessibility, jQuery, JS, CSS, AJAX Special offer for DDD South West attendees: £350 off trips booked with Steppes Travel in June ‘09 Friday, 22 May 2009

×