JQuery New Evolution


Published on

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

JQuery New Evolution

  1. 1. jQuery New Evolution Allan Huang @ esobi Inc.
  2. 2. Agenda     jQuery 1.9 Changes jQuery 1.9 New Features jQuery 2.0 Changes Browser Feature Detection  Modernizr
  3. 3. jQuery 1.9
  4. 4. jQuery 1.9 Changes (1)        .toggle(Fn, Fn, ... ) removed, toggle() instead  The former is being removed to reduce confusion and improve the potential for modularity in the library. jQuery.browser() removed, use Modernizr instead .live() removed, use .on() instead .die() removed, use .off() instead jQuery.sub() removed .add()  Connected nodes are always returned in document order and disconnected nodes are placed at the end of the set. .addBack(selector) replaces .andSelf()  Add the previous set of elements on the stack to the current set, optionally filtered by a selector.
  5. 5. jQuery 1.9 Changes (2)  .after(), .before(), and .replaceWith() with disconnected nodes   .appendTo, .insertBefore, .insertAfter, .replaceAll   Return an Unmodified jQuery set These methods always return a new set, making them consistently usable with chaining and the .end() method. Global AJAX events should be attached to Document element   Global AJAX events are only triggered on the document element e.g. $(document).ajaxStart(Fn)
  6. 6. jQuery 1.9 Changes (3)  Checkbox/radio state in a trigger()ed "click" event   Order of triggered "focus" events   When the user clicks on a checkbox or radio button, the event handler sees the node in the state it will be in if event.preventDefault() is not called on the node. Browser first fires a blur event for the previously focused element and then a focus event for the new element. jQuery(htmlString) vs. jQuery(selectorString)  A string is only considered to be HTML if it starts with a less-than ("<") character.
  7. 7. jQuery 1.9 Changes (4)  Events not fired by the .data() method; names with periods   Ordering of disconnected nodes within a jQuery set   .data() method had an undocumented way to monitor setting and getting of values that was removed. Connected nodes are always placed at the beginning of the set in document order, and disconnected nodes are placed behind them. Loading and running scripts inside HTML content  Executed JavaScript won't be executed again even if they are removed and reinserted.
  8. 8. jQuery 1.9 Changes (5)  .attr() vs. .prop()    $("input").attr("type", newValue) in oldIE   Set the “type” of an <input> element if browser allows it "hover" pseudo-event   $(elem).attr("checked", "checked") vs. $(elem).prop("checked", true) $(elem).removeAttr("checked") vs. $(elem).prop("checked", false) It’s no longer supported as a synonym for "mouseenter mouseleave“, attach and trigger a custom "hover" event .selector property on jQuery objects removed  jQuery no longer attempts to maintain this property in chained methods, since the use of chained methods was never supported with .live().
  9. 9. jQuery 1.9 Changes (6)   jQuery.attr(elem, name, value, pass) removed jQuery.ajax returning a JSON result of an empty string   An empty string returned for JSON data is considered to be malformed JSON and this will now throw an Error jQuery.proxy() context   The function returned by calling jQuery.proxy with a Falsy Context will preserve its this object for the provided function. What is the meaning of “falsy” in Javascript?  false (the boolean false), “” (an empty string), 0 (zero), null, undefined, NaN
  10. 10. jQuery 1.9 Changes (7)  .data("events") removed   Removed properties of the Event object   attrChange, attrName, relatedNode, srcElement Undocumented arguments of API methods   Retrieve jQuery's undocumented internal event data structure for an element jQuery.data(), jQuery.removeData(), jQuery.attr() jQuery.data() jQuery.removeData() Other undocumented properties and methods  jQuery.deletedIds, jQuery.uuid, jQuery.attrFn, jQuery.clean(), jQuery.event.handle(), jQuery.offset.bodyOffset()
  11. 11. jQuery 1.9 New Features (1)  New .css() multi-property getter    Enhanced cross-browser CSS3 support   e.g. var dims = $("#box").css([ "width", "height", “color" ]);  { width: "10px", height: "20px", color: "#D00DAD" } :nth-last-child, :nth-of-type, :nth-last-of-type, :first-of-type, :last-of-type, :only-of-type, :target, :root, :lang New .finish() method  .finish() method stops all queued animations and places the element(s) in their final state  .stop() + .clearQueue()
  12. 12. jQuery 1.9 New Features (2)  Source map support   When minify and combine JS files, and generate a source map which holds information about original JS files When you query a certain line and column number in your generated JS you can do a lookup in the source map which returns the original location
  13. 13. jQuery Migrate Plugin   jQuery Migrate plugin can be used to detect and restore APIs or features that have been deprecated in jQuery and removed as of version 1.9. Development (uncompressed) version of the plugin generates console warning messages whenever any of its functionality is called.
  14. 14. jQuery 2.0
  15. 15. jQuery 2.0 Changes (1)  No more support for IE6/7/8   Also affect IE9/10 Compatibility View Add an X-UA-Compatible Meta Tag or HTTP Header   IE=edge, chrome=1 Reduced size   12% smaller than jQuery 1.9 No support for Android WebKit 2.x browser in future
  16. 16. jQuery 2.0 Changes (2)  Custom builds for even smaller files    The custom build feature has been refined in version 2.0 so you can exclude any of 16 unused modules and shrink jQuery below 10Kb. jQuery 1.9 API equivalence Stop supporting jQuery 1.x in an array of environments in future  Firefox OS, Chrome OS, Windows 8 Store, and BlackBerry 10 WebWorks apps.
  17. 17. jQuery 2.0 Next Step   Minimize API divergence between the 1.x and 2.x branches Maintain feature parity between 1.10 and 2.0, 1.11 and 2.1, etc.
  18. 18. Browser Feature Detection   Modernizr runs quickly on page load to detect features; it then creates a JavaScript object – window.Modernizr with the results, and adds CSS classes to the <html> element for you to key your CSS on. Modernizr support IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome.
  19. 19. Modernizr – JavaScript Features Firefox 23 Chrome 29
  20. 20. Modernizr – CSS Features
  21. 21. Reference  jQuery 1.9 升級指南 What’s New in jQuery 1.9 jQuery Core 1.9 Upgrade Guide What is the meaning of “falsy” in Javascript? jQuery Migrate Plugin – Warning Messages jQuery 2.0 Released What’s New in jQuery 2.0 jQuery – New Wave JavaScript  Introduction to JavaScript Source Map  What is X-UA-Compatible when it references IE=edge,chrome=1? Modernizr 源碼剖析 Modernizr Documentation         
  22. 22. Q&A