jquery - write less, do more javascript toolkit
Post on 17-May-2015
7.365 Views
Preview:
DESCRIPTION
TRANSCRIPT
Introduction to jQueryWrite less, do more!
Girish Venkatachalam
Chennai
girish1729@gmail.com
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
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
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
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 3 / 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
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 3 / 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
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 3 / 22
A simple html example
<html>
<head>
<title> A simple example </title>
</head>
<body>
<h1 align="center"> Hello world html </h1>
<p> How are you? </p>
</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!
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 5 / 22
A simple html example
<html>
<head>
<title> A simple example </title>
</head>
<body>
<h1 align="center"> Hello world html </h1>
<p> How are you? </p>
</body>
</html>
Fundamental building block of all web appsJavascript to manipulate DOM elements
Cascading style sheets (CSS) for appearance
Learning html is a must before we do web programming!
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 5 / 22
A simple html example
<html>
<head>
<title> A simple example </title>
</head>
<body>
<h1 align="center"> Hello world html </h1>
<p> How are you? </p>
</body>
</html>
Fundamental building block of all web appsJavascript to manipulate DOM elementsCascading style sheets (CSS) for appearance
Learning html is a must before we do web programming!
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 5 / 22
A simple html example
<html>
<head>
<title> A simple example </title>
</head>
<body>
<h1 align="center"> Hello world html </h1>
<p> How are you? </p>
</body>
</html>
Fundamental building block of all web appsJavascript to manipulate DOM elementsCascading style sheets (CSS) for appearance
Learning html is a must before we do web programming!
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 5 / 22
What is CSS?
html supplies the content
CSS determines the beauty
What remains?
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 6 / 22
What is CSS?
html supplies the content
CSS determines the beauty
What remains?
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 6 / 22
What is CSS?
html supplies the content
CSS determines the beauty
What remains?
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 6 / 22
Intro to javascript
What about the behavior?
That is where a programming language like javascript comes in.
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 7 / 22
Intro to javascript
What about the behavior?
That is where a programming language like javascript comes in.
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 7 / 22
Document Object Model
What is the role of DOM in web programming?
Animations
jQuery does a marvelous job of DOM manipulations
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 8 / 22
Document Object Model
What is the role of DOM in web programming?
Animations
jQuery does a marvelous job of DOM manipulations
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 8 / 22
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
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 9 / 22
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
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 9 / 22
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
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 9 / 22
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
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 9 / 22
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. . .
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 11 / 22
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. . .
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 11 / 22
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. . .
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 11 / 22
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. . .
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 11 / 22
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. . .
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 11 / 22
Another jQuery sample
$(document).ready(function (){
$(’a’).hover(function (){
$(this).hide(’slow’);
},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. . .
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 13 / 22
Another jQuery sample
$(document).ready(function (){
$(’a’).hover(function (){
$(this).hide(’slow’);
},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. . .
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 13 / 22
Another jQuery sample
$(document).ready(function (){
$(’a’).hover(function (){
$(this).hide(’slow’);
},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. . .
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 13 / 22
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
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 14 / 22
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
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 14 / 22
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
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 14 / 22
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
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 14 / 22
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...
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
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...
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
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...
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
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...
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
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...
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
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...
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
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...
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
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...
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
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...
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
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...
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
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...
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
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...
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
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...
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
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...
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
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...
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
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.
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 16 / 22
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.
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 16 / 22
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.
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 16 / 22
Advanced jQuery II
$(document).ready(function() {
$("#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; }); });
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 18 / 22
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
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
Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 22 / 22
top related