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

Get going with George.Adamson@SoftwareUnity.com www.SoftwareUnity.com UX, UI, IA, Usabiity, Accessibility, jQuery, JS, CSS, AJAX jQuery simpliﬁes how we manipulate DOM elements, handle events, ajax and animations Friday, 22 May 2009

Find stuff... then do something with it $(“DIV”).fadeOut(“slow”) “jQuery changes the way we write JavaScript” Friday, 22 May 2009

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

Find stuff... $(“#invoiceTable TR:odd”) $(“DIV.searchBar :checkbox”) $(“IMG[src $= ‘.png’]”) DIV>UL [attr*=value] [attr] $(“LI:nth-child(2)”) .class :nth-child(n) :ﬁrst :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

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() .ﬁlter() .val() .css() $(“LI:nth-child(2)”) .siblings() .css({ color:”#000”, .prev() .ﬁnd() left:”50%” }) .appendTo() :remove() :wrap() Friday, 22 May 2009

Chaining... $(“TABLE TR.answers”) .hide() .prevAll() .filter(“:odd”) .addClass(“oddRow”) Friday, 22 May 2009

Traversing and ﬁltering... $(“INPUT:checked”) .parents(“DIV.content”) .find(“.results :button”) .trigger(“focus”) Friday, 22 May 2009

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

Effects... $(“A”) .click(function(){ $(this).fadeOut(“fast”); return false; }); $(“LI:gt(3)”) .animate({ .slideDown() .hide() width: \"70%\", .toggle() .animate() opacity: 0.4, .show() .fadeIn() marginLeft: \"0.6in\", fontSize: \"3em\", .slideToggle() borderWidth: \"10px\" .stop() .fadeTo() }, 2000); Friday, 22 May 2009

AJAX... $(\"#twitter\") .load(\"myTweets.aspx\"); $.getJSON(tweetUrl, function(data){ $.each(data, function(i, item){ $(\"<p/>\") .html(item.text) .prependTo(\"#tweet\"); }); }); .getJSON() .load() :nth(n) .post() .getScript() With the jQuery forms plugin: .get() $(\"#myForm\").ajaxForm(function(){ alert(\"Form submitted!\"); .serialize() }); ajax events Friday, 22 May 2009

Write a plugin... $.fn.myPlugin = function(options){ do stuff } Call it... $(“DIV.special”).myPlugin() No more browser snifﬁng (well, not so much, anyway) Friday, 22 May 2009

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

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

0 comments

Notes on slide 1

1 Favorite