JQuery New Evolution
-
Upload
allan-huang -
Category
Technology
-
view
409 -
download
2
Transcript of JQuery New Evolution
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