an in-depth look at jquery
TRANSCRIPT
![Page 1: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/1.jpg)
An in-depth look at
with Paul Bakaus
![Page 2: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/2.jpg)
Web developing
![Page 3: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/3.jpg)
Web developer
![Page 4: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/4.jpg)
• ..the DOM
• verbose
• horribly inefficient
• Cross-browser issues
• CSS
• JavaScript
Has to fight against..
![Page 5: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/5.jpg)
Meet jQuery
![Page 6: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/6.jpg)
jQuery is not a framework.
![Page 7: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/7.jpg)
jQuery is a library.
![Page 8: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/8.jpg)
Application / Website
Framework / Library
Framework Library
![Page 9: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/9.jpg)
uh oh, no OOP?
![Page 10: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/10.jpg)
A thought problem.
• JavaScript is entirely object oriented - almost to the extend of Ruby!
• Unless most others, we don‘t hate JavaScript. Why simulate another language?
![Page 11: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/11.jpg)
Basic features
![Page 12: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/12.jpg)
The jQuery way
• Grab something and do something with it
• Human readable syntax
• Cross-browser normalization
• Chaining:$("<div/>") .html("yay!") .appendTo("body")
![Page 13: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/13.jpg)
Feature sets
Selections
DOM Traversing
DOM Manipulations
Attributes & CSS
Events
Animation
Ajax
![Page 14: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/14.jpg)
Selections• CSS-based selections:
$("#id") / $(".class")
• Grab elements directly:$(DOMelement)
• Basic filters::even, :odd, :first, :last
• Content filters::contains(), :empty, :has(), :parent
• Visibility filters::hidden, :visible
• Attribute filters:[attr], [attr=value]
• Child filters::nth-child(), :first-child, :last-child, :only-child
• Forms::input, :text, :password, :radio, :hidden
• Form filters::enabled, :disabled, :checked, :selected
![Page 15: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/15.jpg)
DOM Traversing• Remove from collection:
filter(), not(), slice()
• Add to collection:add()
• Traverse:
• children(), parent(), parents()
• next(), prev(), siblings()
![Page 16: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/16.jpg)
DOM Manipulations• Changing contents:
html(), text()
• Inserting inside:append(), appendTo(), prepend(), prependTo()
• Inserting outside:after(), before(), insertAfter(), insertBefore()
• Inserting around:wrap(), wrapAll, wrapInner()
• Replacing:replaceWith(), replaceAll()
• Removing:empty(), remove()
• Copying:clone()
![Page 17: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/17.jpg)
Attributes & CSS• Attributes:
attr(), removeAttr(), val()
• Class:addClass(), hasClass(), removeClass(), toggleClass()
• CSS:css()
• Positioning:offset(), position(), scrollTop(), scrollLeft()
• Height and width:height(), width(), innerHeight(), innerWidth(), outerHeight(), outerWidth()
![Page 18: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/18.jpg)
Events• Page load:
ready()
• Event handling:bind(), trigger(), unbind()
• Live events:live(), die()
• Interaction helpers:hover(), toggle()
• Event helpers:blur(), change(), click(), dblclick(), error(), focus(), keydown, keypress(), keyup(), load() ...
![Page 19: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/19.jpg)
Around jQueryUseful JavaScript
![Page 20: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/20.jpg)
Prototypal inheritance
![Page 21: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/21.jpg)
Basic understandingObjects inherit from other objects
JavaScript inheritance is implicit
JavaScript supports true encapsulation
Syntax: new, instanceof, Object.prototype
![Page 22: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/22.jpg)
Scoping & Anonymous functions
(function() {})()
![Page 23: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/23.jpg)
Recursive anonymous functions
arguments.callee
![Page 24: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/24.jpg)
Shorter SyntaxSpice up your JavaScript
![Page 25: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/25.jpg)
• firstCondition() && secondCondition()
• var one = 1, two = 2, three = 3;
• condition ? foo() : bar()
• var available = foo || bar
• (new Date()).getTime()
• !!()
![Page 26: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/26.jpg)
Within jQuery
![Page 27: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/27.jpg)
Iteration$(..).each(fn)
![Page 28: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/28.jpg)
Extending$.extend(firstObject, secondObject, ..)
![Page 29: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/29.jpg)
Events• Event-driven architecture
• Event namespacing
• Custom events
• Event delegation
• Live events
![Page 30: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/30.jpg)
Client-side programming is an inherently asychronous
world.
![Page 31: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/31.jpg)
Event-driven code• Ericsson uses Erlang to
control their telecommunication infrastructure
• In Erlang, modules talk to other modules through event-passing
• Most common modules: DOM elements
• Any JS-Object can be a container
• Each module needs to know very little - it doesn‘t care how to get information
• Any number of modules can be waiting to receive information back at the same time without hanging the browser
![Page 32: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/32.jpg)
Event namespacing
$("div") .bind("click", function() { alert("foo"); }) .$("div").bind("click.bar", function() {
alert("bar");});
$("div").trigger("click"); //Alerts foo and bar$("div").trigger("click.bar"); //Alerts only bar
$("div").unbind(".bar") //Unbinds all .bar events
![Page 33: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/33.jpg)
Custom events
• Events don‘t have to be browser events - invent your own!
• Events can be bound to anything - even generic Javascript objects
• Use the data API to pass along data with DOM elements without causing memory leaks
![Page 34: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/34.jpg)
Event delegation
![Page 35: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/35.jpg)
• Scales to any number of elements
• No need to rebind / unbind on DOM changes
• 1. Binds events to a root node instead of the actual context node
• 2. Checks for actual context during the trigger
![Page 36: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/36.jpg)
(Demo)
![Page 37: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/37.jpg)
Live events
• New in jQuery 1.3
• Makes event delegation totally transparent
• $().live(name, fn) to bind
• $().die(name, fn) to remove
![Page 38: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/38.jpg)
Extending jQuery
![Page 39: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/39.jpg)
What can be extended?
Functions Selectors Animations
• most jQuery plugins
• $(..).doSomething()• $(‘ div:pseudo‘) • $(..).animate({ property: 100 })
![Page 40: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/40.jpg)
Functions
• jQuery.fn is the plugin namespace
• jQuery.fn.myFunction = fn results in $(..).myFunction()
• In your function, this points to the current selection, and all arguments are passed along
![Page 41: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/41.jpg)
Selectors
• The selector can be extended with custom pseudo selectors
• Simply extend jQuery.expr[":"]
• key is your pseudo selector
• value is a function that receives the element as first arg and needs to return a boolean
![Page 42: An in-depth look at jQuery](https://reader034.vdocuments.site/reader034/viewer/2022050613/5452fa07af7959af088b65b1/html5/thumbnails/42.jpg)
Animations
• Add your own properties to animate (i.e. ,corner‘)
• Extend jQuery.fx.step:
• key is the property name
• value is a function that receives an fx object