E4D js conference jquery for professionals - js-il.com
-
Upload
eyal-vardi -
Category
Technology
-
view
228 -
download
0
description
Transcript of E4D js conference jquery for professionals - js-il.com
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Yitzchak MeirovichWeb Developer, Instructor
Israel Finance Ministrysite: javascriptphp.com
jQuery for Professionals
Israel JavaScript Conference
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Why Optimize jQuery?
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
DOM
• DOM Manipulation• Looping Made Easier
Events
• AJAX• Event Optimization
Extras
• Animations• Plugins
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
The DOM
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Object Literals
{name: value,name: function,name: object
}
Everything in JS is an object
JSON (JavaScript Object Notation)
Easy, efficient way to store data
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Sizzle Selector Engine
$(".class > element")
$(".class .class .class")
$("element .class #id")
$("element [name=value]")
$("#id")
$(".class")
$("element")
$("[name=value]")
Standard Using CSS Selectors
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Bottom Up Selection EnginejQuery selector reads from Right-to-Left
http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-think-right-to-left-with-jquery/
$('.box p');
LTR ? .box => p children
RTL ? All p tags => .box parent nodes
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Selector OptimizationCaching Queries
Simple vs Compound Queries
Query OrderQuery by id --> element --> class --> compound
Use $().find(), .siblings(), .next(), prev(), .first(), .parent()
var body=$(‘body’); var main=$(‘#main’)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
DOM Manipulation
.hide()/.show()/.css()
.attr() vs .prop()
.clone()
.append() vs .prepend()
Use doc fragments
Reflow events
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
The power of method chaining
$(‘selector’).css().show().animate().end().css()
How to write your own method chains
Chaining Methods
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Looping Made Easier
What is the fastest JavaScript looping construct?
do while loop
for in loop
for loop
while loop
Arrays vs Object looping
$.each(arr,function(i,obj){
…})
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Events
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
AJAX
JSON
JSONP
Array
XML
$.ajax()
$.getJSON()
$.get()
$.post()Cross-domain
Callback Fx
Server Dependency
JSON Only
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Events and Delegation
Event Delegation and bubbling
History of events in browsers
jQuery and event normalization
Custom events
Namespace eventsname.space
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Extras
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Animations
swing vs linear
$.animate()
Params
Callback
Built-in
$().animate({params,key:value
},speed,callback)
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
PluginsThe basics of a jQuery
pluginHow to use a plugin
How to modify a plugin
How to write a plugin
Issues with open source plugins
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
What’s New in 1.9 vs 2.0Development path
Legacy browser support
New / Deprecated functions
Plugin impact
Israel JavaScript Conference | 03 – 6325707 | [email protected] | www.js-il.com |
Thanksjavascriptphp.com
Yitzchak MeirovichWeb Developer, [email protected]