jQuery New Evolution

Allan Huang @ esobi Inc.

Agenda

jQuery 1.9 Changes jQuery 1.9 New Features jQuery 2.0 Changes Browser Feature Detection

Modernizr

jQuery 1.9

jQuery 1.9 Changes (1)

.toggle(Fn, Fn, ... ) removed, toggle() instead The former is being removed to reduce confusion and improve th

e potential for modularity in the library. jQuery.browser() removed, use Modernizr instead .live() removed, use .on() instead .die() removed, use .off() instead jQuery.sub()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.

jQuery 1.9 Changes (2)

.after(), .before(), and .replaceWith() with disconnected nodes Return an Unmodified jQuery set

.appendTo, .insertBefore, .insertAfter, .replaceAll These methods always return a new set, making them cons

istently usable with chaining and the .end() method. Global AJAX events should be attached to Docume

nt element Global AJAX events are only triggered on the document ele

ment e.g. $(document).ajaxStart(Fn)

jQuery 1.9 Changes (3)

Checkbox/radio state in a trigger()ed "click" event When the user clicks on a checkbox or radio button, the ev

ent handler sees the node in the state it will be in if event.preventDefault() is not called on the node.

Order of triggered "focus" events Browser first fires a blur event for the previously focused el

ement 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.

jQuery 1.9 Changes (4)

Events not fired by the .data().data() method; names with periods .data().data() method had an undocumented way to monitor

setting and getting of values that was removed. Ordering of disconnected nodes within a jQuery set

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.

jQuery 1.9 Changes (5)

.attr() vs. .prop() $(elem).attr("checked", "checked") vs. $(elem).prop("checked", true) $(elem).removeAttr("checked") vs. $(elem).prop("checked", false)

$("input").attr("type", newValue) in oldIE Set the “type” of an <input> element if browser allows it

"hover" pseudo-event It’s no longer supported as a synonym for "mouseenter mo

useleave“, attach and trigger a custom "hover" event .selector property.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().

jQuery 1.9 Changes (6)

jQuery.attr(elem, name, value, pass)jQuery.attr(elem, name, value, pass) removed jQuery.ajax returning a JSON result of an empty stri

ng 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, un

defined, NaN

jQuery 1.9 Changes (7)

.data("events").data("events") removed Retrieve jQuery's undocumented internal event da

ta structure for an element Removed properties of the Event object

attrChange, attrName, relatedNode, srcElementattrChange, attrName, relatedNode, srcElement

Undocumented arguments of API methods jQuery.data()jQuery.data(), jQuery.removeData()jQuery.removeData(), jQuery.attr()jQuery.attr()

Other undocumented properties and methods jQuery.deletedIdsjQuery.deletedIds, , jQuery.uuidjQuery.uuid, , jQuery.attrFnjQuery.attrFn, , jQuery.cleanjQuery.clean

()(), , jQuery.event.handle()jQuery.event.handle(), , jQuery.offset.bodyOffset()jQuery.offset.bodyOffset()

jQuery 1.9 New Features (1)

New .css() multi-property getter e.g. var dims = $("#box").css([ "width", "height", “color" ]); { width: "10px", height: "20px", color: "#D00DAD" }

Enhanced cross-browser CSS3 support :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()

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

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.

jQuery 2.0

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 Heade

r IE=edge, chrome=1

Reduced size 12% smaller than jQuery 1.9 No support for Android WebKit 2.x browser in future

jQuery 2.0 Changes (2)

Custom builds for even smaller files The custom build feature has been refined in versio

n 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 environ

ments in future Firefox OS, Chrome OS, Windows 8 Store, and Blac

kBerry 10 WebWorks apps.

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.

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.

Modernizr – JavaScript Features

Chrome 29Firefox 23

Modernizr – CSS Features

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

Q&A