Introduction to jQuery :: CharlotteJS

introductiontojQuery

Garrett Johnson // CharlotteJS // 8-19-2010

Friday, August 20, 2010

Me?

Jr. Web Developer at Red Ventures

Student

I will program in just about anything.

Started this joint! (with a lot of help from Nathan and Aaron)


jQuery

Seriously?

"jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development."


jQuery

selectors manipulation effects

attributes css ajax

traversing events utilities


Lets Get It

A quick tour with some stops on the way. Feel free to stop and start discussion.


document.ready?

just an event.*

gets triggered once the DOM is parsed/loaded.

use as much as you want.*

just put your <script></script> prior to </body> or right below the desired element.

DOM is ready at this point.

portability?*


document.ready?

1.html


selectors

node type descendants attributes

id child expressions*

class name multiples more


selectors

2.html


selectors

cache selectors

selector context

find()

exact on the left, general on the right.

avoid pure class or node selectors

keep it simple!


selectors

3.html


wait... what the $

$ === jQuery

$() is a factory.*

returns “array like” collection of “jQuery” objects.

not just css selectors.

raw elements.*

html.*


wait... what the $

4.html


manipulation

append html detach

prepend filter each

val *class more


manipulation

5.html


traversing

parents next attributes

children siblings *all

prev find more


traversing

6.html


traversing / manipulation

once you found it. do something.

tons more features for traversing and manipulation.

the docs are awesome.


events

binding proxy shorthands*

custom live delegate

namespaces delegation* more


events

find something. bind it.

$(‘.foo’).bind(‘click’, fn);

$(‘.foo’).click(fn);

$(‘.foo’).live(‘click’, fn);

$(‘#bar’).delegate(‘.foo’, ‘click’, fn)*


events

7.html


events

bubbling.

delegating.

lower memory foot print.

performance++


events

8.html


events

event.data

clean up that repetitive code.

binding time.*


events

9.html


events

custom events

clean up that repetitive code.**

trigger time.


events

10.html


effects

hide slide fadeOut

show toggle delays

animate fadeIn more


effects

nifty....


ajax

get getJSON ajaxSetup

post ajax events*

load getScript more


ajax

shorthand methods

the core ajax method

default configuration

events

global

local


ajax

12.html


extending

plugins

expressions


extending

13.html


what else?

questions?

favorite plugins?

problems?


peace!

gtalk: gjj391

aim: gjohnson391

pdf/code will be on github.com/gjohnson


Documents

Introduction to jQuery :: CharlotteJS