A Smarter Way to Learn jQuery

Measure the height of the window and assign the number to the variable winHeight.

var winHeight = $(window).height();

^ *var winHeight = \$$window$\.height; *$

Measure the height of the window and assign the number to a variable. Make up the variable name.

var winHt = $(window).height();

^ *var .+ = \$$window$\.height; *$

Measure the width of the window and assign the number to a variable. Measure the height of the window and assign the number to another variable. Make up the variable names.

var winWth = $(window).width();
var winHt = $(window).height();

^ *var .+ = \$$window$\.width;\nvar .+ = \$$window$\.height; *$

Fly an image to the horizontal center of the screen. The offset is stored in the variable hOffset. Make up the id of the image.

$("img#loris").animate({left: hOffset});

^ *\$$•img#.+•$\.animate${left: hOffset}$; *$

5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to fly the div right, then down, centering it both horizontally and vertically.

$("div#daily").animate({left: imageHorizOffset});
$("div#daily").animate({top: imageVertOffset});

Animate $(this) so it flies down to the vertical center. The vertical offset is vOffset.

$(this).animate({top: vOffset});

$`(`this`)`.`animate`(`{`top`:`1spacevOffset`}`)`;

Animate $(this) so it flies to the horizontal center. The offset is stored in the variable hOffset.

$(this).animate({left: hOffset});

Animate $(this) so it flies to the horizontal center, then to the vertical center. Make up the variables in which the offsets are stored. Don't use chaining.

$(this).animate({left: hOffset});
$(this).animate({top: vOffset});

^ *\$$this$\.animate${left: .+}$;\n\$$this$\.animate${top: .+}$; *$

Animate a div so it flies to the horizontal center, then to the vertical center. Make up the div's id and the variables in which the offsets are stored. Use chaining.

$("div#main").animate({left: hOffset}).animate({top: vOffset});

^ *\$$•div#(.+)•$\.animate${left: .+}$\.animate${top: .+}$; *$

Animate all images of a certain class so they fly to the horizontal center and the vertical center simultaneously. Make up the class name and the variables where the offsets are stored. Don't use chaining.

$("img.flyIns").animate({left: hOffset, top: vOffset});

^ *\$$•img\..+•$\.animate${left: ([a-zA-Z$_][a-zA-Z$_0-9]*), top: ([a-zA-Z$_][a-zA-Z$_0-9]*)}$; *$

Code a line of CSS that hides a 400-pixel div above the top of the screen. Don't indent the line.

top: -400px;

^ *top: -400px; *$

1. Measure the window width and store it in a variable.
2. Measure the window height and store it in another variable.
3. Calculate the horizontal offset to center a 100-pixel-wide element and store it in a third variable.
4. Calculate the vertical offset to center a 100-pixel-high element and store it in a fourth variable.
Make up the variable names

var wWidth = $(window).width();
var wHeight = $(window).height();
var wOffset = ((wWidth - 100) / 2) + "px";
var vOffset = ((wHeight - 100) / 2) + "px";

^ *var (.+) = \$$window$\.width;\nvar (.+) = \$$window$\.height;\nvar .+ = $\(\1 - 100$ \/ 2\) \+ •px•;\nvar .+ = $\(\2 - 100$ \/ 2\) \+ •px•; *$

Animate $(this) so it flies to the horizontal center, then to the vertical center. The offsets are stored in the variables hOffset and vOffset. Use chaining.

$(this).animate({left: hOffset}).animate({top: vOffset});

^ *\$$this$\.animate${left: hOffset}$\.animate${top: vOffset}$; *$

Animate $(this) so it flies to the horizontal center, then to the vertical center. Make up the variables where in which the offsets are stored. Don't use chaining.

$(this).animate({left: hOffset});
$(this).animate({top: vOffset});

^ *\$$this$\.animate${left: .+}$;\n\$$this$\.animate${top: .+}$; *$

Animate a div so it flies to the horizontal center, then to the vertical center. Make up the div's id and the variables in which the offsets are stored. Use chaining.

$("div#main").animate({left: hOffset}).animate({top: vOffset});

^ *\$$•div#(.+)•$\.animate${left: .+}$\.animate${top: .+}$; *$

Animate all images of a certain class so they fly to the horizontal center and the vertical center simultaneously. Make up the class name and the variables where the offsets are stored.

$("img.flyIns").animate({left: hOffset, top: vOffset});

^ *\$$•img\..+•$\.animate${left: ([a-zA-Z$_][a-zA-Z$_0-9]*), top: ([a-zA-Z$_][a-zA-Z$_0-9]*)}$; *$

Code a line of CSS that hides a 400-pixel div above the top of the screen. Don't indent the line.

top: -400px;

^ *top: -400px; *$

var wWidth = $(window).width();
var wHeight = $(window).height();
var wOffset = ((wWidth - 100) / 2) + "px";
var vOffset = ((wHeight - 100) / 2) + "px";

^ *var (.+) = \$$window$\.width;\nvar (.+) = \$$window$\.height;\nvar .+ = $\(\1 - 100$ \/ 2\) \+ •px•;\nvar .+ = $\(\2 - 100$ \/ 2\) \+ •px•; *$

http://jsfiddle.net/ASmarterWayToLearn/ngbj6n7k/

http://jsfiddle.net/ASmarterWayToLearn/yx2q676z/

Measure the height of the window and assign the number to the variable winHeight.

var winHeight = $(window).height();

^ *var winHeight = \$$window$\.height; *$

Measure the height of the window and assign the number to a variable. Make up the variable name.

var winHt = $(window).height();

^ *var .+ = \$$window$\.height; *$

Measure the width of the window and assign the number to a variable. Measure the height of the window and assign the number to another variable. Make up the variable names.

var winWth = $(window).width();
var winHt = $(window).height();

^ *var .+ = \$$window$\.width;\nvar .+ = \$$window$\.height; *$

Fly an image to the horizontal center of the screen. The offset is stored in the variable hOffset. Make up the id of the image.

$("img#loris").animate({left: hOffset});

^ *\$$•img#.+•$\.animate${left: hOffset}$; *$

5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to fly the div right, then down, centering it both horizontally and vertically.

$("div#daily").animate({left: imageHorizOffset});
$("div#daily").animate({top: imageVertOffset});

Animate $(this) so it flies down to the vertical center. The vertical offset is vOffset.

$(this).animate({top: vOffset});

$`(`this`)`.`animate`(`{`top`:`1spacevOffset`}`)`;

Animate $(this) so it flies to the horizontal center. The offset is stored in the variable hOffset.

$(this).animate({left: hOffset});

Animate $(this) so it flies to the horizontal center, then to the vertical center. Make up the variables in which the offsets are stored. Don't use chaining.

$(this).animate({left: hOffset});
$(this).animate({top: vOffset});

^ *\$$this$\.animate${left: .+}$;\n\$$this$\.animate${top: .+}$; *$

Animate a div so it flies to the horizontal center, then to the vertical center. Make up the div's id and the variables in which the offsets are stored. Use chaining.

$("div#main").animate({left: hOffset}).animate({top: vOffset});

^ *\$$•div#(.+)•$\.animate${left: .+}$\.animate${top: .+}$; *$

$("img.flyIns").animate({left: hOffset, top: vOffset});

^ *\$$•img\..+•$\.animate${left: ([a-zA-Z$_][a-zA-Z$_0-9]*), top: ([a-zA-Z$_][a-zA-Z$_0-9]*)}$; *$

Code a line of CSS that hides a 400-pixel div above the top of the screen. Don't indent the line.

top: -400px;

^ *top: -400px; *$

var wWidth = $(window).width();
var wHeight = $(window).height();
var wOffset = ((wWidth - 100) / 2) + "px";
var vOffset = ((wHeight - 100) / 2) + "px";

^ *var (.+) = \$$window$\.width;\nvar (.+) = \$$window$\.height;\nvar .+ = $\(\1 - 100$ \/ 2\) \+ •px•;\nvar .+ = $\(\2 - 100$ \/ 2\) \+ •px•; *$

Animate $(this) so it flies to the horizontal center, then to the vertical center. The offsets are stored in the variables hOffset and vOffset. Use chaining