A Smarter Way to Learn jQuery

Hide all images that are displayed and display all images that are hidden.

$("img").toggle();

^ *\$$•img•$\.toggle; *$

Toggle all images and a paragraph whose ID is "cat".

$("img, p#cat").toggle();

^ *\$$•img, p#cat•$\.toggle; *$

A class of elements--images, paragraphs, divs, etc.--has been hidden. Display it. Don't use toggle(). Specify an element of your choice. Make up the class name.

$("h2.special").show();

^ *\$$•.+\..+•$\.show; *$

Toggle a particular paragraph in 3 seconds. Make up the ID.

$("p#special").toggle(3000);

^ *\$$•p#.+•$\.toggle$3000$; *$

5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to underline an h3 heading.

$("h3#important").css("text-decoration", "underline");

Change the color of all paragraphs whose class is "fade" to #d3d3d3.

$("p.fade").css("color", "#d3d3d3");

$`(`"`p`.`fade`"`)`.`css`(`"`color`"`comma`1space"`#d3d3d3`"`)`;

Change the width of a div whose ID is "flex" to 45%.

$("div#flex").css("width", "45%");

Without using chaining, write the complete 4-line block of code that selects all divs and makes two changes to CSS styles. The font-size changes to 2em and the color changes to black.

$("div").css({
"font-size": "2em",
"color": "black"
});

^ *\$$•div•$\.css${\n *•font-size•: •2em•,\n *•color•: •black•\n *}$; *$

When the user double clicks any h2 heading, all h2 headings turn red.

$("h2").on("dblclick", function() {
$("h2").css("color", "red");
});

^ *\$$•h2•$\.on$•dblclick•, function\($ {\n *\$$•h2•$\.css$•color•, •red•$;\n *}\); *$

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; *$

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 *}\); *$

Toggle images whose class is "group1" and images whose class is "group2".

$("img.group1, img.group2").toggle();

^ *\$$•img\.group1, img\.group2•$\.toggle; *$

Select divs and paragraphs of the same class. Make up the class name.

$("div.main, p.main")

^ *\$$•div\.(.+), p\.\1•$ *$

When either of two paragraphs is clicked, all images slide into view. Make up the two IDs.

$("p#first, p#second").on("click", function() {
$("img").slideDown();
});

^ *\$$•p#.+, p#.+•$\.on$•click•, function\($ {\n *\$$•img•$\.slideDown;\n *}\); *$

When either of two paragraphs is clicked, the one that's been clicked is hidden. Make up the two IDs. Use hide()and this.

$("p#first, p#second").on("click", function() {
$(this).hide();
});

^ *\$$•p#.+, p#.+•$\.on$•click•, function\($ {\n *\$$this$\.hide;\n *}\); *$

Replace the ID of a paragraph. Make up both the original and the new ID.

$("p#paragraph2").attr("id", "paragraph1");

^ *\$$•p#.+•$\.attr$•id•, •.+•$; *$

Replace any classes already assigned to all h3 headings and paragraphs with a new class. Use the short form for selecting multiple elements. Make up the new class name.

$("h3, p").attr("class", "prominent");

^ *\$$•h3, p•$\.attr$•class•, •.+•$; *$

http://jsfiddle.net/ASmarterWayToLearn/jserok49/

http://jsfiddle.net/ASmarterWayToLearn/c8jqt7jh/

A Smarter Way to Learn jQuery / Chapter 27 Exercises

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

Comments? Email me.

Hide all images that are displayed and display all images that are hidden.		$("img").toggle();	^ \$\(•img•\)\.toggle\(\); $
Toggle all images and a paragraph whose ID is "cat".		$("img, p#cat").toggle();	^ \$\(•img, p#cat•\)\.toggle\(\); $
A class of elements--images, paragraphs, divs, etc.--has been hidden. Display it. Don't use toggle(). Specify an element of your choice. Make up the class name.		$("h2.special").show();	^ \$\(•.+\..+•\)\.show\(\); $
Toggle a particular paragraph in 3 seconds. Make up the ID.		$("p#special").toggle(3000);	^ \$\(•p#.+•\)\.toggle\(3000\); $
5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to underline an h3 heading.		$("h3#important").css("text-decoration", "underline");
Change the color of all paragraphs whose class is "fade" to #d3d3d3.		$("p.fade").css("color", "#d3d3d3");	$`(`"`p`.`fade`"`)`.`css`(`"`color`"`comma`1space"`#d3d3d3`"`)`;
Change the width of a div whose ID is "flex" to 45%.		$("div#flex").css("width", "45%");
Without using chaining, write the complete 4-line block of code that selects all divs and makes two changes to CSS styles. The font-size changes to 2em and the color changes to black.		$("div").css({ "font-size": "2em", "color": "black" });	^ \$\(•div•\)\.css\({\n •font-size•: •2em•,\n •color•: •black•\n }\); *$
When the user double clicks any h2 heading, all h2 headings turn red.		$("h2").on("dblclick", function() { $("h2").css("color", "red"); });	^ \$\(•h2•\)\.on\(•dblclick•, function\(\) {\n \$\(•h2•\)\.css\(•color•, •red•\);\n }\); $
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\(\); $
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 }\); $
Toggle images whose class is "group1" and images whose class is "group2".		$("img.group1, img.group2").toggle();	^ \$\(•img\.group1, img\.group2•\)\.toggle\(\); $
Select divs and paragraphs of the same class. Make up the class name.		$("div.main, p.main")	^ \$\(•div\.(.+), p\.\1•\) $
When either of two paragraphs is clicked, all images slide into view. Make up the two IDs.		$("p#first, p#second").on("click", function() { $("img").slideDown(); });	^ \$\(•p#.+, p#.+•\)\.on\(•click•, function\(\) {\n \$\(•img•\)\.slideDown\(\);\n }\); $
When either of two paragraphs is clicked, the one that's been clicked is hidden. Make up the two IDs. Use hide()and this.		$("p#first, p#second").on("click", function() { $(this).hide(); });	^ \$\(•p#.+, p#.+•\)\.on\(•click•, function\(\) {\n \$\(this\)\.hide\(\);\n }\); $
Replace the ID of a paragraph. Make up both the original and the new ID.		$("p#paragraph2").attr("id", "paragraph1");	^ \$\(•p#.+•\)\.attr\(•id•, •.+•\); $
Replace any classes already assigned to all h3 headings and paragraphs with a new class. Use the short form for selecting multiple elements. Make up the new class name.		$("h3, p").attr("class", "prominent");	^ \$\(•h3, p•\)\.attr\(•class•, •.+•\); $
http://jsfiddle.net/ASmarterWayToLearn/jserok49/
http://jsfiddle.net/ASmarterWayToLearn/c8jqt7jh/