Your SlideShare is downloading. ×
Jquery News Packages
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Jquery News Packages

673

Published on

jQuery tutorial for class

jQuery tutorial for class

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

  • Be the first to like this

No Downloads
Views
Total Views
673
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
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

Transcript

  • 1. jQuery Developing online news packages
  • 2. What is jQuery?
  • 3. Web pages are made up of three elements
  • 4. Web pages are made up of three elements • HTML - content
  • 5. Web pages are made up of three elements • HTML - content • CSS - design
  • 6. Web pages are made up of three elements • HTML - content • CSS - design • JavaScript - interactivity
  • 7. The problem with JavaScript • Simple tasks like manipulating a webpage take lots of code. • Different browsers have slightly different methods of doing things, requiring coders to create fallbacks. • Writing code, like an animation, could be inefficient or not the the best method of doing something.
  • 8. The problem with JavaScript • Simple tasks like manipulating a webpage take lots of code. • Different browsers have slightly different methods of doing things, requiring coders to create fallbacks. • Writing code, like an animation, could be inefficient or not the the best method of doing something. jQuery to the rescue!
  • 9. jQuery is a library written in JavaScript • jQuery is cross-browser compatible. • Makes performing tasks like updating the page, relatively simple. • Less code required to introduce interactivity.
  • 10. JavaScript jQuery
  • 11. JavaScript function  fadeOut(elm,  interval)  {      for  (var  i=10;  i>0;  i-­‐-­‐)  {          var  opacity  =  i/10;          setTimeout(  function(opacity)  {              elm.setStyle("-­‐moz-­‐opacity",opacity);              elm.setStyle("opacity",opacity);              elm.setStyle("filter","alpha(opacity="  +   (opacity*100).toString()  );              //set  alpha  values  for  various  browsers          },  interval;      }   }   ! fadeOut(getElementById('box'),  100); jQuery
  • 12. JavaScript function  fadeOut(elm,  interval)  {      for  (var  i=10;  i>0;  i-­‐-­‐)  {          var  opacity  =  i/10;          setTimeout(  function(opacity)  {              elm.setStyle("-­‐moz-­‐opacity",opacity);              elm.setStyle("opacity",opacity);              elm.setStyle("filter","alpha(opacity="  +   (opacity*100).toString()  );              //set  alpha  values  for  various  browsers          },  interval;      }   }   ! fadeOut(getElementById('box'),  100); jQuery $('#box').fadeOut();
  • 13. Where do I get jQuery? jquery.com OR Link directly to the "Content Delivery Network" (CDN) http://code.jquery.com/jquery.min.js
  • 14. Where do I put jQuery? <head>   !      <title>Some  page  title</title>        <style>              #container{                      width:600px;              }        </style>        <script  src="jquery.min.js"></script>        <script>              //your  jquery  commands  go  here        </script>   ! </head>
  • 15. Where do I put jQuery? <head>   !      <title>Some  page  title</title>        <style>              #container{                      width:600px;              }        </style>        <script  src="jquery.min.js"></script>        <script>              //your  jquery  commands  go  here        </script>   ! </head> jQuery Library
  • 16. Where do I put jQuery? <head>   !      <title>Some  page  title</title>        <style>              #container{                      width:600px;              }        </style>        <script  src="jquery.min.js"></script>        <script>              //your  jquery  commands  go  here        </script>   ! </head> jQuery Library Your jQuery commands
  • 17. Where do I put jQuery? <head>   !      <title>Some  page  title</title>        <style>              #container{                      width:600px;              }        </style>        <script  src="jquery.min.js"></script>        <script>              //your  jquery  commands  go  here        </script>   ! </head> jQuery Library Your jQuery commands CSS code (before/after)
  • 18. Review
  • 19. What is jQuery?
  • 20. Where on my web page do I put jQuery?
  • 21. Understanding syntax
  • 22. Understanding the syntax $
  • 23. Understanding the syntax $ This means 'jQuery'
  • 24. What do you want to manipulate? $(".somebox") $("#video") $("div")
  • 25. What do you want to manipulate? $(".somebox") $("#video") $("div")
  • 26. What do you want to manipulate? $(".somebox") $("#video") $("div")
  • 27. What do you want to manipulate? $(".somebox") $("#video") $("div")
  • 28. What do you want to manipulate? $(".somebox") $("#video") $("div") Note the quotes and parentheses
  • 29. jQuery commands $("#container").doSomething();
  • 30. jQuery commands $("#container").doSomething();
  • 31. jQuery commands $("#container").doSomething();
  • 32. jQuery commands $("#container").doSomething();
  • 33. jQuery commands $("#container") $("#container") $("#container")
  • 34. jQuery commands $("#container") .fadeOut(); $("#container") $("#container")
  • 35. jQuery commands $("#container") .fadeOut(); $("#container") .hide(); $("#container")
  • 36. jQuery commands $("#container") .fadeOut(); $("#container") .hide(); $("#container") .slideDown();
  • 37. Parts of jQuery command $("#container").fadeOut();
  • 38. Parts of jQuery command $("#container").fadeOut(); jQuery
  • 39. Parts of jQuery command parentheses $("#container").fadeOut(); jQuery
  • 40. Parts of jQuery command parentheses $("#container").fadeOut(); quotes jQuery
  • 41. Parts of jQuery command parentheses $("#container").fadeOut(); css selector quotes jQuery
  • 42. Parts of jQuery command parentheses $("#container").fadeOut(); css selector quotes jQuery dot
  • 43. Parts of jQuery command parentheses $("#container").fadeOut(); css selector quotes jQuery command dot
  • 44. Parts of jQuery command parentheses $("#container").fadeOut(); css selector quotes jQuery command dot parentheses
  • 45. Parts of jQuery command semicolon parentheses $("#container").fadeOut(); css selector quotes jQuery command dot parentheses
  • 46. Review
  • 47. Describe the jQuery command to fade out a div element with the id name "container"
  • 48. Describe the jQuery command to fade out a div element with the id name "container" $
  • 49. Describe the jQuery command to fade out a div element with the id name "container" $(
  • 50. Describe the jQuery command to fade out a div element with the id name "container" $ ("
  • 51. Describe the jQuery command to fade out a div element with the id name "container" $ ("#container
  • 52. Describe the jQuery command to fade out a div element with the id name "container" $ ("#container"
  • 53. Describe the jQuery command to fade out a div element with the id name "container" $ ("#container")
  • 54. Describe the jQuery command to fade out a div element with the id name "container" $ ("#container").
  • 55. Describe the jQuery command to fade out a div element with the id name "container" $ ("#container").fadeOut
  • 56. Describe the jQuery command to fade out a div element with the id name "container" $ ("#container").fadeOut()
  • 57. Describe the jQuery command to fade out a div element with the id name "container" $ ("#container").fadeOut();
  • 58. jQuery in action <div  id="box"></div>
  • 59. jQuery in action <div  id="box"></div> $("#box").fadeOut();
  • 60. jQuery in action <div  id="box"></div>
  • 61. jQuery in action <div  id="box"></div> $("#box").slideUp();
  • 62. jQuery in action <div  id="box"></div>
  • 63. jQuery in action <div  id="box"></div> $("#box").hide();
  • 64. jQuery in action <div  id="box"></div>
  • 65. jQuery in action <div  id="box"></div> Hello World $("#box").text("Hello  World");
  • 66. Parameters
  • 67. Parameters in jQuery $("#container").fadeOut();
  • 68. Parameters in jQuery $("#container").fadeOut(); parentheses
  • 69. Parameters in jQuery $("#container").fadeOut("slow");
  • 70. Parameters in jQuery $("#container").fadeOut("slow"); parameter
  • 71. Parameters in jQuery $("#container").fadeOut(3000);
  • 72. Parameters in jQuery $("#container").fadeOut(3000); parameter
  • 73. Parameters in jQuery $("#container").text("Hello  World"); All text has to be in quotes, unless it is some special command recognized by JavaScript.
  • 74. Parameters in jQuery $("#container").text("Hello  World"); quotes All text has to be in quotes, unless it is some special command recognized by JavaScript.
  • 75. Parameters in jQuery $("#container").fadeOut(200); Will fade out element with id #container in 200 milliseconds
  • 76. Parameters in jQuery $("#container").fadeOut(200); Will fade out element with id #container in 200 milliseconds
  • 77. Review
  • 78. Why is there a parenthesis at the end of every jQuery command? $("#someid").command(); wtf?
  • 79. Why is there a parenthesis at the end of every jQuery command? $("#someid").command(); wtf? To sometimes include additional information about how the command should operate oh.
  • 80. What does the following jQuery command do? $("#title").fadeOut(4000);
  • 81. What does the following jQuery command do? $("#title").fadeOut(4000); Fades out some HTML element with an id attribute "title" over the course of four seconds
  • 82. What's wrong with the following jQuery command? $("#footer").text(This  is  copyrighted);
  • 83. What's wrong with the following jQuery command? $("#footer").text(This  is  copyrighted); When the parameter is text, it NEEDS to have quotes or it won't work. $("#footer").text("This  is  copyrighted");
  • 84. Multiple Parameters
  • 85. Multiple Parameters $("#container").css("background",  "red");
  • 86. Multiple Parameters $("#container").css("background",  "red"); 1st parameter 2nd parameter
  • 87. Multiple Parameters comma $("#container").css("background",  "red"); 1st parameter 2nd parameter
  • 88. Multiple Parameters $("#container").fadeTo(5000,  0.5);
  • 89. Multiple Parameters $("#container").fadeTo(5000,  0.5);
  • 90. Multiple Parameters comma $("#container").fadeTo(5000,  0.5);
  • 91. Review
  • 92. What character symbol do I use to separate multiple parameters?
  • 93. What character symbol do I use to separate multiple parameters? A comma $("#container").css("background",  "red");
  • 94. How would I write a command to change the CSS of #box so that the text color is blue?
  • 95. How would I write a command to change the CSS of #box so that the text color is blue? $
  • 96. How would I write a command to change the CSS of #box so that the text color is blue? $(
  • 97. How would I write a command to change the CSS of #box so that the text color is blue? $ ("#box"
  • 98. How would I write a command to change the CSS of #box so that the text color is blue? $ ("#box")
  • 99. How would I write a command to change the CSS of #box so that the text color is blue? $ ("#box").
  • 100. How would I write a command to change the CSS of #box so that the text color is blue? $ ("#box").css
  • 101. How would I write a command to change the CSS of #box so that the text color is blue? $ ("#box").css(
  • 102. How would I write a command to change the CSS of #box so that the text color is blue? $ ("#box").css("color"
  • 103. How would I write a command to change the CSS of #box so that the text color is blue? $ ("#box").css("color",
  • 104. How would I write a command to change the CSS of #box so that the text color is blue? $ ("#box").css("color","blue"
  • 105. How would I write a command to change the CSS of #box so that the text color is blue? $ ("#box").css("color","blue" )
  • 106. How would I write a command to change the CSS of #box so that the text color is blue? $ ("#box").css("color","blue" );
  • 107. Functions
  • 108. What are functions? • Functions are simply blocks of code that are in a waiting queue to be run. • Think of it as a way of saying "do the following…" but only when activated. • Functions only run at certain times. In jQuery, a function is usually runs when a user clicks a button, or performs some type of action.
  • 109. jQuery functions $("#button").on("click"…
  • 110. jQuery functions wait for something to happen $("#button").on("click"…
  • 111. jQuery functions $("#button").on("click",  function(){});
  • 112. jQuery functions $("#button").on("click",  function(){});
  • 113. jQuery functions parenthesis, which we won't ever use in functions $("#button").on("click",  function(){});
  • 114. jQuery functions parenthesis, which we won't ever use in functions $("#button").on("click",  function(){}); We put code inside the curly brackets to be called only after the event click happens.
  • 115. jQuery functions $("#button").on("click",  function(){});
  • 116. jQuery functions $("#button").on("click",  function(){ $("#box").fadeOut(); }); Code only runs after! button is clicked.
  • 117. Anatomy of a function function  (){}
  • 118. Anatomy of a function function  (){ Code goes here }
  • 119. Review
  • 120. What's a function?
  • 121. What's a function? A block of code which is only run at a certain time, like after an event, such as when a user clicks on a button.
  • 122. Describe all the parts of a function from beginning to end.
  • 123. Describe all the parts of a function from beginning to end. function
  • 124. Describe all the parts of a function from beginning to end. function()
  • 125. Describe all the parts of a function from beginning to end. function(){}
  • 126. Where does the code go that should execute when this function is run? function(){}
  • 127. Where does the code go that should execute when this function is run? function(){} Right here
  • 128. What does the following do in jQuery? $("#button").on("click",  function(){   !   $("#title").fadeOut("fast");   ! });
  • 129. What does the following do in jQuery? $("#button").on("click",  function(){   !   $("#title").fadeOut("fast");   ! }); When the HTML element with the id attribute "button" is clicked, an element "title" will fade out quickly.
  • 130. Animation
  • 131. animate method $("#box").animate({'left':'50px'},  3000); Just to expose you to this command (don't worry about memorizing it)
  • 132. animate method $("#box").animate({'left':'50px'},  3000); jquery selector Just to expose you to this command (don't worry about memorizing it)
  • 133. animate method jquery command $("#box").animate({'left':'50px'},  3000); jquery selector Just to expose you to this command (don't worry about memorizing it)
  • 134. animate method css property value jquery command $("#box").animate({'left':'50px'},  3000); jquery selector Just to expose you to this command (don't worry about memorizing it)
  • 135. animate method css property value jquery command $("#box").animate({'left':'50px'},  3000); curly brackets jquery selector Just to expose you to this command (don't worry about memorizing it)
  • 136. animate method css property jquery command value colon $("#box").animate({'left':'50px'},  3000); curly brackets jquery selector Just to expose you to this command (don't worry about memorizing it)
  • 137. animate method css property jquery command value colon $("#box").animate({'left':'50px'},  3000); curly brackets jquery selector milliseconds Just to expose you to this command (don't worry about memorizing it)
  • 138. animate method css property jquery command value colon $("#box").animate({'left':'50px'},  3000); curly brackets jquery selector milliseconds Just to expose you to this command (don't worry about memorizing it)
  • 139. jQuery "ready" • • jQuery can't run until the entire webpage is fully loaded. Because web pages run from the top to bottom, we need to place a trigger to prevent jQuery from running until the web page is fully loaded.
  • 140. All jQuery code goes into a "ready" block $(document).ready(function(){   ! ! ! });

×