Your SlideShare is downloading. ×
0
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Remy Sharp The DOM scripting toolkit jQuery

2,906

Published on

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

No Downloads
Views
Total Views
2,906
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
42
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. The DOM Scripting Toolkit: jQuery Remy Sharp Left Logic
  • 2. Why JS Libraries? • DOM scripting made easy • Cross browser work done for you • Puts some fun back in to coding
  • 3. Why jQuery? • Lean API, makes your code smaller • Small (15k 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. What’s in jQuery? • Selectors & Chaining • DOM manipulation • Events • Ajax • Simple effects
  • 5. Selectors $(‘#emails a.subject’);
  • 6. Selectors • “Find something, do something with it” • The dollar function • CSS 1-3 selectors at the core of jQuery • Custom selectors
  • 7. CSS Selectors $(‘div’) $(‘div.foo’) $(‘a[type=”application/pdf”]’) $(‘tr td:first-child’)
  • 8. Custom Selectors $(‘div:visible’) $(‘:animated’) $(‘:input’) $(‘tr:odd’)
  • 9. Selector Performance $(‘#email’) // same as getElementById $(‘.email’) // slower on a big DOM // using context $(‘#emails .subject’) $(‘.subject’, this) // Caching var subjects = $(‘#emails .subject’);
  • 10. Chaining $(‘#emails .subjects’) .click() .addClass(‘read’);
  • 11. Chaining • jQuery returns itself * • We can use the selector once, and keep manipulating • Can reduce size of our code
  • 12. Chaining • jQuery returns itself * • We can use the selector once, and keep manipulating • Can reduce size of our code * except when requesting string values, such as .css() or .val()
  • 13. Chaining in Action var image = new Image(); $(image) .load(function () { // show new image }) .error(function () { // handle error }) .attr(‘src’, ‘/path/to/large-image.jpg’);
  • 14. More Chaining // simple tabs $(‘a.tab’).click(function () { $(tabs) .hide() .filter(this.hash) .show(); }); // live example
  • 15. Collections $(‘#emails .subjects’).each(fn)
  • 16. Collections • .each(fn) Iterates through a collection applying the method • .map(fn) Iterates through collection, returning array from fn
  • 17. More Collections • Utility functions • $.grep, $.map • merge, unique
  • 18. Working the DOM $(this).addClass(‘read’).next().show();
  • 19. 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(‘top’); • Collections: add, end • Tests: is
  • 20. 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(‘My Link’).attr(‘href’, ‘/home/’); $(‘div’).empty().append(a);
  • 21. Data • Storing data directly $(this).data(‘type’, ‘forward’); against elements can var types = cause leaks $(‘a.subject’).data(‘type’); • .data() clean way of $(‘a.subject’).removeData(); linking data to element • All handled by jQuery’s garbage collection
  • 22. Events $(‘a.subject’).click();
  • 23. DOM Ready • Most common event: DOM ready $(document).ready(function () {}) // or as a shortcut: $(function () {})
  • 24. 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’);
  • 25. 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
  • 26. Custom Events • Roll your own • Bind to element (or elements) • Trigger them later and pass data $(‘div.myWidget’).trigger(‘foo’, { id : 123 }); // id access via event.data.id
  • 27. Event Namespaces • Support for event $(‘a’).bind(‘click.foo’, fn); subsets via namespaces $(‘a’).unbind(‘.foo’); • If you don’t want to unbind all type X events - use namespaces
  • 28. Ajax $.ajax({ url : ‘/foo’, success : bar });
  • 29. 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
  • 30. $.ajax $(‘form.register’).submit(function () { var el = this; // cache for use in success function $.ajax({ url : $(this).attr(‘action’), data : { ‘username’ : $(‘input.username’).val() }, // ‘this’ is the link beforeSend : showValidatingMsg, // function dataType : ‘json’, type : ‘post’, 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 });
  • 31. Effects $(this).slideDown();
  • 32. 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)
  • 33. Utilities $.browser.version
  • 34. Utilities • Iterators: each, map, grep • Browser versions, model and boxModel support • isFunction
  • 35. Core Utilities • jQuery can plays with others! $j = $.noConflict(); $j === $ // false
  • 36. 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’ }
  • 37. More Info Remy Sharp: Resources: jquery.com remy@leftlogic.com docs.jquery.com leftlogic.com groups.google.com/group/ remysharp.com jquery-en ui.jquery.com learningjquery.com jqueryfordesigners.com

×