1. jQuery New Evolution
Allan Huang @ esobi Inc.

2. Agenda




jQuery 1.9 Changes
jQuery 1.9 New Features
jQuery 2.0 Changes
Browser Feature Detection

Modernizr

3. jQuery 1.9

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. jQuery 2.0

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. 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. 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. 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. Modernizr – JavaScript Features
Firefox 23
Chrome 29

20. Modernizr – CSS Features

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. Q&A