Introduction to jQuery
    Write less, do more!


    Girish Venkatachalam
            Chennai
      girish1729@gmail.com
...
Basic web interface architecture




                                      Figure: basic building blocks


        HTML pr...
Basic web interface architecture




                                      Figure: basic building blocks


        HTML pr...
Basic web interface architecture




                                      Figure: basic building blocks


        HTML pr...
html tree structure




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




Girish Venkatachalam (entr...
html tree structure




        Every html node forms part of a tree with html as root node
        You can traverse the t...
html tree structure




        Every html node forms part of a tree with html as root node
        You can traverse the t...
A simple html example

<html>
  <head>
      <title> A simple example </title>
  </head>
  <body>
      <h1 align=quot;cen...
A simple html example

<html>
  <head>
      <title> A simple example </title>
  </head>
  <body>
      <h1 align=quot;cen...
A simple html example

<html>
  <head>
      <title> A simple example </title>
  </head>
  <body>
      <h1 align=quot;cen...
A simple html example

<html>
  <head>
      <title> A simple example </title>
  </head>
  <body>
      <h1 align=quot;cen...
What is CSS?




       html supplies the content



Girish Venkatachalam (entrepreneur)   Introduction to jQuery   Decemb...
What is CSS?




                                                           CSS determines the beauty

       html supplie...
What is CSS?




                                                           CSS determines the beauty

       html supplie...
Intro to javascript




What about the behavior?


Girish Venkatachalam (entrepreneur)   Introduction to jQuery   December...
Intro to javascript




What about the behavior?
That is where a programming language like javascript comes in.
Girish Ven...
Document Object Model




What is the role of DOM in web programming?


        Animations


Girish Venkatachalam (entrepr...
Document Object Model




What is the role of DOM in web programming?


        Animations
        jQuery does a marvelous...
jQuery fundament




        Tiniest js/AJAX toolkit around




Girish Venkatachalam (entrepreneur)   Introduction to jQue...
jQuery fundament




        Tiniest js/AJAX toolkit around
        Very very very powerful




Girish Venkatachalam (entr...
jQuery fundament




        Tiniest js/AJAX toolkit around
        Very very very powerful
        Extremely well maintai...
jQuery fundament




        Tiniest js/AJAX toolkit around
        Very very very powerful
        Extremely well maintai...
A jQuery code sample


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


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


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


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


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

$(document).ready(function (){
       $(’a’).hover(function (){
           $(this).hide(’slow’);
  ...
Another jQuery sample

$(document).ready(function (){
       $(’a’).hover(function (){
           $(this).hide(’slow’);
  ...
Another jQuery sample

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

jQuery’s power comes from its powerful selectors, easy DOM and
CSS manipulations, mouse and keyboard eve...
Exploring jQuery

jQuery’s power comes from its powerful selectors, easy DOM and
CSS manipulations, mouse and keyboard eve...
Exploring jQuery

jQuery’s power comes from its powerful selectors, easy DOM and
CSS manipulations, mouse and keyboard eve...
Exploring jQuery

jQuery’s power comes from its powerful selectors, easy DOM and
CSS manipulations, mouse and keyboard eve...
jQuery plugins

       jScrollPane




Girish Venkatachalam (entrepreneur)   Introduction to jQuery   December 8, 2007   1...
jQuery plugins

       jScrollPane
       Field plugin




Girish Venkatachalam (entrepreneur)   Introduction to jQuery   ...
jQuery plugins

       jScrollPane
       Field plugin
       Extra selectors




Girish Venkatachalam (entrepreneur)   In...
jQuery plugins

       jScrollPane
       Field plugin
       Extra selectors
       Visual jQuery




Girish Venkatachala...
jQuery plugins

       jScrollPane
       Field plugin
       Extra selectors
       Visual jQuery
       Cycle plugin



...
jQuery plugins

       jScrollPane
       Field plugin
       Extra selectors
       Visual jQuery
       Cycle plugin
   ...
jQuery plugins

       jScrollPane
       Field plugin
       Extra selectors
       Visual jQuery
       Cycle plugin
   ...
jQuery plugins

       jScrollPane
       Field plugin
       Extra selectors
       Visual jQuery
       Cycle plugin
   ...
jQuery plugins

       jScrollPane                                         Embed videos (You can
       Field plugin      ...
jQuery plugins

       jScrollPane                                         Embed videos (You can
       Field plugin      ...
jQuery plugins

       jScrollPane                                         Embed videos (You can
       Field plugin      ...
jQuery plugins

       jScrollPane                                         Embed videos (You can
       Field plugin      ...
jQuery plugins

       jScrollPane                                         Embed videos (You can
       Field plugin      ...
jQuery plugins

       jScrollPane                                         Embed videos (You can
       Field plugin      ...
jQuery plugins

       jScrollPane                                         Embed videos (You can
       Field plugin      ...
Advanced jQuery I




Girish Venkatachalam (entrepreneur)   Introduction to jQuery   December 8, 2007   16 / 22
Advanced jQuery I

jQuery can work with AJAX and other javascript libraries seamlessly




Girish Venkatachalam (entrepren...
Advanced jQuery I

jQuery can work with AJAX and other javascript libraries seamlessly

jQuery can obviate the need for us...
Advanced jQuery II

$(document).ready(function() {
   $(quot;#ratingquot;).append(quot;Please rate: quot;);
   for ( var i...
Further study

More selectors and advanced use is gained by experience

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

$(’.fooclass’).onmousever()...
Further study

More selectors and advanced use is gained by experience

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

$(’.fooclass’).onmousever()...
Questions?

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


        http://visualjquery.com
    2


        ht...
Upcoming SlideShare
Loading in...5
×

jQuery - write less, do more javascript toolkit

7,375

Published on

jQuery is a fantastic toolkit for web development. I go over the basics of web development and how one has to about learning the basics of jQuery

Published in: Business, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,375
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
264
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

jQuery - write less, do more javascript toolkit

  1. 1. Introduction to jQuery Write less, do more! Girish Venkatachalam Chennai girish1729@gmail.com December 8, 2007
  2. 2. Basic web interface architecture Figure: basic building blocks HTML provides content Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 2 / 22
  3. 3. Basic web interface architecture Figure: basic building blocks HTML provides content CSS provides appearance, placement and layout Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 2 / 22
  4. 4. 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
  5. 5. html tree structure Every html node forms part of a tree with html as root node Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 3 / 22
  6. 6. 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 Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 3 / 22
  7. 7. 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
  8. 8. 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 Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 5 / 22
  9. 9. 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 Javascript to manipulate DOM elements Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 5 / 22
  10. 10. 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 Javascript to manipulate DOM elements Cascading style sheets (CSS) for appearance Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 5 / 22
  11. 11. 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 Javascript 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
  12. 12. What is CSS? html supplies the content Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 6 / 22
  13. 13. What is CSS? CSS determines the beauty html supplies the content Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 6 / 22
  14. 14. What is CSS? CSS determines the beauty html supplies the content What remains? Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 6 / 22
  15. 15. Intro to javascript What about the behavior? Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 7 / 22
  16. 16. 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
  17. 17. Document Object Model What is the role of DOM in web programming? Animations Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 8 / 22
  18. 18. 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
  19. 19. jQuery fundament Tiniest js/AJAX toolkit around Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 9 / 22
  20. 20. jQuery fundament Tiniest js/AJAX toolkit around Very very very powerful Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 9 / 22
  21. 21. jQuery fundament Tiniest js/AJAX toolkit around Very very very powerful Extremely well maintained with 100s of plugins Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 9 / 22
  22. 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
  23. 23. A jQuery code sample $(document).ready(function() { $(’a’).hover(function() { $(this).hide(’slow’); }); }); Neat eh? Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 11 / 22
  24. 24. 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 Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 11 / 22
  25. 25. 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 for javascript Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 11 / 22
  26. 26. 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 for javascript After all jQuery is also javascript Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 11 / 22
  27. 27. 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 for javascript After all jQuery is also javascript Without its disadvantages and ugliness. . . Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 11 / 22
  28. 28. Another jQuery sample $(document).ready(function (){ $(’a’).hover(function (){ $(this).hide(’slow’); },function(){ $(this).show(’fast’); }); }); This sample builds on the previous example Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 13 / 22
  29. 29. 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) Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 13 / 22
  30. 30. 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
  31. 31. 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. Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 14 / 22
  32. 32. 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. John Resig achieved something revolutionary by leaving out the inessentials and keeping things small Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 14 / 22
  33. 33. 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. John Resig achieved something revolutionary by leaving out the inessentials and keeping things small This has led to a subculture of jQuery plugins - extensions are available for nearly every web design task you can think of Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 14 / 22
  34. 34. 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. John Resig achieved something revolutionary by leaving out the inessentials and keeping things small 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 Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 14 / 22
  35. 35. jQuery plugins jScrollPane Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
  36. 36. jQuery plugins jScrollPane Field plugin Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
  37. 37. jQuery plugins jScrollPane Field plugin Extra selectors Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
  38. 38. jQuery plugins jScrollPane Field plugin Extra selectors Visual jQuery Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
  39. 39. jQuery plugins jScrollPane Field plugin Extra selectors Visual jQuery Cycle plugin Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
  40. 40. jQuery plugins jScrollPane Field plugin Extra selectors Visual jQuery Cycle plugin jqPuzzle Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
  41. 41. jQuery plugins jScrollPane Field plugin Extra selectors Visual jQuery Cycle plugin jqPuzzle jTip for balloon tips (tooltip) Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
  42. 42. jQuery plugins jScrollPane Field plugin Extra selectors Visual jQuery Cycle plugin jqPuzzle jTip for balloon tips (tooltip) Impromptu Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
  43. 43. jQuery plugins jScrollPane Embed videos (You can Field plugin watch mpeg videos ) Extra selectors Visual jQuery Cycle plugin jqPuzzle jTip for balloon tips (tooltip) Impromptu Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
  44. 44. jQuery plugins jScrollPane Embed videos (You can Field plugin watch mpeg videos ) Extra selectors Datepicker plugin Visual jQuery Cycle plugin jqPuzzle jTip for balloon tips (tooltip) Impromptu Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
  45. 45. jQuery plugins jScrollPane Embed videos (You can Field plugin watch mpeg videos ) Extra selectors Datepicker plugin Visual jQuery UI for drag and drop Cycle plugin jqPuzzle jTip for balloon tips (tooltip) Impromptu Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
  46. 46. jQuery plugins jScrollPane Embed videos (You can Field plugin watch mpeg videos ) Extra selectors Datepicker plugin Visual jQuery UI for drag and drop Cycle plugin Confirm plugin jqPuzzle jTip for balloon tips (tooltip) Impromptu Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
  47. 47. jQuery plugins jScrollPane Embed videos (You can Field plugin watch mpeg videos ) Extra selectors Datepicker plugin Visual jQuery UI for drag and drop Cycle plugin Confirm plugin jqPuzzle Form handing jTip for balloon tips (tooltip) Impromptu Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
  48. 48. jQuery plugins jScrollPane Embed videos (You can Field plugin watch mpeg videos ) Extra selectors Datepicker plugin Visual jQuery UI for drag and drop Cycle plugin Confirm plugin jqPuzzle Form handing jTip for balloon tips (tooltip) Keyboard shortcut handling Impromptu Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
  49. 49. jQuery plugins jScrollPane Embed videos (You can Field plugin watch mpeg videos ) Extra selectors Datepicker plugin Visual jQuery UI for drag and drop Cycle plugin Confirm plugin jqPuzzle Form handing jTip for balloon tips (tooltip) Keyboard shortcut handling Impromptu And much much more... Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 15 / 22
  50. 50. Advanced jQuery I Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 16 / 22
  51. 51. Advanced jQuery I jQuery can work with AJAX and other javascript libraries seamlessly Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 16 / 22
  52. 52. 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. Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 16 / 22
  53. 53. Advanced jQuery II $(document).ready(function() { $(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; }); }); Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 18 / 22
  54. 54. 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’); Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 20 / 22
  55. 55. 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
  56. 56. Questions? Discussion and questions? http://jquery.com 1 http://visualjquery.com 2 http://www.alistapart.com 3 http://www.csszengarden.com 4 Girish Venkatachalam (entrepreneur) Introduction to jQuery December 8, 2007 22 / 22
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×