Your SlideShare is downloading. ×
0
5 November 2012
SWE 363 : Web Development and EngineeringAbdullah Ebraheem                                      Dr. Jameleddine Hassine200...
SWE 363 : Web Development and EngineeringAbdullah Ebraheem                                      Dr. Jameleddine Hassine200...
Outline
OutlineInformation
OutlineInformation✤   What’s jQuery?
OutlineInformation✤   What’s jQuery?✤   Benefits of jQuery?
OutlineInformation✤   What’s jQuery?✤   Benefits of jQuery?✤    Pure   JavaScript vs jQuery.
OutlineInformation                        Basics of jQuery✤   What’s jQuery?✤   Benefits of jQuery?✤    Pure   JavaScript v...
OutlineInformation                        Basics of jQuery✤   What’s jQuery?                  ✤   Loading jQuery.✤   Benefi...
OutlineInformation                        Basics of jQuery✤   What’s jQuery?                  ✤   Loading jQuery.✤   Benefi...
OutlineInformation                        Basics of jQuery✤   What’s jQuery?                  ✤   Loading jQuery.✤   Benefi...
OutlineInformation                        Basics of jQuery✤   What’s jQuery?                  ✤   Loading jQuery.✤   Benefi...
OutlineInformation                        Basics of jQuery✤   What’s jQuery?                  ✤   Loading jQuery.✤   Benefi...
OutlineInformation                        Basics of jQuery       Plugins✤   What’s jQuery?                  ✤   Loading jQ...
OutlineInformation                        Basics of jQuery       Plugins✤   What’s jQuery?                  ✤   Loading jQ...
Information
What’s jQuery?
What’s jQuery?“jQuery is a fast and conciseJavaScript Library. It isdesigned to change the waythat you write JavaScript.”
What’s jQuery?“jQuery is a fast and conciseJavaScript Library. It isdesigned to change the waythat you write JavaScript.”r...
What’s jQuery?“jQuery is a fast and conciseJavaScript Library. It isdesigned to change the waythat you write JavaScript.”r...
What’s jQuery?“jQuery is a fast and conciseJavaScript Library. It isdesigned to change the waythat you write JavaScript.”r...
What’s jQuery?“jQuery is a fast and conciseJavaScript Library. It isdesigned to change the waythat you write JavaScript.”r...
What’s jQuery?“jQuery is a fast and conciseJavaScript Library. It isdesigned to change the waythat you write JavaScript.”r...
What’s jQuery?“jQuery is a fast and conciseJavaScript Library. It isdesigned to change the waythat you write JavaScript.”r...
What’s jQuery?“jQuery is a fast and conciseJavaScript Library. It isdesigned to change the waythat you write JavaScript.”r...
What’s jQuery?“jQuery is a fast and conciseJavaScript Library. It isdesigned to change the waythat you write JavaScript.”r...
What’s jQuery?“jQuery is a fast and conciseJavaScript Library. It isdesigned to change the waythat you write JavaScript.”r...
What’s jQuery?“jQuery is a fast and conciseJavaScript Library. It isdesigned to change the waythat you write JavaScript.”r...
Benefits of jQuery
Benefits of jQuery✤   Smaller code than pure    JavaScript.
Benefits of jQuery✤   Smaller code than pure    JavaScript.✤   It handles cross browser    differences.
Benefits of jQuery✤   Smaller code than pure    JavaScript.✤   It handles cross browser    differences.✤   It presents a s...
Benefits of jQuery✤   Smaller code than pure    JavaScript.✤   It handles cross browser    differences.✤   It presents a s...
Benefits of jQuery✤   Smaller code than pure    JavaScript.✤   It handles cross browser    differences.✤   It presents a s...
Benefits of jQuery✤   Smaller code than pure        ✤   It makes Ajax much much    JavaScript.                       MUCH ...
Benefits of jQuery✤   Smaller code than pure        ✤   It makes Ajax much much    JavaScript.                       MUCH ...
Pure   JavaScript vs jQuery
Pure   JavaScript vs jQuery Get the element with an id =          “container”
Pure   JavaScript vs jQuery Get the element with an id =          “container”var container = document.getElementById(‘cont...
Pure   JavaScript vs jQuery  Get the element with an id =           “container”var container = document.getElementById(‘co...
Pure   JavaScript vs jQuery  Get the element with an id =           “container” var container = document.getElementById(‘c...
Pure   JavaScript vs jQuery  Get the element with an id =           “container” var container = document.getElementById(‘c...
Pure   JavaScript vs jQuery  Get the element with an id =           “container” var container = document.getElementById(‘c...
Basics of jQuery
Basics of jQueryLoading jQuery
Basics of jQueryLoading jQuery     Syntax
Basics of jQueryLoading jQuery     Syntax   Selectors
Basics of jQueryLoading jQuery     Syntax   Selectors   Methods
Loading jQuery
Loading jQuery
Loading jQuery✤   Download it as a .js    file      from    jQuery.com
Loading jQuery✤   Download it as a .js    file      from    jQuery.com
Loading jQuery✤   Download it as a .js    file      from    jQuery.com
Loading jQuery✤   Download it as a .js    file      from    jQuery.com
Loading jQuery✤   Download it as a .js    file      from    jQuery.com                           <script src="jquery.js"></...
Loading jQuery✤   Download it as a .js    file      from    jQuery.com                                      <script src="jq...
Loading jQuery✤    Download it as a .js     file      from     jQuery.com                                       <script src...
Syntax
Syntax
Syntax $(document).ready(function(){     $("button").click(function(){       $("p").hide();     }); });
Syntax $(document).ready(function(){     $("button").click(function(){       $("p").hide();     }); });// the jQuery philo...
Syntax $(document).ready(function(){     $("button").click(function(){       $("p").hide();     }); });// the jQuery philo...
Syntax $(document).ready(function(){     $("button").click(function(){       $("p").hide();     }); });// the jQuery philo...
Syntax $(document).ready(function(){     $("button").click(function(){       $("p").hide();     }); });
Syntax $(document).ready(function(){     $("button").click(function(){       $("p").hide();     }); });/* if you’re Curiou...
Selectors
Selectors
SelectorsGive $() a selector
SelectorsGive $() a selector   $(“selector”)
SelectorsGive $() a selector               $(“selector”)// jQuery implements CSS selectors !
SelectorsGive $() a selector               $(“selector”)// jQuery implements CSS selectors !Types of selectors :
SelectorsGive $() a selector               $(“selector”)// jQuery implements CSS selectors !Types of selectors :    ✤   Ba...
SelectorsGive $() a selector               $(“selector”)// jQuery implements CSS selectors !Types of selectors :    ✤   Ba...
SelectorsGive $() a selector               $(“selector”)// jQuery implements CSS selectors !Types of selectors :    ✤   Ba...
SelectorsGive $() a selector               $(“selector”)// jQuery implements CSS selectors !Types of selectors :    ✤   Ba...
SelectorsGive $() a selector                 $(“selector”)// jQuery implements CSS selectors !Types of selectors :    ✤   ...
SelectorsGive $() a selector                 $(“selector”)// jQuery implements CSS selectors !Types of selectors :    ✤   ...
SelectorsGive $() a selector                 $(“selector”)// jQuery implements CSS selectors !Types of selectors :    ✤   ...
SelectorsGive $() a selector                      $(“selector”)// jQuery implements CSS selectors !Types of selectors :   ...
SelectorsGive $() a selector                 $(“selector”)// jQuery implements CSS selectors !Types of selectors :    ✤   ...
SelectorsGive $() a selector                 $(“selector”)// jQuery implements CSS selectors !Types of selectors :    ✤   ...
SelectorsGive $() a selector                 $(“selector”)// jQuery implements CSS selectors !Types of selectors :    ✤   ...
Other Type of Selectors
Other Type of Selectors✤   Combination of         ✤   Selection Index Filters.    Selectors.                           ✤  ...
Methods
MethodsMoving Elements.append().appendTo().before().after()
MethodsMoving Elements Attributes.append()        .css().appendTo()      .attr().before()        .html().after()         ....
MethodsMoving Elements Attributes     Events.append()        .css()        .click().appendTo()      .attr()       .dblclic...
MethodsMoving Elements Attributes     Events         Effects.append()        .css()        .click()       .show().appendTo...
MethodsMoving Elements Attributes     Events         Effects      Traversing.append()        .css()        .click()       ...
MethodsMoving Elements Attributes     Events         Effects      Traversing    AJAX.append()        .css()        .click(...
Moving Elements Example
Moving Elements Example
Moving Elements Example <html>   <body>    <div>jQuery</div>    <div id=”foo”>example</div>   </body> </html>
Moving Elements Example Add some HTML to an element with ID foo <html>   <body>    <div>jQuery</div>    <div id=”foo”>exam...
Moving Elements Example Add some HTML to an element with ID foo $("#foo") <html>   <body>    <div>jQuery</div>    <div id=...
Moving Elements Example Add some HTML to an element with ID foo $("#foo").append(                         ); <html>   <bod...
Moving Elements Example Add some HTML to an element with ID foo $("#foo").append( "<p>test</p>"); <html>   <body>    <div>...
Moving Elements Example Add some HTML to an element with ID foo $("#foo").append( "<p>test</p>"); <html>   <body>    <div>...
Attribute Methods
Attribute Methods
Attribute Methods Get methods
Attribute Methods Get methods $().attr(‘id’);
Attribute Methods Get methods $().attr(‘id’); $().html();
Attribute Methods Get methods $().attr(‘id’); $().html(); $().width();
Attribute Methods Get methods $().attr(‘id’); $().html(); $().width(); $().css(“height”);
Attribute Methods Get methods          Set methods $().attr(‘id’); $().html(); $().width(); $().css(“height”);
Attribute Methods Get methods          Set methods $().attr(‘id’);      $().attr(‘id’   , ‘foo’); $().html(); $().width();...
Attribute Methods Get methods          Set methods $().attr(‘id’);      $().attr(‘id’   , ‘foo’); $().html();          $()...
Attribute Methods Get methods          Set methods $().attr(‘id’);      $().attr(‘id’    , ‘foo’); $().html();          $(...
Attribute Methods Get methods          Set methods $().attr(‘id’);      $().attr(‘id’    , ‘foo’); $().html();          $(...
Attribute Methods Get methods          Set methods $().attr(‘id’);      $().attr(‘id’    , ‘foo’); $().html();          $(...
Attribute and Events Example
Attribute and Events Example
Attribute and Events Example <html>   <body>    <button>click me</button>    <p>A paragraph</p>   </body> </html>
Attribute and Events Example Change (A paragraph) to (Hello jQuery) by clicking the button <html>   <body>    <button>clic...
Attribute and Events Example Change (A paragraph) to (Hello jQuery) by clicking the button $("button") <html>   <body>    ...
Attribute and Events Example Change (A paragraph) to (Hello jQuery) by clicking the button $("button").click( <html>   <bo...
Attribute and Events Example Change (A paragraph) to (Hello jQuery) by clicking the button $("button").click( function(){ ...
Attribute and Events Example Change (A paragraph) to (Hello jQuery) by clicking the button $("button").click( function(){ ...
Attribute and Events Example Change (A paragraph) to (Hello jQuery) by clicking the button $("button").click( function(){ ...
Attribute and Events Example Change (A paragraph) to (Hello jQuery) by clicking the button $("button").click( function(){ ...
Attribute and Events Example Change (A paragraph) to (Hello jQuery) by clicking the button $("button").click( function(){ ...
Attribute and Events Example Change (A paragraph) to (Hello jQuery) by clicking the button $("button").click( function(){ ...
Attribute and Events Example Change (A paragraph) to (Hello jQuery) by clicking the button $("button").click( function(){ ...
Live ExampleUse jQuery to increase and decrease the font size of a paragraph
Plugins
Plugins✤   SlimBox 2      http://www.digitalia.be/software/slimbox2✤   Page Flip      http://tympanus.net/Development/Flip...
Recourses✤   http://www.jQuery.com✤   http://www.slideshare.net/1Marc/jquery-essentials✤   http://forums.asp.net/t/1780101...
Upcoming SlideShare
Loading in...5
×

introduction to jQuery presentation

1,966

Published on

this is a 10~ mins presentation about jQuery.
sorry about the TOO MANY clicking. you can download the PDF version : http://www.mediafire.com/view/?pyim148o2983p1e

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

  • Be the first to like this

No Downloads
Views
Total Views
1,966
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
147
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "introduction to jQuery presentation"

    1. 1. 5 November 2012
    2. 2. SWE 363 : Web Development and EngineeringAbdullah Ebraheem Dr. Jameleddine Hassine2008543605 November 2012
    3. 3. SWE 363 : Web Development and EngineeringAbdullah Ebraheem Dr. Jameleddine Hassine2008543605 November 2012
    4. 4. Outline
    5. 5. OutlineInformation
    6. 6. OutlineInformation✤ What’s jQuery?
    7. 7. OutlineInformation✤ What’s jQuery?✤ Benefits of jQuery?
    8. 8. OutlineInformation✤ What’s jQuery?✤ Benefits of jQuery?✤ Pure JavaScript vs jQuery.
    9. 9. OutlineInformation Basics of jQuery✤ What’s jQuery?✤ Benefits of jQuery?✤ Pure JavaScript vs jQuery.
    10. 10. OutlineInformation Basics of jQuery✤ What’s jQuery? ✤ Loading jQuery.✤ Benefits of jQuery?✤ Pure JavaScript vs jQuery.
    11. 11. OutlineInformation Basics of jQuery✤ What’s jQuery? ✤ Loading jQuery.✤ Benefits of jQuery? ✤ Syntax.✤ Pure JavaScript vs jQuery.
    12. 12. OutlineInformation Basics of jQuery✤ What’s jQuery? ✤ Loading jQuery.✤ Benefits of jQuery? ✤ Syntax.✤ Pure JavaScript vs jQuery. ✤ Selectors.
    13. 13. OutlineInformation Basics of jQuery✤ What’s jQuery? ✤ Loading jQuery.✤ Benefits of jQuery? ✤ Syntax.✤ Pure JavaScript vs jQuery. ✤ Selectors. ✤ Methods.
    14. 14. OutlineInformation Basics of jQuery✤ What’s jQuery? ✤ Loading jQuery.✤ Benefits of jQuery? ✤ Syntax.✤ Pure JavaScript vs jQuery. ✤ Selectors. ✤ Methods. ✤ Live Example.
    15. 15. OutlineInformation Basics of jQuery Plugins✤ What’s jQuery? ✤ Loading jQuery.✤ Benefits of jQuery? ✤ Syntax.✤ Pure JavaScript vs jQuery. ✤ Selectors. ✤ Methods. ✤ Live Example.
    16. 16. OutlineInformation Basics of jQuery Plugins✤ What’s jQuery? ✤ Loading jQuery. ✤ Demo of plugins.✤ Benefits of jQuery? ✤ Syntax.✤ Pure JavaScript vs jQuery. ✤ Selectors. ✤ Methods. ✤ Live Example.
    17. 17. Information
    18. 18. What’s jQuery?
    19. 19. What’s jQuery?“jQuery is a fast and conciseJavaScript Library. It isdesigned to change the waythat you write JavaScript.”
    20. 20. What’s jQuery?“jQuery is a fast and conciseJavaScript Library. It isdesigned to change the waythat you write JavaScript.”released on 2006
    21. 21. What’s jQuery?“jQuery is a fast and conciseJavaScript Library. It isdesigned to change the waythat you write JavaScript.”released on 2006 John Resig jQuery Creator @jeresig
    22. 22. What’s jQuery?“jQuery is a fast and conciseJavaScript Library. It isdesigned to change the waythat you write JavaScript.”released on 2006 42% of all sites that use Javascript use jQuery. http://trends.builtwith.com/ javascript John Resig jQuery Creator @jeresig
    23. 23. What’s jQuery?“jQuery is a fast and conciseJavaScript Library. It isdesigned to change the waythat you write JavaScript.”released on 2006 42% of all sites that use Javascript use jQuery. http://trends.builtwith.com/ javascript John Resig Who’s using jQuery jQuery Creator @jeresig
    24. 24. What’s jQuery?“jQuery is a fast and conciseJavaScript Library. It isdesigned to change the waythat you write JavaScript.”released on 2006 42% of all sites that use Javascript use jQuery. http://trends.builtwith.com/ javascript John Resig Who’s using jQuery jQuery Creator @jeresig
    25. 25. What’s jQuery?“jQuery is a fast and conciseJavaScript Library. It isdesigned to change the waythat you write JavaScript.”released on 2006 42% of all sites that use Javascript use jQuery. http://trends.builtwith.com/ javascript John Resig Who’s using jQuery jQuery Creator @jeresig
    26. 26. What’s jQuery?“jQuery is a fast and conciseJavaScript Library. It isdesigned to change the waythat you write JavaScript.”released on 2006 42% of all sites that use Javascript use jQuery. http://trends.builtwith.com/ javascript John Resig Who’s using jQuery jQuery Creator @jeresig
    27. 27. What’s jQuery?“jQuery is a fast and conciseJavaScript Library. It isdesigned to change the waythat you write JavaScript.”released on 2006 42% of all sites that use Javascript use jQuery. http://trends.builtwith.com/ javascript John Resig Who’s using jQuery jQuery Creator @jeresig
    28. 28. What’s jQuery?“jQuery is a fast and conciseJavaScript Library. It isdesigned to change the waythat you write JavaScript.”released on 2006 42% of all sites that use Javascript use jQuery. http://trends.builtwith.com/ javascript John Resig Who’s using jQuery jQuery Creator @jeresig
    29. 29. What’s jQuery?“jQuery is a fast and conciseJavaScript Library. It isdesigned to change the waythat you write JavaScript.”released on 2006 42% of all sites that use Javascript use jQuery. http://trends.builtwith.com/ javascript John Resig Who’s using jQuery jQuery Creator @jeresig
    30. 30. Benefits of jQuery
    31. 31. Benefits of jQuery✤ Smaller code than pure JavaScript.
    32. 32. Benefits of jQuery✤ Smaller code than pure JavaScript.✤ It handles cross browser differences.
    33. 33. Benefits of jQuery✤ Smaller code than pure JavaScript.✤ It handles cross browser differences.✤ It presents a single events API.
    34. 34. Benefits of jQuery✤ Smaller code than pure JavaScript.✤ It handles cross browser differences.✤ It presents a single events API.✤ Easy DOM manipulation.
    35. 35. Benefits of jQuery✤ Smaller code than pure JavaScript.✤ It handles cross browser differences.✤ It presents a single events API.✤ Easy DOM manipulation.✤ Effects such as fading, sliding and more.
    36. 36. Benefits of jQuery✤ Smaller code than pure ✤ It makes Ajax much much JavaScript. MUCH simpler.✤ It handles cross browser differences.✤ It presents a single events API.✤ Easy DOM manipulation.✤ Effects such as fading, sliding and more.
    37. 37. Benefits of jQuery✤ Smaller code than pure ✤ It makes Ajax much much JavaScript. MUCH simpler.✤ It handles cross browser ✤ Ready-to-Use Plugins. differences.✤ It presents a single events API.✤ Easy DOM manipulation.✤ Effects such as fading, sliding and more.
    38. 38. Pure JavaScript vs jQuery
    39. 39. Pure JavaScript vs jQuery Get the element with an id = “container”
    40. 40. Pure JavaScript vs jQuery Get the element with an id = “container”var container = document.getElementById(‘container’);
    41. 41. Pure JavaScript vs jQuery Get the element with an id = “container”var container = document.getElementById(‘container’); $(“#container”);
    42. 42. Pure JavaScript vs jQuery Get the element with an id = “container” var container = document.getElementById(‘container’); $(“#container”);Hiding all <div> tags
    43. 43. Pure JavaScript vs jQuery Get the element with an id = “container” var container = document.getElementById(‘container’); $(“#container”);Hiding all <div> tags var divs = document.getElementByTagName(‘div’); for( i=0; i<divs.length; i++) divs[i].style.display = ‘none’;
    44. 44. Pure JavaScript vs jQuery Get the element with an id = “container” var container = document.getElementById(‘container’); $(“#container”);Hiding all <div> tags var divs = document.getElementByTagName(‘div’); for( i=0; i<divs.length; i++) divs[i].style.display = ‘none’; $(“div”).hide();
    45. 45. Basics of jQuery
    46. 46. Basics of jQueryLoading jQuery
    47. 47. Basics of jQueryLoading jQuery Syntax
    48. 48. Basics of jQueryLoading jQuery Syntax Selectors
    49. 49. Basics of jQueryLoading jQuery Syntax Selectors Methods
    50. 50. Loading jQuery
    51. 51. Loading jQuery
    52. 52. Loading jQuery✤ Download it as a .js file from jQuery.com
    53. 53. Loading jQuery✤ Download it as a .js file from jQuery.com
    54. 54. Loading jQuery✤ Download it as a .js file from jQuery.com
    55. 55. Loading jQuery✤ Download it as a .js file from jQuery.com
    56. 56. Loading jQuery✤ Download it as a .js file from jQuery.com <script src="jquery.js"></script>
    57. 57. Loading jQuery✤ Download it as a .js file from jQuery.com <script src="jquery.js"></script>✤ Use it directly from Google server.
    58. 58. Loading jQuery✤ Download it as a .js file from jQuery.com <script src="jquery.js"></script>✤ Use it directly from Google server. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/ jquery.min.js"></script>
    59. 59. Syntax
    60. 60. Syntax
    61. 61. Syntax $(document).ready(function(){   $("button").click(function(){     $("p").hide();   }); });
    62. 62. Syntax $(document).ready(function(){   $("button").click(function(){     $("p").hide();   }); });// the jQuery philosophy
    63. 63. Syntax $(document).ready(function(){   $("button").click(function(){     $("p").hide();   }); });// the jQuery philosophy$(“find an HTML element”)
    64. 64. Syntax $(document).ready(function(){   $("button").click(function(){     $("p").hide();   }); });// the jQuery philosophy$(“find an HTML element”).doSomething();
    65. 65. Syntax $(document).ready(function(){   $("button").click(function(){     $("p").hide();   }); });
    66. 66. Syntax $(document).ready(function(){   $("button").click(function(){     $("p").hide();   }); });/* if you’re Curious about $() * it defines or accesses jQuery * $ = jQuery */
    67. 67. Selectors
    68. 68. Selectors
    69. 69. SelectorsGive $() a selector
    70. 70. SelectorsGive $() a selector $(“selector”)
    71. 71. SelectorsGive $() a selector $(“selector”)// jQuery implements CSS selectors !
    72. 72. SelectorsGive $() a selector $(“selector”)// jQuery implements CSS selectors !Types of selectors :
    73. 73. SelectorsGive $() a selector $(“selector”)// jQuery implements CSS selectors !Types of selectors : ✤ Basic
    74. 74. SelectorsGive $() a selector $(“selector”)// jQuery implements CSS selectors !Types of selectors : ✤ Basic $(“tag”)
    75. 75. SelectorsGive $() a selector $(“selector”)// jQuery implements CSS selectors !Types of selectors : ✤ Basic $(“tag”) $(“#id”)
    76. 76. SelectorsGive $() a selector $(“selector”)// jQuery implements CSS selectors !Types of selectors : ✤ Basic $(“tag”) $(“#id”) $(“.class”)
    77. 77. SelectorsGive $() a selector $(“selector”)// jQuery implements CSS selectors !Types of selectors : ✤ Basic $(“tag”) $(“#id”) $(“.class”) ✤ More Precise Selectors :
    78. 78. SelectorsGive $() a selector $(“selector”)// jQuery implements CSS selectors !Types of selectors : ✤ Basic $(“tag”) $(“#id”) $(“.class”) ✤ More Precise Selectors : $(“tag#id”)
    79. 79. SelectorsGive $() a selector $(“selector”)// jQuery implements CSS selectors !Types of selectors : ✤ Basic $(“tag”) $(“#id”) $(“.class”) ✤ More Precise Selectors : $(“tag#id”) $(“tag.class”)
    80. 80. SelectorsGive $() a selector $(“selector”)// jQuery implements CSS selectors !Types of selectors : ✤ Basic $(“tag”) $(“#id”) $(“.class”) ✤ More Precise Selectors : $(“tag#id”) $(“tag.class”) ✤ Attribute Filters :
    81. 81. SelectorsGive $() a selector $(“selector”)// jQuery implements CSS selectors !Types of selectors : ✤ Basic $(“tag”) $(“#id”) $(“.class”) ✤ More Precise Selectors : $(“tag#id”) $(“tag.class”) ✤ Attribute Filters : $(“tag[attr]”)
    82. 82. SelectorsGive $() a selector $(“selector”)// jQuery implements CSS selectors !Types of selectors : ✤ Basic $(“tag”) $(“#id”) $(“.class”) ✤ More Precise Selectors : $(“tag#id”) $(“tag.class”) ✤ Attribute Filters : $(“tag[attr]”) $(“tag[attr=‘value’]”) // exact value
    83. 83. SelectorsGive $() a selector $(“selector”)// jQuery implements CSS selectors !Types of selectors : ✤ Basic $(“tag”) $(“#id”) $(“.class”) ✤ More Precise Selectors : $(“tag#id”) $(“tag.class”) ✤ Attribute Filters : $(“tag[attr]”) $(“tag[attr=‘value’]”) // exact value $(“tag[attr^=‘startsWith’]”) $(“tag[attr*=‘contains’]”) $(“tag[attr$=‘endsWith’]”)
    84. 84. Other Type of Selectors
    85. 85. Other Type of Selectors✤ Combination of ✤ Selection Index Filters. Selectors. ✤ Forms Selectors.✤ Hierarchy Selectors.
    86. 86. Methods
    87. 87. MethodsMoving Elements.append().appendTo().before().after()
    88. 88. MethodsMoving Elements Attributes.append() .css().appendTo() .attr().before() .html().after() .addClass() .val()
    89. 89. MethodsMoving Elements Attributes Events.append() .css() .click().appendTo() .attr() .dblclick().before() .html() .mouseover().after() .addClass() .trigger() .val() .bind()
    90. 90. MethodsMoving Elements Attributes Events Effects.append() .css() .click() .show().appendTo() .attr() .dblclick() .hide().before() .html() .mouseover() .fadeIn().after() .addClass() .trigger() .animate() .val() .bind() .toggle()
    91. 91. MethodsMoving Elements Attributes Events Effects Traversing.append() .css() .click() .show() .find().appendTo() .attr() .dblclick() .hide() .is().before() .html() .mouseover() .fadeIn() .prevAll().after() .addClass() .trigger() .animate() .next() .val() .bind() .toggle() .hasClass()
    92. 92. MethodsMoving Elements Attributes Events Effects Traversing AJAX.append() .css() .click() .show() .find() .get().appendTo() .attr() .dblclick() .hide() .is() .getJSON().before() .html() .mouseover() .fadeIn() .prevAll() .post().after() .addClass() .trigger() .animate() .next() .ajax() .val() .bind() .toggle() .hasClass() .load()
    93. 93. Moving Elements Example
    94. 94. Moving Elements Example
    95. 95. Moving Elements Example <html> <body> <div>jQuery</div> <div id=”foo”>example</div> </body> </html>
    96. 96. Moving Elements Example Add some HTML to an element with ID foo <html> <body> <div>jQuery</div> <div id=”foo”>example</div> </body> </html>
    97. 97. Moving Elements Example Add some HTML to an element with ID foo $("#foo") <html> <body> <div>jQuery</div> <div id=”foo”>example</div> </body> </html>
    98. 98. Moving Elements Example Add some HTML to an element with ID foo $("#foo").append( ); <html> <body> <div>jQuery</div> <div id=”foo”>example</div> </body> </html>
    99. 99. Moving Elements Example Add some HTML to an element with ID foo $("#foo").append( "<p>test</p>"); <html> <body> <div>jQuery</div> <div id=”foo”>example</div> </body> </html>
    100. 100. Moving Elements Example Add some HTML to an element with ID foo $("#foo").append( "<p>test</p>"); <html> <body> <div>jQuery</div> <div id=”foo”>example<p>test</p></div> </body> </html>
    101. 101. Attribute Methods
    102. 102. Attribute Methods
    103. 103. Attribute Methods Get methods
    104. 104. Attribute Methods Get methods $().attr(‘id’);
    105. 105. Attribute Methods Get methods $().attr(‘id’); $().html();
    106. 106. Attribute Methods Get methods $().attr(‘id’); $().html(); $().width();
    107. 107. Attribute Methods Get methods $().attr(‘id’); $().html(); $().width(); $().css(“height”);
    108. 108. Attribute Methods Get methods Set methods $().attr(‘id’); $().html(); $().width(); $().css(“height”);
    109. 109. Attribute Methods Get methods Set methods $().attr(‘id’); $().attr(‘id’ , ‘foo’); $().html(); $().width(); $().css(“height”);
    110. 110. Attribute Methods Get methods Set methods $().attr(‘id’); $().attr(‘id’ , ‘foo’); $().html(); $().html(“<p>hi</p>”); $().width(); $().css(“height”);
    111. 111. Attribute Methods Get methods Set methods $().attr(‘id’); $().attr(‘id’ , ‘foo’); $().html(); $().html(“<p>hi</p>”); $().width(); $().width(60); $().css(“height”);
    112. 112. Attribute Methods Get methods Set methods $().attr(‘id’); $().attr(‘id’ , ‘foo’); $().html(); $().html(“<p>hi</p>”); $().width(); $().width(60); $().css(“height”); $().css(“height” , “80px”);
    113. 113. Attribute Methods Get methods Set methods $().attr(‘id’); $().attr(‘id’ , ‘foo’); $().html(); $().html(“<p>hi</p>”); $().width(); $().width(60); $().css(“height”); $().css(“height” , “80px”); $().css({ “height” : “80px” , “width” : “80px” });
    114. 114. Attribute and Events Example
    115. 115. Attribute and Events Example
    116. 116. Attribute and Events Example <html> <body> <button>click me</button> <p>A paragraph</p> </body> </html>
    117. 117. Attribute and Events Example Change (A paragraph) to (Hello jQuery) by clicking the button <html> <body> <button>click me</button> <p>A paragraph</p> </body> </html>
    118. 118. Attribute and Events Example Change (A paragraph) to (Hello jQuery) by clicking the button $("button") <html> <body> <button>click me</button> <p>A paragraph</p> </body> </html>
    119. 119. Attribute and Events Example Change (A paragraph) to (Hello jQuery) by clicking the button $("button").click( <html> <body> <button>click me</button> <p>A paragraph</p> </body> </html>
    120. 120. Attribute and Events Example Change (A paragraph) to (Hello jQuery) by clicking the button $("button").click( function(){ <html> <body> <button>click me</button> <p>A paragraph</p> </body> </html>
    121. 121. Attribute and Events Example Change (A paragraph) to (Hello jQuery) by clicking the button $("button").click( function(){ $("p") <html> <body> <button>click me</button> <p>A paragraph</p> </body> </html>
    122. 122. Attribute and Events Example Change (A paragraph) to (Hello jQuery) by clicking the button $("button").click( function(){ $("p").html( ); <html> <body> <button>click me</button> <p>A paragraph</p> </body> </html>
    123. 123. Attribute and Events Example Change (A paragraph) to (Hello jQuery) by clicking the button $("button").click( function(){ $("p").html("<u>Hello jQuery</u>"); <html> <body> <button>click me</button> <p>A paragraph</p> </body> </html>
    124. 124. Attribute and Events Example Change (A paragraph) to (Hello jQuery) by clicking the button $("button").click( function(){ $("p").html("<u>Hello jQuery</u>"); } <html> <body> <button>click me</button> <p>A paragraph</p> </body> </html>
    125. 125. Attribute and Events Example Change (A paragraph) to (Hello jQuery) by clicking the button $("button").click( function(){ $("p").html("<u>Hello jQuery</u>"); } ); <html> <body> <button>click me</button> <p>A paragraph</p> </body> </html>
    126. 126. Attribute and Events Example Change (A paragraph) to (Hello jQuery) by clicking the button $("button").click( function(){ $("p").html("<u>Hello jQuery</u>"); } ); <html> <body> <button>click me</button> <p><u>Hello jQuery!<u></p> </body> </html>
    127. 127. Live ExampleUse jQuery to increase and decrease the font size of a paragraph
    128. 128. Plugins
    129. 129. Plugins✤ SlimBox 2 http://www.digitalia.be/software/slimbox2✤ Page Flip http://tympanus.net/Development/FlipboardPageLayout/?page=1✤ FullScreen3Deffect http://tympanus.net/Development/FullscreenImage3DEffect/✤ SliceBox http://tympanus.net/Development/Slicebox/index.html
    130. 130. Recourses✤ http://www.jQuery.com✤ http://www.slideshare.net/1Marc/jquery-essentials✤ http://forums.asp.net/t/1780101.aspx/1✤ http://net.tutsplus.com/tutorials/javascript-ajax/from-jquery- to-javascript-a-reference/
    1. A particular slide catching your eye?

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

    ×