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

mailto:[email protected]

http://www.js-il.com/


Why Optimize jQuery?




DOM

• DOM Manipulation• Looping Made Easier

Events

• AJAX• Event Optimization

Extras

• Animations• Plugins




The DOM




Object Literals

{name: value,name: function,name: object

}

Everything in JS is an object

JSON (JavaScript Object Notation)

Easy, efficient way to store data




Sizzle Selector Engine

$(".class > element")

$(".class .class .class")

$("element .class #id")

$("element [name=value]")

$("#id")

$(".class")

$("element")

$("[name=value]")

Standard Using CSS Selectors




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






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’)




DOM Manipulation

.hide()/.show()/.css()

.attr() vs .prop()

.clone()

.append() vs .prepend()

Use doc fragments

Reflow events




The power of method chaining

$(‘selector’).css().show().animate().end().css()

How to write your own method chains

Chaining Methods




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){

…})




Events




AJAX

JSON

JSONP

Array

XML

$.ajax()

$.getJSON()

$.get()

$.post()Cross-domain

Callback Fx

Server Dependency

JSON Only




Events and Delegation

Event Delegation and bubbling

History of events in browsers

jQuery and event normalization

Custom events

Namespace eventsname.space




Extras




Animations

swing vs linear

$.animate()

Params

Callback

Built-in

$().animate({params,key:value

},speed,callback)




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




What’s New in 1.9 vs 2.0Development path

Legacy browser support

New / Deprecated functions

Plugin impact




Thanksjavascriptphp.com

Yitzchak MeirovichWeb Developer, [email protected]




E4D js conference jquery for professionals - js-il.com

Technology

Transcript of E4D js conference jquery for professionals - js-il.com