Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
The DOM Scripting Toolkit:
       jQuery
         Remy Sharp
          Left Logic
Why JS Libraries?

• DOM scripting made easy
• Cross browser work done for you
• Puts some fun back in to coding
Why jQuery?
• Lean API, makes your code smaller
• Small (16k gzip’d), encapsulated, friendly
  library - plays well!
• Plu...
What’s in jQuery?

• Selectors & Chaining
• DOM manipulation
• Events
• Ajax
• Simple effects
$ function
$

• Selectors
• DOM elements or raw HTML
• “Ready” functions
$

• $(‘ul’)
• $(document.createElement(‘ul’))
• $(‘<ul />’)
• $(fn)
Selectors
$(‘#emails a.subject’);
Selectors

• “Find something, do something with it”
• CSS 1-3 selectors at the core of jQuery
• Custom selectors
CSS Selectors

$(‘div’)
$(‘div.foo’)
$(‘a[type=”application/pdf”]’)
$(‘tr td:first-child’)
Tricky Selector

<div id=“content.block” />
$(‘#content.block’) // won’t work :-(
$(‘#content.block’) // will work :-)
Custom Selectors

$(‘div:visible’)
$(‘:animated’)
$(‘:input’)
$(‘tr:odd’)
Custom selectors

• Roll your own
 $.expr[‘:’], {
   within: ‘jQuery(a).parents(m[3]).length > 0’
 });
 $(‘a.subject’).is(...
Selector Performance
$(‘#email’) // same as getElementById
$(‘.email’) // like getElementsByTagName
// using context
$(‘di...
Chaining
$(‘#emails .subjects’)
   .click()
   .addClass(‘read’);
Chaining


• jQuery returns itself *
• We can use the selector once, and keep
    manipulating



* except when requesting...
Chaining Example
// simple tabs
$(‘a.tab’).click(function () {
  // tabs = $(‘div.tab’)
  $tabs
    .hide()
    .filter(thi...
More Chaining
var image = new Image();
$(image)
 .load(function () {
   // show new image
 })
 .error(function () {
   // ...
Working the DOM
 $(this).addClass(‘read’).next().show();
DOM Walking
•   Navigation: children,      $(‘div’)
    parent, parents, siblings, .find(‘a.subject’)
                     ...
Manipulation
• Inserting: after, append, before, prepend,
   html, text, wrap, clone
• Clearing: empty, remove, removeAttr...
Data
•                           $(el).data(‘type’, ‘forward’);
    .data() clean way of
    linking data to element
     ...
Events
$(‘a.subject’).click();
DOM Ready
• Runs after DOM, but before images
  $(document).ready(function () {})
  // or as a shortcut:
  $(function () {})
Binding
• Manages events and garbage collection
• Event functions are bound to the elements
  matched selector
• Also supp...
Helpers
• Mouse: click, dlbclick, mouseover, toggle,
  hover, etc.
• Keyboard: keydown, keyup, keypress
• Forms: change, s...
Custom Events

• Roll your own
• Bind to element (or elements)
• Trigger them later and pass data
 $(‘div.myWidget’).trigg...
Event Namespaces

•                              $(‘a’).bind(‘click.foo’, fn);
    Support for event
    subsets via names...
Ajax
$.ajax({ url : ‘/foo’, success : bar });
Ajax Made Easy
• Cross browser, no hassle.
• $.ajax does it all
• Helpers $.get, $.getJSON, $.getScript,
  $.post, $.load
...
Simple Ajax

/* Loads the #links element with the content
from link.html matched in the selector */
$(‘#links’).load(‘link...
JSON for Data

• Uses eval for conversion
• Use JSONP for cross server data (flickr,
  twitter, delicious, etc)
• JSON simp...
Twitter Example
// Run when the DOM has completed.
// i.e. don’t hang on a script request
$(funtion () {
  var url = ‘http...
$.ajax
$(‘form.register’).submit(function () {
  var el = this; // cache for use in success function
  $.ajax({
    url : ...
Effects
$(this).slideDown();
Base Effects
$(‘div:hidden’).show(200, fn);
$(‘div:visible’).hide(200);
$(‘div’).fadeIn(200);
$(‘div’).slideDown(100);
$(‘...
Utilities
$.browser.version
Utilities

• Iterators: each, map, grep
• Browser versions, model and boxModel
  support
• isFunction
Core Utilities
• jQuery can plays with others!
• Good guys come last
 $ === jQuery; // true
 $ === $j; // false
 $j = $.no...
Plugins
$(‘#emails .subjects’).doMagic()
Plugins

• Simple to write
• Makes your code more reusable
• Don’t break the chain!
Simple Plugin
jQuery.fn.log = function () {
  // returning continues the chain
  return this.each(function() {
    if (thi...
Core Utilities
• Extend jQuery, merge objects and create
  settings from defaults


 var defaults = { ‘limit’ : 10, ‘dataT...
More Info
Remy Sharp:              Resources:
                         jquery.com
remy@leftlogic.com
                     ...
Upcoming SlideShare
Loading in …5
×

DOM Scripting Toolkit - jQuery

17,937 views

Published on

Detailed presentation on the jQuery API with a few details about jQuery you may not have used yet.

Published in: Technology

DOM Scripting Toolkit - jQuery

  1. 1. The DOM Scripting Toolkit: jQuery Remy Sharp Left Logic
  2. 2. Why JS Libraries? • DOM scripting made easy • Cross browser work done for you • Puts some fun back in to coding
  3. 3. Why jQuery? • Lean API, makes your code smaller • Small (16k gzip’d), encapsulated, friendly library - plays well! • Plugin API is really simple • Large, active community • Big boys use it too: Google, BBC, Digg, Wordpress, Amazon, IBM.
  4. 4. What’s in jQuery? • Selectors & Chaining • DOM manipulation • Events • Ajax • Simple effects
  5. 5. $ function
  6. 6. $ • Selectors • DOM elements or raw HTML • “Ready” functions
  7. 7. $ • $(‘ul’) • $(document.createElement(‘ul’)) • $(‘<ul />’) • $(fn)
  8. 8. Selectors $(‘#emails a.subject’);
  9. 9. Selectors • “Find something, do something with it” • CSS 1-3 selectors at the core of jQuery • Custom selectors
  10. 10. CSS Selectors $(‘div’) $(‘div.foo’) $(‘a[type=”application/pdf”]’) $(‘tr td:first-child’)
  11. 11. Tricky Selector <div id=“content.block” /> $(‘#content.block’) // won’t work :-( $(‘#content.block’) // will work :-)
  12. 12. Custom Selectors $(‘div:visible’) $(‘:animated’) $(‘:input’) $(‘tr:odd’)
  13. 13. Custom selectors • Roll your own $.expr[‘:’], { within: ‘jQuery(a).parents(m[3]).length > 0’ }); $(‘a.subject’).is(‘:within(“#email”)’);
  14. 14. Selector Performance $(‘#email’) // same as getElementById $(‘.email’) // like getElementsByTagName // using context $(‘div.email’) $(‘#emails .subject’) $(‘.subject’, this) // Caching var $subjects = $(‘#emails .subject’);
  15. 15. Chaining $(‘#emails .subjects’) .click() .addClass(‘read’);
  16. 16. Chaining • jQuery returns itself * • We can use the selector once, and keep manipulating * except when requesting string values, such as .css() or .val()
  17. 17. Chaining Example // simple tabs $(‘a.tab’).click(function () { // tabs = $(‘div.tab’) $tabs .hide() .filter(this.hash) // refers to page.html#hash .show(); });
  18. 18. More Chaining var image = new Image(); $(image) .load(function () { // show new image }) .error(function () { // handle error }) .attr(‘src’, ‘/path/to/large-image.jpg’);
  19. 19. Working the DOM $(this).addClass(‘read’).next().show();
  20. 20. DOM Walking • Navigation: children, $(‘div’) parent, parents, siblings, .find(‘a.subject’) .click(fn) next, prev .end() // strip filter • Filters: filter, find, not, eq .eq(0) // like :first .addClass(‘highlight’); • Collections: add, end • Tests: is
  21. 21. Manipulation • Inserting: after, append, before, prepend, html, text, wrap, clone • Clearing: empty, remove, removeAttr • Style: attr, addClass, removeClass, toggleClass, css, hide, show, toggle var $a = $(document.createElement(‘a’)); // or $(‘<a>’) $a.css(‘opacity’, 0.6).text(‘Click!’).attr(‘href’, ‘/home/’); $(‘div’).empty().append(a);
  22. 22. Data • $(el).data(‘type’, ‘forward’); .data() clean way of linking data to element var types = • Storing data directly $(‘a.subject’).data(‘type’); against elements can $(‘a.subject’).removeData(); cause leaks • All handled by jQuery’s garbage collection
  23. 23. Events $(‘a.subject’).click();
  24. 24. DOM Ready • Runs after DOM, but before images $(document).ready(function () {}) // or as a shortcut: $(function () {})
  25. 25. Binding • Manages events and garbage collection • Event functions are bound to the elements matched selector • Also supports .one() $(‘a.reveal’).bind(‘click’, function(event) { // ‘this’ refers to the current element // this.hash is #moreInfo - mapping to real element $(this.hash).slideDown(); }).filter(‘:first’).trigger(‘click’);
  26. 26. Helpers • Mouse: click, dlbclick, mouseover, toggle, hover, etc. • Keyboard: keydown, keyup, keypress • Forms: change, select, submit, focus, blur • Windows: scroll • Windows, images, scripts: load, error
  27. 27. Custom Events • Roll your own • Bind to element (or elements) • Trigger them later and pass data $(‘div.myWidget’).trigger(‘foo’, [123/*id*/]); // id access via // .bind(‘foo’, function (event, id, etc) {})
  28. 28. Event Namespaces • $(‘a’).bind(‘click.foo’, fn); Support for event subsets via namespaces $(‘a’).unbind(‘.foo’); • If you don’t want to unbind all type X events - use namespaces
  29. 29. Ajax $.ajax({ url : ‘/foo’, success : bar });
  30. 30. Ajax Made Easy • Cross browser, no hassle. • $.ajax does it all • Helpers $.get, $.getJSON, $.getScript, $.post, $.load • All Ajax requests sends: X-Requested-With = XMLHttpRequest
  31. 31. Simple Ajax /* Loads the #links element with the content from link.html matched in the selector */ $(‘#links’).load(‘link.html #links li’);
  32. 32. JSON for Data • Uses eval for conversion • Use JSONP for cross server data (flickr, twitter, delicious, etc) • JSON simple to use, and less space than XML
  33. 33. Twitter Example // Run when the DOM has completed. // i.e. don’t hang on a script request $(funtion () { var url = ‘http://www.twitter.com/statuses/user_timeline/rem.json? callback=?’; $.ajax({ dataType: ‘jsonp’, url: url, success: function (data) { $(‘#status’).html(data[0].text); // update with my latest tweet } }); });
  34. 34. $.ajax $(‘form.register’).submit(function () { var el = this; // cache for use in success function $.ajax({ url : $(this).attr(‘action’), type : ‘post’, data : { ‘username’ : $(‘input.username’, this).val() }, beforeSend : showValidatingMsg, // function dataType : ‘json’, success : function (data) { // do something with data - show validation message }, error : function (xhr, status, e) { // handle the error - inform the user of problem console.log(xhr, status, e); } }); return false; // cancel default browser action });
  35. 35. Effects $(this).slideDown();
  36. 36. Base Effects $(‘div:hidden’).show(200, fn); $(‘div:visible’).hide(200); $(‘div’).fadeIn(200); $(‘div’).slideDown(100); $(‘div’).animate({ ‘opacity’ : 0.5, ‘left’ : ‘-=10px’ }, ‘slow’, fn)
  37. 37. Utilities $.browser.version
  38. 38. Utilities • Iterators: each, map, grep • Browser versions, model and boxModel support • isFunction
  39. 39. Core Utilities • jQuery can plays with others! • Good guys come last $ === jQuery; // true $ === $j; // false $j = $.noConflict(); // store jQuery in $j $j === $; // false $j === jQuery; // true
  40. 40. Plugins $(‘#emails .subjects’).doMagic()
  41. 41. Plugins • Simple to write • Makes your code more reusable • Don’t break the chain!
  42. 42. Simple Plugin jQuery.fn.log = function () { // returning continues the chain return this.each(function() { if (this.nodeName == ‘A’) { console.log(this.href); } }); }; $(‘a’).log().filter(‘[hash=#first]’).log()
  43. 43. Core Utilities • Extend jQuery, merge objects and create settings from defaults var defaults = { ‘limit’ : 10, ‘dataType’ : ‘json’ }; var options = { ‘limit’ : 5, ‘username’ : ‘remy’ }; var settings = $.extend({}, defaults, options); // settings = { ‘limit’ : 5, ‘dataType’ : ‘json’, ‘username’ : ‘remy’ }
  44. 44. More Info Remy Sharp: Resources: jquery.com remy@leftlogic.com docs.jquery.com leftlogic.com groups.google.com/group/ jquery-en remysharp.com ui.jquery.com jqueryfordesigners.com learningjquery.com

×