jQuery - write less, do more javascript toolkit

Introduction to jQuery
Write less, do more!

Girish Venkatachalam
Chennai
girish1729@gmail.com

December 8, 2007

Basic web interface architecture

Figure: basic building blocks

HTML provides content

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



CSS provides appearance, placement and layout




CSS provides appearance, placement and layout
Javascript provides dynamism and deﬁnes behavior

html tree structure

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


html tree structure

You can traverse the tree easily since it has a ﬁxed structure


html tree structure

You can traverse the tree easily since it has a ﬁxed structure
Every node has attributes and optionally child nodes


A simple html example

<html>
<head>
<title> A simple example </title>
</head>
<body>
<h1 align=quot;centerquot;> Hello world html </h1>
<p> How are you? </p>
</body>
</html>

Fundamental building block of all web apps



<html>
<head>
</head>
<body>
</body>
</html>

Javascript to manipulate DOM elements



<html>
<head>
</head>
<body>
</body>
</html>

Cascading style sheets (CSS) for appearance



<html>
<head>
</head>
<body>
</body>
</html>

Cascading style sheets (CSS) for appearance
Learning html is a must before we do web programming!

What is CSS?

html supplies the content


What is CSS?

CSS determines the beauty



What is CSS?

CSS determines the beauty


What remains?

Intro to javascript

What about the behavior?


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


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


jQuery fundament

Very very very powerful


jQuery fundament

Extremely well maintained with 100s of plugins


jQuery fundament

Extremely well maintained with 100s of plugins
Abstracts out portability issues and javascript gunk


A jQuery code sample

$(document).ready(function() {
$(’a’).hover(function() {
$(this).hide(’slow’);
});
});

Neat eh?



});
});

Neat eh?
This is all it takes for an animation using jQuery



});
});

Neat eh?
You have to add it between the ’script’ tag you always use for
javascript



});
});

Neat eh?
javascript
After all jQuery is also javascript



});
});

Neat eh?
javascript
After all jQuery is also javascript
Without its disadvantages and ugliness. . .

Another jQuery sample

$(document).ready(function (){
$(’a’).hover(function (){
},function(){
$(this).show(’fast’);
});
});

This sample builds on the previous example



},function(){
});
});

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



},function(){
});
});

This is all it takes for an animation using jQuery (once again)
But it is not just animations. . .


Exploring jQuery

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


Exploring jQuery


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


Exploring jQuery


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


Exploring jQuery


This has led to a subculture of jQuery plugins - extensions are
available for nearly every web design task you can think of
We shall take a peek at some of the extensions


jQuery plugins

jScrollPane


jQuery plugins

jScrollPane
Field plugin


jQuery plugins

jScrollPane
Field plugin
Extra selectors


jQuery plugins

jScrollPane
Field plugin
Extra selectors
Visual jQuery


jQuery plugins

jScrollPane
Field plugin
Extra selectors
Visual jQuery
Cycle plugin


jQuery plugins

jScrollPane
Field plugin
Extra selectors
Visual jQuery
Cycle plugin
jqPuzzle


jQuery plugins

jScrollPane
Field plugin
Extra selectors
Visual jQuery
Cycle plugin
jqPuzzle
jTip for balloon tips (tooltip)


jQuery plugins

jScrollPane
Field plugin
Extra selectors
Visual jQuery
Cycle plugin
jqPuzzle
Impromptu


jQuery plugins

jScrollPane Embed videos (You can
Field plugin watch mpeg videos )
Extra selectors
Visual jQuery
Cycle plugin
jqPuzzle
Impromptu


jQuery plugins

Extra selectors Datepicker plugin
Visual jQuery
Cycle plugin
jqPuzzle
Impromptu


jQuery plugins

Visual jQuery UI for drag and drop
Cycle plugin
jqPuzzle
Impromptu


jQuery plugins

Cycle plugin Conﬁrm plugin
jqPuzzle
Impromptu


jQuery plugins

jqPuzzle Form handing
Impromptu


jQuery plugins

jTip for balloon tips (tooltip) Keyboard shortcut handling
Impromptu


jQuery plugins

jTip for balloon tips (tooltip) Keyboard shortcut handling
Impromptu And much much more...


Advanced jQuery I


Advanced jQuery I

jQuery can work with AJAX and other javascript libraries seamlessly


Advanced jQuery I

jQuery can work with AJAX and other javascript libraries seamlessly

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


Advanced jQuery II

$(quot;#ratingquot;).append(quot;Please rate: quot;);
for ( var i = 1; i <= 5; i++ )
$(quot;#ratingquot;).append(quot;<a href=’#’>quot; + i + quot;</a> quot;);
$(quot;#rating aquot;).click(function(e){
$.post(quot;rate.phpquot;, {rating: $(this).html()},
function(xml) { $(quot;#ratingquot;).html(
quot;Thanks for rating, current average: quot; +
$(quot;averagequot;, xml).text() +
quot;, number of votes: quot; +
$(quot;countquot;, 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’);


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!

Questions?

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

http://visualjquery.com
2

http://www.alistapart.com
3

http://www.csszengarden.com
4


jQuery - write less, do more javascript toolkit

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie jQuery - write less, do more javascript toolkit

Ähnlich wie jQuery - write less, do more javascript toolkit (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

jQuery - write less, do more javascript toolkit