jQuery
Developing online news packages
What is jQuery?
Web pages are made up of three
elements
Web pages are made up of three
elements
• HTML - content
Web pages are made up of three
elements
• HTML - content
• CSS - design
Web pages are made up of three
elements
• HTML - content
• CSS - design
• JavaScript - interactivity
The problem with JavaScript

•

Simple tasks like manipulating a webpage take lots of code.

•

Different browsers have sl...
The problem with JavaScript

•

Simple tasks like manipulating a webpage take lots of code.

•

Different browsers have sl...
jQuery is a library
written in JavaScript
• jQuery is cross-browser compatible.
• Makes performing tasks like updating the...
JavaScript

jQuery
JavaScript

function	
  fadeOut(elm,	
  interval)	
  {	
  
	
  	
  for	
  (var	
  i=10;	
  i>0;	
  i-­‐-­‐)	
  {	
  
	
  	...
JavaScript

function	
  fadeOut(elm,	
  interval)	
  {	
  
	
  	
  for	
  (var	
  i=10;	
  i>0;	
  i-­‐-­‐)	
  {	
  
	
  	...
Where do I get jQuery?
jquery.com
OR
Link directly to the "Content Delivery Network"
(CDN)
http://code.jquery.com/jquery.m...
Where do I put jQuery?
<head>	
  
!

	
  	
  	
  <title>Some	
  page	
  title</title>	
  
	
  	
  	
  <style>	
  
	
  	
  ...
Where do I put jQuery?
<head>	
  
!

	
  	
  	
  <title>Some	
  page	
  title</title>	
  
	
  	
  	
  <style>	
  
	
  	
  ...
Where do I put jQuery?
<head>	
  
!

	
  	
  	
  <title>Some	
  page	
  title</title>	
  
	
  	
  	
  <style>	
  
	
  	
  ...
Where do I put jQuery?
<head>	
  
!

	
  	
  	
  <title>Some	
  page	
  title</title>	
  
	
  	
  	
  <style>	
  
	
  	
  ...
Review
What is jQuery?
Where on my web page do I put
jQuery?
Understanding
syntax
Understanding the syntax

$
Understanding the syntax

$

This means 'jQuery'
What do you want to manipulate?

$(".somebox")
$("#video")
$("div")
What do you want to manipulate?

$(".somebox")
$("#video")
$("div")
What do you want to manipulate?

$(".somebox")
$("#video")
$("div")
What do you want to manipulate?

$(".somebox")
$("#video")
$("div")
What do you want to manipulate?

$(".somebox")
$("#video")
$("div")
Note the quotes and parentheses
jQuery commands

$("#container").doSomething();
jQuery commands

$("#container").doSomething();
jQuery commands

$("#container").doSomething();
jQuery commands

$("#container").doSomething();
jQuery commands

$("#container")
$("#container")
$("#container")
jQuery commands

$("#container") .fadeOut();
$("#container")
$("#container")
jQuery commands

$("#container") .fadeOut();
$("#container") .hide();
$("#container")
jQuery commands

$("#container") .fadeOut();
$("#container") .hide();
$("#container") .slideDown();
Parts of jQuery command

$("#container").fadeOut();
Parts of jQuery command

$("#container").fadeOut();

jQuery
Parts of jQuery command

parentheses

$("#container").fadeOut();

jQuery
Parts of jQuery command

parentheses

$("#container").fadeOut();
quotes
jQuery
Parts of jQuery command

parentheses

$("#container").fadeOut();
css selector
quotes
jQuery
Parts of jQuery command

parentheses

$("#container").fadeOut();
css selector
quotes
jQuery

dot
Parts of jQuery command

parentheses

$("#container").fadeOut();
css selector
quotes
jQuery

command
dot
Parts of jQuery command

parentheses

$("#container").fadeOut();
css selector
quotes
jQuery

command
dot

parentheses
Parts of jQuery command
semicolon

parentheses

$("#container").fadeOut();
css selector
quotes
jQuery

command
dot

parent...
Review
Describe the jQuery command to
fade out a div element with the id
name "container"
Describe the jQuery command to
fade out a div element with the id
name "container"
$
Describe the jQuery command to
fade out a div element with the id
name "container"
$(
Describe the jQuery command to
fade out a div element with the id
name "container"
$ ("
Describe the jQuery command to
fade out a div element with the id
name "container"
$ ("#container
Describe the jQuery command to
fade out a div element with the id
name "container"
$ ("#container"
Describe the jQuery command to
fade out a div element with the id
name "container"
$ ("#container")
Describe the jQuery command to
fade out a div element with the id
name "container"
$ ("#container").
Describe the jQuery command to
fade out a div element with the id
name "container"
$ ("#container").fadeOut
Describe the jQuery command to
fade out a div element with the id
name "container"
$ ("#container").fadeOut()
Describe the jQuery command to
fade out a div element with the id
name "container"
$ ("#container").fadeOut();
jQuery in action
<div	
  id="box"></div>
jQuery in action
<div	
  id="box"></div>

$("#box").fadeOut();
jQuery in action
<div	
  id="box"></div>
jQuery in action
<div	
  id="box"></div>

$("#box").slideUp();
jQuery in action
<div	
  id="box"></div>
jQuery in action
<div	
  id="box"></div>

$("#box").hide();
jQuery in action
<div	
  id="box"></div>
jQuery in action
<div	
  id="box"></div>

Hello
World

$("#box").text("Hello	
  World");
Parameters
Parameters in jQuery

$("#container").fadeOut();
Parameters in jQuery

$("#container").fadeOut();

parentheses
Parameters in jQuery

$("#container").fadeOut("slow");
Parameters in jQuery

$("#container").fadeOut("slow");
parameter
Parameters in jQuery

$("#container").fadeOut(3000);
Parameters in jQuery

$("#container").fadeOut(3000);
parameter
Parameters in jQuery

$("#container").text("Hello	
  World");

All text has to be in quotes, unless it is some
special com...
Parameters in jQuery

$("#container").text("Hello	
  World");
quotes
All text has to be in quotes, unless it is some
speci...
Parameters in jQuery

$("#container").fadeOut(200);
Will fade out element with id #container 

in 200 milliseconds
Parameters in jQuery

$("#container").fadeOut(200);
Will fade out element with id #container 

in 200 milliseconds
Review
Why is there a parenthesis at the
end of every jQuery command?
$("#someid").command();
wtf?
Why is there a parenthesis at the
end of every jQuery command?
$("#someid").command();
wtf?
To sometimes include additiona...
What does the following jQuery
command do?
$("#title").fadeOut(4000);
What does the following jQuery
command do?
$("#title").fadeOut(4000);
Fades out some HTML element with an id
attribute "ti...
What's wrong with the following
jQuery command?
$("#footer").text(This	
  is	
  copyrighted);
What's wrong with the following
jQuery command?
$("#footer").text(This	
  is	
  copyrighted);
When the parameter is text, ...
Multiple Parameters
Multiple Parameters

$("#container").css("background",	
  "red");
Multiple Parameters

$("#container").css("background",	
  "red");
1st parameter

2nd parameter
Multiple Parameters
comma
$("#container").css("background",	
  "red");
1st parameter

2nd parameter
Multiple Parameters

$("#container").fadeTo(5000,	
  0.5);
Multiple Parameters

$("#container").fadeTo(5000,	
  0.5);
Multiple Parameters
comma
$("#container").fadeTo(5000,	
  0.5);
Review
What character symbol do I use to
separate multiple parameters?
What character symbol do I use to
separate multiple parameters?

A comma

$("#container").css("background",	
  "red");
How would I write a command to
change the CSS of #box so that the
text color is blue?
How would I write a command to
change the CSS of #box so that the
text color is blue?
$
How would I write a command to
change the CSS of #box so that the
text color is blue?
$(
How would I write a command to
change the CSS of #box so that the
text color is blue?
$ ("#box"
How would I write a command to
change the CSS of #box so that the
text color is blue?
$ ("#box")
How would I write a command to
change the CSS of #box so that the
text color is blue?
$ ("#box").
How would I write a command to
change the CSS of #box so that the
text color is blue?
$ ("#box").css
How would I write a command to
change the CSS of #box so that the
text color is blue?
$ ("#box").css(
How would I write a command to
change the CSS of #box so that the
text color is blue?
$ ("#box").css("color"
How would I write a command to
change the CSS of #box so that the
text color is blue?
$ ("#box").css("color",
How would I write a command to
change the CSS of #box so that the
text color is blue?
$ ("#box").css("color","blue"
How would I write a command to
change the CSS of #box so that the
text color is blue?
$ ("#box").css("color","blue" )
How would I write a command to
change the CSS of #box so that the
text color is blue?
$ ("#box").css("color","blue" );
Functions
What are functions?
•

Functions are simply blocks of code that are in a
waiting queue to be run.

•

Think of it as a way...
jQuery functions

$("#button").on("click"…
jQuery functions
wait for something to happen
$("#button").on("click"…
jQuery functions

$("#button").on("click",	
  function(){});
jQuery functions

$("#button").on("click",	
  function(){});
jQuery functions
parenthesis, which we
won't ever use in functions
$("#button").on("click",	
  function(){});
jQuery functions
parenthesis, which we
won't ever use in functions
$("#button").on("click",	
  function(){});
We put code ...
jQuery functions

$("#button").on("click",	
  function(){});
jQuery functions

$("#button").on("click",	
  function(){
$("#box").fadeOut();

});

Code only runs after!
button is click...
Anatomy of a function

function	
  (){}
Anatomy of a function

function	
  (){
Code goes here

}
Review
What's a function?
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 o...
Describe all the parts of a function
from beginning to end.
Describe all the parts of a function
from beginning to end.

function
Describe all the parts of a function
from beginning to end.

function()
Describe all the parts of a function
from beginning to end.

function(){}
Where does the code go that should
execute when this function is run?

function(){}
Where does the code go that should
execute when this function is run?

function(){}
Right here
What does the following do in
jQuery?
$("#button").on("click",	
  function(){	
  
!

	
   $("#title").fadeOut("fast");	
  ...
What does the following do in
jQuery?
$("#button").on("click",	
  function(){	
  
!

	
   $("#title").fadeOut("fast");	
  ...
Animation
animate method

$("#box").animate({'left':'50px'},	
  3000);

Just to expose you to this command
(don't worry about memori...
animate method

$("#box").animate({'left':'50px'},	
  3000);

jquery selector

Just to expose you to this command
(don't w...
animate method
jquery command

$("#box").animate({'left':'50px'},	
  3000);

jquery selector

Just to expose you to this c...
animate method
css property

value

jquery command

$("#box").animate({'left':'50px'},	
  3000);

jquery selector

Just to...
animate method
css property

value

jquery command

$("#box").animate({'left':'50px'},	
  3000);
curly brackets
jquery sel...
animate method
css property
jquery command

value

colon

$("#box").animate({'left':'50px'},	
  3000);
curly brackets
jque...
animate method
css property
jquery command

value

colon

$("#box").animate({'left':'50px'},	
  3000);
curly brackets
jque...
animate method
css property
jquery command

value

colon

$("#box").animate({'left':'50px'},	
  3000);
curly brackets
jque...
jQuery "ready"

•
•

jQuery can't run until the entire webpage is fully loaded.
Because web pages run from the top to bott...
All jQuery code goes into a
"ready" block

$(document).ready(function(){	
  
!
!
!

});
Upcoming SlideShare
Loading in...5
×

Jquery News Packages

734

Published on

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
734
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Jquery News Packages

  1. 1. jQuery Developing online news packages
  2. 2. What is jQuery?
  3. 3. Web pages are made up of three elements
  4. 4. Web pages are made up of three elements • HTML - content
  5. 5. Web pages are made up of three elements • HTML - content • CSS - design
  6. 6. Web pages are made up of three elements • HTML - content • CSS - design • JavaScript - interactivity
  7. 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. 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. 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. 10. JavaScript jQuery
  11. 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. 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. 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. 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. 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. 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. 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. 18. Review
  19. 19. What is jQuery?
  20. 20. Where on my web page do I put jQuery?
  21. 21. Understanding syntax
  22. 22. Understanding the syntax $
  23. 23. Understanding the syntax $ This means 'jQuery'
  24. 24. What do you want to manipulate? $(".somebox") $("#video") $("div")
  25. 25. What do you want to manipulate? $(".somebox") $("#video") $("div")
  26. 26. What do you want to manipulate? $(".somebox") $("#video") $("div")
  27. 27. What do you want to manipulate? $(".somebox") $("#video") $("div")
  28. 28. What do you want to manipulate? $(".somebox") $("#video") $("div") Note the quotes and parentheses
  29. 29. jQuery commands $("#container").doSomething();
  30. 30. jQuery commands $("#container").doSomething();
  31. 31. jQuery commands $("#container").doSomething();
  32. 32. jQuery commands $("#container").doSomething();
  33. 33. jQuery commands $("#container") $("#container") $("#container")
  34. 34. jQuery commands $("#container") .fadeOut(); $("#container") $("#container")
  35. 35. jQuery commands $("#container") .fadeOut(); $("#container") .hide(); $("#container")
  36. 36. jQuery commands $("#container") .fadeOut(); $("#container") .hide(); $("#container") .slideDown();
  37. 37. Parts of jQuery command $("#container").fadeOut();
  38. 38. Parts of jQuery command $("#container").fadeOut(); jQuery
  39. 39. Parts of jQuery command parentheses $("#container").fadeOut(); jQuery
  40. 40. Parts of jQuery command parentheses $("#container").fadeOut(); quotes jQuery
  41. 41. Parts of jQuery command parentheses $("#container").fadeOut(); css selector quotes jQuery
  42. 42. Parts of jQuery command parentheses $("#container").fadeOut(); css selector quotes jQuery dot
  43. 43. Parts of jQuery command parentheses $("#container").fadeOut(); css selector quotes jQuery command dot
  44. 44. Parts of jQuery command parentheses $("#container").fadeOut(); css selector quotes jQuery command dot parentheses
  45. 45. Parts of jQuery command semicolon parentheses $("#container").fadeOut(); css selector quotes jQuery command dot parentheses
  46. 46. Review
  47. 47. Describe the jQuery command to fade out a div element with the id name "container"
  48. 48. Describe the jQuery command to fade out a div element with the id name "container" $
  49. 49. Describe the jQuery command to fade out a div element with the id name "container" $(
  50. 50. Describe the jQuery command to fade out a div element with the id name "container" $ ("
  51. 51. Describe the jQuery command to fade out a div element with the id name "container" $ ("#container
  52. 52. Describe the jQuery command to fade out a div element with the id name "container" $ ("#container"
  53. 53. Describe the jQuery command to fade out a div element with the id name "container" $ ("#container")
  54. 54. Describe the jQuery command to fade out a div element with the id name "container" $ ("#container").
  55. 55. Describe the jQuery command to fade out a div element with the id name "container" $ ("#container").fadeOut
  56. 56. Describe the jQuery command to fade out a div element with the id name "container" $ ("#container").fadeOut()
  57. 57. Describe the jQuery command to fade out a div element with the id name "container" $ ("#container").fadeOut();
  58. 58. jQuery in action <div  id="box"></div>
  59. 59. jQuery in action <div  id="box"></div> $("#box").fadeOut();
  60. 60. jQuery in action <div  id="box"></div>
  61. 61. jQuery in action <div  id="box"></div> $("#box").slideUp();
  62. 62. jQuery in action <div  id="box"></div>
  63. 63. jQuery in action <div  id="box"></div> $("#box").hide();
  64. 64. jQuery in action <div  id="box"></div>
  65. 65. jQuery in action <div  id="box"></div> Hello World $("#box").text("Hello  World");
  66. 66. Parameters
  67. 67. Parameters in jQuery $("#container").fadeOut();
  68. 68. Parameters in jQuery $("#container").fadeOut(); parentheses
  69. 69. Parameters in jQuery $("#container").fadeOut("slow");
  70. 70. Parameters in jQuery $("#container").fadeOut("slow"); parameter
  71. 71. Parameters in jQuery $("#container").fadeOut(3000);
  72. 72. Parameters in jQuery $("#container").fadeOut(3000); parameter
  73. 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. 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. 75. Parameters in jQuery $("#container").fadeOut(200); Will fade out element with id #container in 200 milliseconds
  76. 76. Parameters in jQuery $("#container").fadeOut(200); Will fade out element with id #container in 200 milliseconds
  77. 77. Review
  78. 78. Why is there a parenthesis at the end of every jQuery command? $("#someid").command(); wtf?
  79. 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. 80. What does the following jQuery command do? $("#title").fadeOut(4000);
  81. 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. 82. What's wrong with the following jQuery command? $("#footer").text(This  is  copyrighted);
  83. 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. 84. Multiple Parameters
  85. 85. Multiple Parameters $("#container").css("background",  "red");
  86. 86. Multiple Parameters $("#container").css("background",  "red"); 1st parameter 2nd parameter
  87. 87. Multiple Parameters comma $("#container").css("background",  "red"); 1st parameter 2nd parameter
  88. 88. Multiple Parameters $("#container").fadeTo(5000,  0.5);
  89. 89. Multiple Parameters $("#container").fadeTo(5000,  0.5);
  90. 90. Multiple Parameters comma $("#container").fadeTo(5000,  0.5);
  91. 91. Review
  92. 92. What character symbol do I use to separate multiple parameters?
  93. 93. What character symbol do I use to separate multiple parameters? A comma $("#container").css("background",  "red");
  94. 94. How would I write a command to change the CSS of #box so that the text color is blue?
  95. 95. How would I write a command to change the CSS of #box so that the text color is blue? $
  96. 96. How would I write a command to change the CSS of #box so that the text color is blue? $(
  97. 97. How would I write a command to change the CSS of #box so that the text color is blue? $ ("#box"
  98. 98. How would I write a command to change the CSS of #box so that the text color is blue? $ ("#box")
  99. 99. How would I write a command to change the CSS of #box so that the text color is blue? $ ("#box").
  100. 100. How would I write a command to change the CSS of #box so that the text color is blue? $ ("#box").css
  101. 101. How would I write a command to change the CSS of #box so that the text color is blue? $ ("#box").css(
  102. 102. How would I write a command to change the CSS of #box so that the text color is blue? $ ("#box").css("color"
  103. 103. How would I write a command to change the CSS of #box so that the text color is blue? $ ("#box").css("color",
  104. 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. 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. 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. 107. Functions
  108. 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. 109. jQuery functions $("#button").on("click"…
  110. 110. jQuery functions wait for something to happen $("#button").on("click"…
  111. 111. jQuery functions $("#button").on("click",  function(){});
  112. 112. jQuery functions $("#button").on("click",  function(){});
  113. 113. jQuery functions parenthesis, which we won't ever use in functions $("#button").on("click",  function(){});
  114. 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. 115. jQuery functions $("#button").on("click",  function(){});
  116. 116. jQuery functions $("#button").on("click",  function(){ $("#box").fadeOut(); }); Code only runs after! button is clicked.
  117. 117. Anatomy of a function function  (){}
  118. 118. Anatomy of a function function  (){ Code goes here }
  119. 119. Review
  120. 120. What's a function?
  121. 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. 122. Describe all the parts of a function from beginning to end.
  123. 123. Describe all the parts of a function from beginning to end. function
  124. 124. Describe all the parts of a function from beginning to end. function()
  125. 125. Describe all the parts of a function from beginning to end. function(){}
  126. 126. Where does the code go that should execute when this function is run? function(){}
  127. 127. Where does the code go that should execute when this function is run? function(){} Right here
  128. 128. What does the following do in jQuery? $("#button").on("click",  function(){   !   $("#title").fadeOut("fast");   ! });
  129. 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. 130. Animation
  131. 131. animate method $("#box").animate({'left':'50px'},  3000); Just to expose you to this command (don't worry about memorizing it)
  132. 132. animate method $("#box").animate({'left':'50px'},  3000); jquery selector Just to expose you to this command (don't worry about memorizing it)
  133. 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. 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. 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. 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. 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. 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. 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. 140. All jQuery code goes into a "ready" block $(document).ready(function(){   ! ! ! });
  1. A particular slide catching your eye?

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

×