get going with jquery (by george adamson at ddd south west)
DESCRIPTION
Introduction to jQuery, presented by George Adamson at www.DDDSouthWest.com conference in May 2009TRANSCRIPT
![Page 1: Get going with jQuery (by George Adamson at DDD South West)](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558be65d8b42a7e298b524b/html5/thumbnails/1.jpg)
Get going with
jQuery simplifies how we manipulate DOM elements, handle events, ajax and animations
[email protected] UX, UI, IA, Usabiity, Accessibility, jQuery, JS, CSS, AJAX
Friday, 22 May 2009
![Page 2: Get going with jQuery (by George Adamson at DDD South West)](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558be65d8b42a7e298b524b/html5/thumbnails/2.jpg)
Find stuff... then do something with it
$(“DIV”).fadeOut(“slow”)
“jQuery changes the way we write JavaScript”
Friday, 22 May 2009
![Page 3: Get going with jQuery (by George Adamson at DDD South West)](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558be65d8b42a7e298b524b/html5/thumbnails/3.jpg)
the old way...
the new way...
$(function(){ do stuff})
<body onload=”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
![Page 4: Get going with jQuery (by George Adamson at DDD South West)](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558be65d8b42a7e298b524b/html5/thumbnails/4.jpg)
Find stuff...
$(“#invoiceTable TR:odd”)
$(“DIV.searchBar :checkbox”)
$(“IMG[src $= ‘.png’]”)
$(“LI:nth-child(2)”)
No more getElementById() or document.all[] or document.layers[]
and a bunch of for loops and if statements for good measure
:first:not(selector)
:nth(n)
:hidden :radio:has(selector)
:disabled
.class
:checked
[attr*=value]
:nth-child(n)[attr]
DIV>UL
Friday, 22 May 2009
![Page 5: Get going with jQuery (by George Adamson at DDD South West)](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558be65d8b42a7e298b524b/html5/thumbnails/5.jpg)
Find stuff... then do something with it
$(“#invoiceTable TR:odd”) .addClass(“rowStripe”)
$(“DIV.searchBar :checkbox”) .removeAttr(“checked”)
$(“IMG[src $= ‘.png’]”) .slideDown(“fast”)
$(“LI:nth-child(2)”) .css({ color:”#000”, left:”50%” })
.val().siblings()
.css()
.prev() .find().appendTo()
:remove()
.attr()
:wrap()
.toggleClass()
.filter().text()
Friday, 22 May 2009
![Page 6: Get going with jQuery (by George Adamson at DDD South West)](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558be65d8b42a7e298b524b/html5/thumbnails/6.jpg)
Chaining...
$(“TABLE TR.answers”) .hide() .prevAll() .filter(“:odd”) .addClass(“oddRow”)
Friday, 22 May 2009
![Page 7: Get going with jQuery (by George Adamson at DDD South West)](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558be65d8b42a7e298b524b/html5/thumbnails/7.jpg)
Traversing and filtering...
$(“INPUT:checked”) .parents(“DIV.content”) .find(“.results :button”) .trigger(“focus”)
Friday, 22 May 2009
![Page 8: Get going with jQuery (by George Adamson at DDD South West)](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558be65d8b42a7e298b524b/html5/thumbnails/8.jpg)
Events...
$(“A”) .click(function(){ do stuff return false; });
$(“INPUT:text”) .bind(“keydown”, function(e){ alert(e.keyCode); });
No more addEventListener() or attachEvent() etc.
.trigger(type).unbind(type,fn)
.one(fn)
.live(fn) .hover(fn,fn)
.ready(fn).bind(“click”,fn)
Encourages Unobtrusive JavaScript and Progressive
Enhancement (PE)
Friday, 22 May 2009
![Page 9: Get going with jQuery (by George Adamson at DDD South West)](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558be65d8b42a7e298b524b/html5/thumbnails/9.jpg)
Effects...
$(“A”) .click(function(){ $(this).fadeOut(“fast”); return false; });
$(“LI:gt(3)”) .animate({ width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "3em", borderWidth: "10px"}, 2000);
.show().slideToggle()
.fadeIn()
.stop() .fadeTo()
.toggle().slideDown()
.animate().hide()
Friday, 22 May 2009
![Page 10: Get going with jQuery (by George Adamson at DDD South West)](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558be65d8b42a7e298b524b/html5/thumbnails/10.jpg)
AJAX...
$("#twitter") .load("myTweets.aspx");
$.getJSON(tweetUrl, function(data){ $.each(data, function(i, item){ $("<p/>") .html(item.text) .prependTo("#tweet"); });});
With the jQuery forms plugin:$("#myForm").ajaxForm(function(){ alert("Form submitted!"); });
.get().serialize()
:nth(n)
ajax events
.post().getJSON()
.getScript().load()
Friday, 22 May 2009
![Page 11: Get going with jQuery (by George Adamson at DDD South West)](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558be65d8b42a7e298b524b/html5/thumbnails/11.jpg)
Write a plugin...
$.fn.myPlugin = function(options){ do stuff}
$(“DIV.special”).myPlugin()
No more browser sniffing(well, not so much, anyway)
Call it...
Friday, 22 May 2009
![Page 12: Get going with jQuery (by George Adamson at DDD South West)](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558be65d8b42a7e298b524b/html5/thumbnails/12.jpg)
http://docs.jquery.com
http://ui.jquery.com
http://www.learningjquery.com
[email protected] 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