introduction to jQuery presentation

  • 1,764 views
Uploaded on

this is a 10~ mins presentation about jQuery. …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,764
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
136
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

  • 1. 5 November 2012
  • 2. SWE 363 : Web Development and EngineeringAbdullah Ebraheem Dr. Jameleddine Hassine2008543605 November 2012
  • 3. SWE 363 : Web Development and EngineeringAbdullah Ebraheem Dr. Jameleddine Hassine2008543605 November 2012
  • 4. Outline
  • 5. OutlineInformation
  • 6. OutlineInformation✤ What’s jQuery?
  • 7. OutlineInformation✤ What’s jQuery?✤ Benefits of jQuery?
  • 8. OutlineInformation✤ What’s jQuery?✤ Benefits of jQuery?✤ Pure JavaScript vs jQuery.
  • 9. OutlineInformation Basics of jQuery✤ What’s jQuery?✤ Benefits of jQuery?✤ Pure JavaScript vs jQuery.
  • 10. OutlineInformation Basics of jQuery✤ What’s jQuery? ✤ Loading jQuery.✤ Benefits of jQuery?✤ Pure JavaScript vs jQuery.
  • 11. OutlineInformation Basics of jQuery✤ What’s jQuery? ✤ Loading jQuery.✤ Benefits of jQuery? ✤ Syntax.✤ Pure JavaScript vs jQuery.
  • 12. OutlineInformation Basics of jQuery✤ What’s jQuery? ✤ Loading jQuery.✤ Benefits of jQuery? ✤ Syntax.✤ Pure JavaScript vs jQuery. ✤ Selectors.
  • 13. OutlineInformation Basics of jQuery✤ What’s jQuery? ✤ Loading jQuery.✤ Benefits of jQuery? ✤ Syntax.✤ Pure JavaScript vs jQuery. ✤ Selectors. ✤ Methods.
  • 14. OutlineInformation Basics of jQuery✤ What’s jQuery? ✤ Loading jQuery.✤ Benefits of jQuery? ✤ Syntax.✤ Pure JavaScript vs jQuery. ✤ Selectors. ✤ Methods. ✤ Live Example.
  • 15. OutlineInformation Basics of jQuery Plugins✤ What’s jQuery? ✤ Loading jQuery.✤ Benefits of jQuery? ✤ Syntax.✤ Pure JavaScript vs jQuery. ✤ Selectors. ✤ Methods. ✤ Live Example.
  • 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. Information
  • 18. What’s jQuery?
  • 19. What’s jQuery?“jQuery is a fast and conciseJavaScript Library. It isdesigned to change the waythat you write JavaScript.”
  • 20. What’s jQuery?“jQuery is a fast and conciseJavaScript Library. It isdesigned to change the waythat you write JavaScript.”released on 2006
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Benefits of jQuery
  • 31. Benefits of jQuery✤ Smaller code than pure JavaScript.
  • 32. Benefits of jQuery✤ Smaller code than pure JavaScript.✤ It handles cross browser differences.
  • 33. Benefits of jQuery✤ Smaller code than pure JavaScript.✤ It handles cross browser differences.✤ It presents a single events API.
  • 34. Benefits of jQuery✤ Smaller code than pure JavaScript.✤ It handles cross browser differences.✤ It presents a single events API.✤ Easy DOM manipulation.
  • 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. 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. 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. Pure JavaScript vs jQuery
  • 39. Pure JavaScript vs jQuery Get the element with an id = “container”
  • 40. Pure JavaScript vs jQuery Get the element with an id = “container”var container = document.getElementById(‘container’);
  • 41. Pure JavaScript vs jQuery Get the element with an id = “container”var container = document.getElementById(‘container’); $(“#container”);
  • 42. Pure JavaScript vs jQuery Get the element with an id = “container” var container = document.getElementById(‘container’); $(“#container”);Hiding all <div> tags
  • 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. 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. Basics of jQuery
  • 46. Basics of jQueryLoading jQuery
  • 47. Basics of jQueryLoading jQuery Syntax
  • 48. Basics of jQueryLoading jQuery Syntax Selectors
  • 49. Basics of jQueryLoading jQuery Syntax Selectors Methods
  • 50. Loading jQuery
  • 51. Loading jQuery
  • 52. Loading jQuery✤ Download it as a .js file from jQuery.com
  • 53. Loading jQuery✤ Download it as a .js file from jQuery.com
  • 54. Loading jQuery✤ Download it as a .js file from jQuery.com
  • 55. Loading jQuery✤ Download it as a .js file from jQuery.com
  • 56. Loading jQuery✤ Download it as a .js file from jQuery.com <script src="jquery.js"></script>
  • 57. Loading jQuery✤ Download it as a .js file from jQuery.com <script src="jquery.js"></script>✤ Use it directly from Google server.
  • 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. Syntax
  • 60. Syntax
  • 61. Syntax $(document).ready(function(){   $("button").click(function(){     $("p").hide();   }); });
  • 62. Syntax $(document).ready(function(){   $("button").click(function(){     $("p").hide();   }); });// the jQuery philosophy
  • 63. Syntax $(document).ready(function(){   $("button").click(function(){     $("p").hide();   }); });// the jQuery philosophy$(“find an HTML element”)
  • 64. Syntax $(document).ready(function(){   $("button").click(function(){     $("p").hide();   }); });// the jQuery philosophy$(“find an HTML element”).doSomething();
  • 65. Syntax $(document).ready(function(){   $("button").click(function(){     $("p").hide();   }); });
  • 66. Syntax $(document).ready(function(){   $("button").click(function(){     $("p").hide();   }); });/* if you’re Curious about $() * it defines or accesses jQuery * $ = jQuery */
  • 67. Selectors
  • 68. Selectors
  • 69. SelectorsGive $() a selector
  • 70. SelectorsGive $() a selector $(“selector”)
  • 71. SelectorsGive $() a selector $(“selector”)// jQuery implements CSS selectors !
  • 72. SelectorsGive $() a selector $(“selector”)// jQuery implements CSS selectors !Types of selectors :
  • 73. SelectorsGive $() a selector $(“selector”)// jQuery implements CSS selectors !Types of selectors : ✤ Basic
  • 74. SelectorsGive $() a selector $(“selector”)// jQuery implements CSS selectors !Types of selectors : ✤ Basic $(“tag”)
  • 75. SelectorsGive $() a selector $(“selector”)// jQuery implements CSS selectors !Types of selectors : ✤ Basic $(“tag”) $(“#id”)
  • 76. SelectorsGive $() a selector $(“selector”)// jQuery implements CSS selectors !Types of selectors : ✤ Basic $(“tag”) $(“#id”) $(“.class”)
  • 77. SelectorsGive $() a selector $(“selector”)// jQuery implements CSS selectors !Types of selectors : ✤ Basic $(“tag”) $(“#id”) $(“.class”) ✤ More Precise Selectors :
  • 78. SelectorsGive $() a selector $(“selector”)// jQuery implements CSS selectors !Types of selectors : ✤ Basic $(“tag”) $(“#id”) $(“.class”) ✤ More Precise Selectors : $(“tag#id”)
  • 79. SelectorsGive $() a selector $(“selector”)// jQuery implements CSS selectors !Types of selectors : ✤ Basic $(“tag”) $(“#id”) $(“.class”) ✤ More Precise Selectors : $(“tag#id”) $(“tag.class”)
  • 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. 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. 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. 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. Other Type of Selectors
  • 85. Other Type of Selectors✤ Combination of ✤ Selection Index Filters. Selectors. ✤ Forms Selectors.✤ Hierarchy Selectors.
  • 86. Methods
  • 87. MethodsMoving Elements.append().appendTo().before().after()
  • 88. MethodsMoving Elements Attributes.append() .css().appendTo() .attr().before() .html().after() .addClass() .val()
  • 89. MethodsMoving Elements Attributes Events.append() .css() .click().appendTo() .attr() .dblclick().before() .html() .mouseover().after() .addClass() .trigger() .val() .bind()
  • 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. 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. 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. Moving Elements Example
  • 94. Moving Elements Example
  • 95. Moving Elements Example <html> <body> <div>jQuery</div> <div id=”foo”>example</div> </body> </html>
  • 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. 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. 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. 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. 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. Attribute Methods
  • 102. Attribute Methods
  • 103. Attribute Methods Get methods
  • 104. Attribute Methods Get methods $().attr(‘id’);
  • 105. Attribute Methods Get methods $().attr(‘id’); $().html();
  • 106. Attribute Methods Get methods $().attr(‘id’); $().html(); $().width();
  • 107. Attribute Methods Get methods $().attr(‘id’); $().html(); $().width(); $().css(“height”);
  • 108. Attribute Methods Get methods Set methods $().attr(‘id’); $().html(); $().width(); $().css(“height”);
  • 109. Attribute Methods Get methods Set methods $().attr(‘id’); $().attr(‘id’ , ‘foo’); $().html(); $().width(); $().css(“height”);
  • 110. Attribute Methods Get methods Set methods $().attr(‘id’); $().attr(‘id’ , ‘foo’); $().html(); $().html(“<p>hi</p>”); $().width(); $().css(“height”);
  • 111. Attribute Methods Get methods Set methods $().attr(‘id’); $().attr(‘id’ , ‘foo’); $().html(); $().html(“<p>hi</p>”); $().width(); $().width(60); $().css(“height”);
  • 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. 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. Attribute and Events Example
  • 115. Attribute and Events Example
  • 116. Attribute and Events Example <html> <body> <button>click me</button> <p>A paragraph</p> </body> </html>
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Live ExampleUse jQuery to increase and decrease the font size of a paragraph
  • 128. Plugins
  • 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. 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/