A Smarter Way to Learn jQuery

In the following code, what does $(this) refer to? (Type 8 characters to answer.)

$("p#x").on("click").function() {
$(this).hide();
});

$("p#x")

^ *\$$•p#x•$ *$

In the following code, type the two incorrect characters.

$("p#x").on("click").function() {
$("this").hide();
});

The incorrect characters are the quotation marks enclosing this.

^ *•• *$

In the following code, fill in the blank to show() the paragraph without repeating the selector $("p#x").

$("p#x").on("click").function() {
___________
});

$(this).show();

^ *\$$this$\.show; *$

Fill in the blank to color the background yellow using the keyword $this.

$("input#city").on("focus",
function() {
___________________;
});

$(this).css("background-color", "yellow");

^ *\$$this$\.css$•background-color•, •yellow•$; *$

5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to slide the image out of view when it's clicked.

$("img#dog").on("click", function() {
$(this).slideUp();
});

Hide $(this).

$(this).hide();

$`(`this`)`.`hide`(`)`;

Fill in the blank to insert "India" in the form field when the user clicks in it. Use the keyword this.
$("input#country").on("focus", function() {
______________
});

$(this).val("India");

In the code below, rewrite the second line so the selector $("p#third") isn't repeated.

$("p#third").on("click",
function() {
var text3 = $("p#third").text();
});

var text3 = $(this).text();

^ *var text3 = \$$this$\.text; *$

The first line listens for the user to click a particular element. Code the next line--the line that fades the element out.

$(this).fadeOut();

^ *\$$this$\.fadeOut; *$

The first line listens for the user to click any image. Code the next line--the line that hides the image that is clicked.

$(this).hide();

^ *\$$this$\.hide; *$

Code three lines using the keyword this. When the user clicks any paragraph, the paragraph is sized 2.5em.

$("p").on("click", function() {
$(this).css("font-size", "2.5em");
});

^ *\$$•p•$\.on$•click•, function\($ {\n *\$$this$\.css$•font-size•, •2\.5em•$;\n *}\); *$

Code three lines using the keyword this. When the user clicks a particular image, the image gets a 1px solid black border. Make up the ID of the image.

$("img#cat").on("click", function() {
$(this).css("border", "1px solid black");
});

^ *\$$•img#.+•$\.on$•click•, function\($ {\n *\$$this$\.css$•border•, •1px solid black•$;\n *}\); *$

Fill in the blank to insert "India" in the form field when the user clicks in it. Use the keyword this.

$("input#country").on("focus",
function() {
______________
});

$(this).val("India");

^ *\$$this$\.val$•India•$; *$

In the code below, rewrite the second line so the selector $("p#third") isn't repeated.

$("p#third").on("click", function() {
var text3 = $("p#third").text();
});

var text3 = $(this).text();

^ *var text3 = \$$this$\.text; *$

The first line listens for the user to click a particular element. Code the next line--the line that fades the element out.

$(this).fadeOut();

^ *\$$this$\.fadeOut; *$

The first line listens for the user to click any image. Code the next line--the line that hides the image that is clicked.

$(this).hide();

^ *\$$this$\.hide; *$

Code three lines using the keyword this. When the user clicks any paragraph, the paragraph is sized 2.5em.

$("p").on("click", function() {
$(this).css("font-size", "2.5em");
});

^ *\$$•p•$\.on$•click•, function\($ {\n *\$$this$\.css$•font-size•, •2\.5em•$;\n *}\); *$

Code three lines using the keyword this. When the user clicks a particular image, the image gets a 1px solid black border. Make up the ID of the image.

$("img#cat").on("click", function() {
$(this).css("border", "1px solid black");
});

^ *\$$•img#.+•$\.on$•click•, function\($ {\n *\$$this$\.css$•border•, •1px solid black•$;\n *}\); *$

http://jsfiddle.net/ASmarterWayToLearn/6au8c8k2/

http://jsfiddle.net/ASmarterWayToLearn/za9skbrh/

A Smarter Way to Learn jQuery / Chapter 14 Exercises

Congratulations. You've successfully completed all the exercises for this chapter.

Comments? Email me.