jquery - write less, do more javascript toolkit

Introduction to jQueryWrite less, do more!

Girish Venkatachalam

Chennai

[email protected]

December 8, 2007

Basic web interface architecture

Figure: basic building blocks

HTML provides content

CSS provides appearance, placement and layout

Javascript provides dynamism and defines behavior

Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 2 / 22

html tree structure

Every html node forms part of a tree with 〈html〉 as root node

You can traverse the tree easily since it has a fixed structure

Every node has attributes and optionally child nodes

html tree structure

A simple html example

<html>

<head>

<title> A simple example </title>

</head>

<body>

<h1 align="center"> Hello world html </h1>

</body>

</html>

Fundamental building block of all web apps

Javascript to manipulate DOM elementsCascading style sheets (CSS) for appearance

Learning html is a must before we do web programming!

<html>

<head>

</head>

<body>

</body>

</html>

Fundamental building block of all web appsJavascript to manipulate DOM elements

Cascading style sheets (CSS) for appearance

<html>

<head>

</head>

<body>

</body>

</html>

Fundamental building block of all web appsJavascript to manipulate DOM elementsCascading style sheets (CSS) for appearance

<html>

<head>

</head>

<body>

</body>

</html>

Fundamental building block of all web appsJavascript to manipulate DOM elementsCascading style sheets (CSS) for appearance

What is CSS?

html supplies the content

CSS determines the beauty

What remains?

What is CSS?

What remains?

What is CSS?

What remains?

Intro to javascript

What about the behavior?

That is where a programming language like javascript comes in.

Intro to javascript

What about the behavior?

That is where a programming language like javascript comes in.

Document Object Model

What is the role of DOM in web programming?

Animations

jQuery does a marvelous job of DOM manipulations

Document Object Model

What is the role of DOM in web programming?

Animations

jQuery does a marvelous job of DOM manipulations

jQuery fundament

Tiniest js/AJAX toolkit around

Very very very powerful

Extremely well maintained with 100s of plugins

Abstracts out portability issues and javascript gunk

jQuery fundament

A jQuery code sample

$(document).ready(function() {

$(’a’).hover(function() {

$(this).hide(’slow’);

Neat eh?

This is all it takes for an animation using jQuery

You have to add it between the ’script’ tag you always use forjavascript

After all jQuery is also javascript

Without its disadvantages and ugliness. . .

Neat eh?

Another jQuery sample

$(document).ready(function (){

$(’a’).hover(function (){

},function(){

$(this).show(’fast’);

This sample builds on the previous example

This is all it takes for an animation using jQuery (once again)

But it is not just animations. . .

},function(){

Exploring jQuery

jQuery’s power comes from its powerful selectors, easy DOM andCSS manipulations, mouse and keyboard event handling and excellentsupport for AJAX programming.

John Resig achieved something revolutionary by leaving out theinessentials and keeping things small

This has led to a subculture of jQuery plugins - extensions areavailable for nearly every web design task you can think of

We shall take a peek at some of the extensions

Exploring jQuery

jQuery plugins

jScrollPane

Field plugin

Extra selectors

Visual jQuery

Cycle plugin

jqPuzzle

jTip for balloon tips (tooltip)

Impromptu

Embed videos (You canwatch mpeg videos )

Datepicker plugin

UI for drag and drop

Confirm plugin

Form handing

Keyboard shortcut handling

And much much more...

jQuery plugins

jScrollPane

Field plugin

Extra selectors

Visual jQuery

Cycle plugin

jqPuzzle

Impromptu

Datepicker plugin

Confirm plugin

Form handing

jQuery plugins

jScrollPane

Field plugin

Extra selectors

Visual jQuery

Cycle plugin

jqPuzzle

Impromptu

Datepicker plugin

Confirm plugin

Form handing

jQuery plugins

jScrollPane

Field plugin

Extra selectors

Visual jQuery

Cycle plugin

jqPuzzle

Impromptu

Datepicker plugin

Confirm plugin

Form handing

jQuery plugins

jScrollPane

Field plugin

Extra selectors

Visual jQuery

Cycle plugin

jqPuzzle

Impromptu

Datepicker plugin

Confirm plugin

Form handing

jQuery plugins

jScrollPane

Field plugin

Extra selectors

Visual jQuery

Cycle plugin

jqPuzzle

Impromptu

Datepicker plugin

Confirm plugin

Form handing

jQuery plugins

jScrollPane

Field plugin

Extra selectors

Visual jQuery

Cycle plugin

jqPuzzle

Impromptu

Datepicker plugin

Confirm plugin

Form handing

jQuery plugins

jScrollPane

Field plugin

Extra selectors

Visual jQuery

Cycle plugin

jqPuzzle

Impromptu

Datepicker plugin

Confirm plugin

Form handing

jQuery plugins

jScrollPane

Field plugin

Extra selectors

Visual jQuery

Cycle plugin

jqPuzzle

Impromptu

Datepicker plugin

Confirm plugin

Form handing

jQuery plugins

jScrollPane

Field plugin

Extra selectors

Visual jQuery

Cycle plugin

jqPuzzle

Impromptu

Datepicker plugin

Confirm plugin

Form handing

jQuery plugins

jScrollPane

Field plugin

Extra selectors

Visual jQuery

Cycle plugin

jqPuzzle

Impromptu

Datepicker plugin

Confirm plugin

Form handing

jQuery plugins

jScrollPane

Field plugin

Extra selectors

Visual jQuery

Cycle plugin

jqPuzzle

Impromptu

Datepicker plugin

Confirm plugin

Form handing

jQuery plugins

jScrollPane

Field plugin

Extra selectors

Visual jQuery

Cycle plugin

jqPuzzle

Impromptu

Datepicker plugin

Confirm plugin

Form handing

jQuery plugins

jScrollPane

Field plugin

Extra selectors

Visual jQuery

Cycle plugin

jqPuzzle

Impromptu

Datepicker plugin

Confirm plugin

Form handing

jQuery plugins

jScrollPane

Field plugin

Extra selectors

Visual jQuery

Cycle plugin

jqPuzzle

Impromptu

Datepicker plugin

Confirm plugin

Form handing

Advanced jQuery I

jQuery can work with AJAX and other javascript libraries seamlessly

jQuery can obviate the need for using javascript directly for mostcommon web app/UI development needs.

Advanced jQuery I

Advanced jQuery II

$("#rating").append("Please rate: ");

for ( var i = 1; i <= 5; i++ )

$("#rating").append("<a href=’#’>" + i + "</a> ");

$("#rating a").click(function(e){

$.post("rate.php", {rating: $(this).html()},

function(xml) { $("#rating").html(

"Thanks for rating, current average: " +

$("average", xml).text() +

", number of votes: " +

$("count", xml).text()

); });

return false; }); });

Further study

More selectors and advanced use is gained by experience

$(’#fooid’).onblur();

$(’.fooclass’).onmousever();

$(’div#fooid’).find();

$(’h1’).css(’text-transform’,’underline’);

$(’div’).addClass(’colorful’);

Possibilities are endless!

Further study

More selectors and advanced use is gained by experience

$(’#fooid’).onblur();

$(’.fooclass’).onmousever();

$(’div#fooid’).find();

$(’h1’).css(’text-transform’,’underline’);

$(’div’).addClass(’colorful’);

Possibilities are endless!Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 20 / 22

Questions?

Discussion and questions?1 http://jquery.com

2 http://visualjquery.com

3 http://www.alistapart.com

4 http://www.csszengarden.com

jquery - write less, do more javascript toolkit

Business

world html