Intro to jQuery

Buffalo Barcamp - March 2009 Ralph Whitbeck (ralphwhitbeck.com)

What is jQuery?

• An open source javascript library that simplifies the interaction between HTML and JavaScript.

Focus of jQuery

$("div").addclass("special");

• Initiate jQuery object - $ • Find some elements - ("div")• Do something - .addclass("special")

What can jQuery do?

• Selectors o Sizzle

• Attributes o attr()o addClass()  o val(), html(), text()

What can jQuery do?

• Traversing o .eq(), .find()

• Manipulationo .append(). appendTo(), .prepend() o .after(), .before()  o .wrap()

What can jQuery do?

• CSSo .css(), .width(), .height()

• Eventso .trigger(), .live()o .mouseup(), .mousedown()  

• Effectso .show(), .hide()o .fadeIn(), .fadeOut()

What can jQuery do?

• AJAXo .ajax()

• Utilitieso .each()

jQuery is Extensible

• Thousands of plugins • Plugin Repository

o http://plugins.jquery.com 

jQuery UI

• Official jQuery Project• Collection of UI plugins

o Interactions Draggable Droppable

o Widgets Accordian DatePicker

o Effects Show/Hide

  

jQuery Partners

• Googleo AJAX APIo Link to jQuery and reap the benefits in a CDN

• Microsofto Support for jQuery intellisense in Visual Studio 2008

  

Demos

 

How can you learn jQuery?

Books    

jQuery in ActionLearning jQuery 1.3

How can you learn jQuery?

Blogs • jQuery Blog (http://blog.jquery.com)• Learning jQuery (http://www.learningjquery.com/)• John Resig (http://ejohn.org) • Ralph Whitbeck (http://ralphwhitbeck.com)

How can you learn jQuery?

Twitter jQuery (@jquery)

jQuery UI (@jqueryui)

jQuery Sites (@jquerysites)

John Resig (@jeresig)

Rey Bango (@reybango) Jörn Zaefferer (@bassistance) Karl Swedberg (@kswedberg) Me (@RedWolves)

Twitter Search "jQuery"

Questions

You can find all the links I talked about tonightin my BarCampBuffalo Delicious tag.

http://tinyurl.com/bcbRalph