Scribd
Upload
82 views

J Query

This document provides an overview and introduction to the jQuery library for making Ajax requests and manipulating the DOM easier. It discusses why a library is useful for dealing with browser inconsistencies and complex tasks. jQuery in particular is highlighted for its small size, readable code, feature set including Ajax calls, CSS selectors and event handling, excellent documentation and large community. Examples are given of how jQuery simplifies tasks like adding click handlers, animations and widgets to websites.

Uploaded by

soumikbh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
82 views

J Query

This document provides an overview and introduction to the jQuery library for making Ajax requests and manipulating the DOM easier. It discusses why a library is useful for dealing with browser inconsistencies and complex tasks. jQuery in particular is highlighted for its small size, readable code, feature set including Ajax calls, CSS selectors and event handling, excellent documentation and large community. Examples are given of how jQuery simplifies tasks like adding click handlers, animations and widgets to websites.

Uploaded by

soumikbh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 215

jQuery: Ajax Made Easy

Nathaniel T. Schutta

Who am I?

Nathaniel T. Schutta

http://www.ntschutta.com/jat/

@ntschutta
Foundations of Ajax & Pro Ajax and Java
Frameworks

UI guy
Author, speaker, teacher
More than a couple of web apps

The Plan

Why a library?
Pros and cons.
Ajax made easy.
CSS selectors.
Events.
Animations and effects.
Widgets.

Use a library.

Not using one?

Probably doing it wrong.

Ajax isnt rocket surgery.

But...doesnt mean we
should go it alone.

Several high quality


libraries to pick from.

Paradox of choice.

Most server side agnostic.

Things have improved


since the 90s!

We still have browser


issues to deal with.

<cough>IE 6.</cough>

IE 6...on the way out?

SharePoint 2010 - no IE 6.
http://blogs.msdn.com/sharepoint/archive/2009/05/07/announcingsharepoint-server-2010-preliminary-system-requirements.aspx

Google Apps...sorry IE 6.
http://googledocs.blogspot.com/2010/01/web-browsersupport-for-docs-and-sites.html

Libraries abstract some


of that away.

VM as it were.

Libraries = leverage.

Most have:

XHR wrapper.

CSS selectors.

Event handling.

Widgets, effects, animations.

JavaScript utilities.

How do you choose?

Many work well together.

Ask yourself...

What do you want?

Widgets? Complete
environment? Utilities?

Can you read the code?

May need to from


time to time.

Hows the docu?

What does Google return?

What is the community like?

When was the last update?

Can you get help?

Have to play with them.

Libraries have flavors.

Do you like the


librarys style?

Does it solve
YOUR problems?

Why jQuery?

Small.

Readable code.

Feature packed: XHR,


CSS selectors, etc.

Excellent documentation.

Active mailing list.

Widely used.

jQuery - bit of a
reaction to Prototype.

Each uses $ differently!

Each has influenced


the other though...

Better, each has


improved the other.

Pros and Cons.

Focussed on
HTML elements.

Doesnt pollute
global namespace.

DOM manipulation a snap.

Extensive plugins.

Widely used in a
variety of projects.

Not perfect though ;)

Parameter ordering in
APIs not always intuitive.

Plugins required for a


variety of functionality.

Some functions
reassign this.

This is a bit nit-picky!

Ajax made easier.

XHR isnt complicated.

But abstractions help.

ActiveX vs. JS native...

All the wrappers


are pretty similar.

URI to call, parameters,


HTTP method, callback.

jQuerys approach.

Variety of methods.

$.ajax(options)

Also more specific calls.

$.getJSON(url,
[data], [callback])

$.get("/DesigningForAjax/validate",
{
zip: $("#zip").val(),
city: $("#city").val(),
state: $("#state").val()
},
function(message) {
$("#messages").html(message);
});

JavaScript lacks
namespaces - thus $.

Readable?

Easy?

CSS selectors.

Want everything
with a given style?

CSS selectors are


very powerful.

Browser support
can be lacking...

Libraries come in and


smooth things out!

jQuery excels at
CSS selectors.

Top notch support.

Outstanding performance.

Browsers do the heavy


lifting when possible.

$(function(){
$('.header').click(function() {
$(this).next().toggle("blind", { direction: "vertical" }, 500);
});
});

Not bad for a few


lines of code!

Readable?

And we add a nice effect!

Little bit of code


= big return.

Event handling.

Coding to events gives


us cleaner markup.

But browsers get in


the way...again.

Unobtrusive JavaScript.

http://www.alistapart.com/articles/behavioralseparation

Library designers help us!

jQuery includes a
variety of APIs.

Including some great


helper methods.

Click, focus, hover,


keys, mice, scroll...

$(function(){
$('.header').click(function() {
$(this).next().toggle("blind", { direction: "vertical" }, 500);
});
});

Animations and effects.

Extensive add ons!

Want animations
and widgets?

jQuery has you covered.

jQuery relies on plugins.

jQuery UI.

Gives us widgets,
effects, draggable etc.

Lets add an effect!

$(function(){
$('.header').click(function() {
$(this).next().toggle("blind", { direction: "vertical" }, 500);
});
});

Very easy to
add a little flash.

Clip, drop, fold,


highlight, puff, shake...

Easy to go too far.

Seasoning, not the entree.

Blink tag anyone?

Used right, adds that


extra bit of polish.

Date picker.

HTML lacks widgets.

Bit depressing actually.

Text box, text area, drop


down, radio button...

Pretty limited.

We have options!

http://www.flickr.com/photos/ramdac/373881476/

by Jason Gulledge

Can you say easy button?

But I want options!

No worries.

Defaults are usually good.

But plenty of options.

Constructors take
optional configuration.

For example...

What about month and


year selection?

No problem!

http://www.flickr.com/photos/ramdac/373881476/

by Jason Gulledge

How about that


easy button?

Not the only options...

Supports localization.

Date range restrictions,


multi months, date formats.

Dialog.

Modality.

Web isnt very


conducive to wizards...

Do you like pop-ups?

Do your users?

We have options now!

Looks like a
popup...but its not.

Can actually be modal.

What about a minified file?

Download builder!

Pick your components.

Handles dependencies.

Gives you a custom


minified file.

Can also pick and


tweak themes.

Themes.

Default theme is fine.

But its not your


only option.

ThemeRoller.

http://jqueryui.com/themeroller/

Pick a prebuilt theme.

Dont like those options?

Tweak away!

WYSIWYG.

Better than hand


rolled CSS?

You can also modify


the CSS directly.

Or write it all yourself!

Plugins.

Weve looked at a
couple of widgets.

But youve got


other options.

Hundreds of extensions.

Divided into categories.

Ajax, animation, events,


menus, navigation, etc.

Searchable.

User ratings.

Paradox of choice?

Variable quality...

Compatibility issues.

playing the "which JQuery


version" will make all of these
different plugins work! Arrggghhh!
#jquery
Brian Sam-Bodden

http://twitter.com/bsbodden/status/9155328185

Very extensible.

Help!

http://docs.jquery.com/Main_Page

Good tutorials.

Plenty of books.

Google friendly ;)

Code is well written.

Easy to read.

Mailing list is vibrant.

http://docs.jquery.com/Discussion

What about Prototype?

Great library.

Which one is better?

It depends!

Honestly, both are great.

Cant go wrong either way.

Passion on both sides...

Pros and cons.


http://blog.thinkrelevance.com/2009/1/12/
why-i-still-prefer-prototype-to-jquery

Play with them.

Which one solves


your problems?

Dont like either?

Luckily, youve got


plenty of choices!

Questions?!?

Thanks!
Please complete your surveys.

You might also like