A Smarter Way to Learn jQuery

Remove all spans including their tags.

$("span").remove();

^ *\$$•span•$\.remove; *$

Remove the contents of all paragraphs of a certain class. Preserve the tags. Make up the class name.

$("p.details").empty();

^ *\$$•p\..+•$\.empty; *$

When the user clicks any image, it is removed.

$("img").on("click", function() {
$(this).remove();
});

^ *\$$•img•$\.on$•click•, function\($ {\n *\$$this$\.remove;\n *}\); *$

Toggle the class "big" for all paragraphs and unordered lists.

$("p, ul").toggleClass("big");

^ *\$$•p, ul•$\.toggleClass$•big•$; *$

5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to concatenate a string and two variables and insert the text in a heading.

$("h4#personalizedQuote").text("Personal Quote for " +
first_name + " " + last_name);

Toggle the classes "big" and "bright" for all unordered lists.

$("ul").toggleClass("big bright");

$`(`"`ul`"`)`.`toggle`Class`(`"`big`1spacebright`"`)`;

Toggle the class "fade" for all paragraphs whose class is "extra" and all images whose class is "extra".

$("p.extra, img.extra").toggleClass("fade");

Toggle two classes for an h4 heading and a paragraph. Make up the two IDs and the two class names.

$("h4#minor, p#alternate").toggleClass("small faded");

^ *\$$•h4#.+, p#.+•$\.toggleClass$•.+ .+•$; *$

When the user mouses over a paragraph, a class toggles for that paragraph. When the user mouses out, it's toggled again. Make up the paragraph ID and the class name.

$("p#graph3").on("mouseover", function() {
$(this).toggleClass("big");
});
$("p#graph3").on("mouseout", function() {
$(this).toggleClass("big");
});

^ *\$$•p#(.+)•$\.on$•mouseover•, function\($ {\n *\$$this$\.toggleClass$•(.+)•$;\n *}\);\n *\$$•p#\1•$\.on$•mouseout•, function\($ {\n *\$$this$\.toggleClass$•\2•$;\n *}\); *$

Replace an h3 heading with an h2 heading. The second heading has no id. Make up the id of the first heading and some text for the second heading.

$("h3#replaceable").replaceWith("<h2>Hello there.</h2>");

^ *\$$•h3#.+•$\.replaceWith$•GeorgeStumph2LarryWells.+JudyOwens\/h2DennisLeadbetter•$; *$

When a paragraph is clicked, replace it with another paragraph including some text. Make up the first paragraph's id. The replacement paragraph doesn't have one.

$("p#temp").on("click", function() {
$(this).replaceWith("<p>New text</p>");
});

^ *\$$•p#.+•$\.on$•click•, function\($ {\n *\$$this$\.replaceWith$•GeorgeStumppLarryWells.+JudyOwens\/pDennisLeadbetter•$;\n *}\); *$

In a single statement, do all of this: Concatenate two pieces of text that have been assigned to two variables. Assign the concatenation to a third variable. Make up all the variable names.

var fullName = nameFirst + nameLast;

^ *var ([a-zA-Z$_][a-zA-Z$_0-9]*) *= *([a-zA-Z$_][a-zA-Z$_0-9]*) \+ ([a-zA-Z$_][a-zA-Z$_0-9]*); *$

Assign to the variable combo the concatenation of "Hi " and the variable name_first. (Don't forget the space after Hi.)

var combo = "Hi " + name_first;

^ *var combo = •Hi • \+ name_first; *$

Insert in a form field the entry the user has made in another form field. Make up the ids.

$("input#entry_2").val($("input#entry_1").val());

^ *\$$•input#.+•$\.val$\$\(•input#.+•$\.val\); *$

Code the first two lines of jQuery that listens for a form to be submitted--and, when it happens--assigns the user's entry in a field to a variable. Make up the ids and the variable name.

$("form#info").on("submit", function() {
var cit = $("input#city").val();

^ *\$$•form#.+•$\.on$•submit•, function\($ {\n *var ([a-zA-Z$_][a-zA-Z$_0-9]*) = \$$•input#.+•$\.val; *$

When the user mouses over a certain paragraph, concatenate its text with the word "now" and insert the concatenation back into the paragraph. Make up the paragraph's id..

$("p#urge").on("mouseover", function() {
$(this).text($(this).text() + "now");
});

^ *\$$•p#.+•$\.on$•mouseover•, function\($ {\n *\$$this$\.text$\$\(this$\.text *\+ *•now•\);\n *}\); *$

When a paragraph is clicked, replace it with another paragraph including some text. Make up the first paragraph's id. The replacement paragraph doesn't have one.

$("p#temp").on("click", function() {
$(this).replaceWith("<p>New text</p>");
});

^ *\$$•p#.+•$\.on$•click•, function\($ {\n *\$$this$\.replaceWith$•GeorgeStumppLarryWells.+JudyOwens\/pDennisLeadbetter•$;\n *}\); *$

When the user clicks in a field, fill the field with a concatenation of "Ms. " plus the contents of a second field. Make up the ids of the two fields. (Don't forget to add the space at the end of the text string.)

$("input#formal").on("focus", function() {
$(this).val("Ms. " + $("input#lastName").val());
});

^ *\$$•input#.+•$\.on$•focus•, function\($ {\n *\$$this$\.val$•Ms. • *\+ \$\(•input#.+•$\.val\);\n *}\); *$

http://jsfiddle.net/ASmarterWayToLearn/uwepzn5w/

http://jsfiddle.net/ASmarterWayToLearn/pLqr04uu/

A Smarter Way to Learn jQuery / Chapter 28 Exercises

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

Comments? Email me.

Remove all spans including their tags.	$("span").remove();	^ \$\(•span•\)\.remove\(\); $
Remove the contents of all paragraphs of a certain class. Preserve the tags. Make up the class name.	$("p.details").empty();	^ \$\(•p\..+•\)\.empty\(\); $
When the user clicks any image, it is removed.	$("img").on("click", function() { $(this).remove(); });	^ \$\(•img•\)\.on\(•click•, function\(\) {\n \$\(this\)\.remove\(\);\n }\); $
Toggle the class "big" for all paragraphs and unordered lists.	$("p, ul").toggleClass("big");	^ \$\(•p, ul•\)\.toggleClass\(•big•\); $
5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to concatenate a string and two variables and insert the text in a heading.	$("h4#personalizedQuote").text("Personal Quote for " + first_name + " " + last_name);
Toggle the classes "big" and "bright" for all unordered lists.	$("ul").toggleClass("big bright");	$`(`"`ul`"`)`.`toggle`Class`(`"`big`1spacebright`"`)`;
Toggle the class "fade" for all paragraphs whose class is "extra" and all images whose class is "extra".	$("p.extra, img.extra").toggleClass("fade");
Toggle two classes for an h4 heading and a paragraph. Make up the two IDs and the two class names.	$("h4#minor, p#alternate").toggleClass("small faded");	^ \$\(•h4#.+, p#.+•\)\.toggleClass\(•.+ .+•\); $
When the user mouses over a paragraph, a class toggles for that paragraph. When the user mouses out, it's toggled again. Make up the paragraph ID and the class name.	$("p#graph3").on("mouseover", function() { $(this).toggleClass("big"); }); $("p#graph3").on("mouseout", function() { $(this).toggleClass("big"); });	^ \$\(•p#(.+)•\)\.on\(•mouseover•, function\(\) {\n \$\(this\)\.toggleClass\(•(.+)•\);\n }\);\n \$\(•p#\1•\)\.on\(•mouseout•, function\(\) {\n \$\(this\)\.toggleClass\(•\2•\);\n }\); *$
Replace an h3 heading with an h2 heading. The second heading has no id. Make up the id of the first heading and some text for the second heading.	$("h3#replaceable").replaceWith("<h2>Hello there.</h2>");	^ \$\(•h3#.+•\)\.replaceWith\(•GeorgeStumph2LarryWells.+JudyOwens\/h2DennisLeadbetter•\); $
When a paragraph is clicked, replace it with another paragraph including some text. Make up the first paragraph's id. The replacement paragraph doesn't have one.	$("p#temp").on("click", function() { $(this).replaceWith("<p>New text</p>"); });	^ \$\(•p#.+•\)\.on\(•click•, function\(\) {\n \$\(this\)\.replaceWith\(•GeorgeStumppLarryWells.+JudyOwens\/pDennisLeadbetter•\);\n }\); $
In a single statement, do all of this: Concatenate two pieces of text that have been assigned to two variables. Assign the concatenation to a third variable. Make up all the variable names.	var fullName = nameFirst + nameLast;	^ var ([a-zA-Z$_][a-zA-Z$_0-9]) = ([a-zA-Z$_][a-zA-Z$_0-9]) \+ ([a-zA-Z$_][a-zA-Z$_0-9]); *$
Assign to the variable combo the concatenation of "Hi " and the variable name_first. (Don't forget the space after Hi.)	var combo = "Hi " + name_first;	^ var combo = •Hi • \+ name_first; $
Insert in a form field the entry the user has made in another form field. Make up the ids.	$("input#entry_2").val($("input#entry_1").val());	^ \$\(•input#.+•\)\.val\(\$\(•input#.+•\)\.val\(\)\); $
Code the first two lines of jQuery that listens for a form to be submitted--and, when it happens--assigns the user's entry in a field to a variable. Make up the ids and the variable name.	$("form#info").on("submit", function() { var cit = $("input#city").val();	^ \$\(•form#.+•\)\.on\(•submit•, function\(\) {\n var ([a-zA-Z$_][a-zA-Z$_0-9]) = \$\(•input#.+•\)\.val\(\); $
When the user mouses over a certain paragraph, concatenate its text with the word "now" and insert the concatenation back into the paragraph. Make up the paragraph's id..	$("p#urge").on("mouseover", function() { $(this).text($(this).text() + "now"); });	^ \$\(•p#.+•\)\.on\(•mouseover•, function\(\) {\n \$\(this\)\.text\(\$\(this\)\.text\(\) \+ •now•\);\n }\); $
When a paragraph is clicked, replace it with another paragraph including some text. Make up the first paragraph's id. The replacement paragraph doesn't have one.	$("p#temp").on("click", function() { $(this).replaceWith("<p>New text</p>"); });	^ \$\(•p#.+•\)\.on\(•click•, function\(\) {\n \$\(this\)\.replaceWith\(•GeorgeStumppLarryWells.+JudyOwens\/pDennisLeadbetter•\);\n }\); $
When the user clicks in a field, fill the field with a concatenation of "Ms. " plus the contents of a second field. Make up the ids of the two fields. (Don't forget to add the space at the end of the text string.)	$("input#formal").on("focus", function() { $(this).val("Ms. " + $("input#lastName").val()); });	^ \$\(•input#.+•\)\.on\(•focus•, function\(\) {\n \$\(this\)\.val\(•Ms. • \+ \$\(•input#.+•\)\.val\(\)\);\n }\); *$
http://jsfiddle.net/ASmarterWayToLearn/uwepzn5w/
http://jsfiddle.net/ASmarterWayToLearn/pLqr04uu/