The next several exercises are timed. If you type slowly or dislike time pressure, feel free to increase the allotted time.
Name and email required. Check any number of boxes.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19
0
0
0
| Combining more than one method with one selector is known as _______. | chaining | ^ *chaining *$ | |
| Type the character that separates each method in a chain. | . | ^ *\. *$ | |
| Fill in the blank to hide the paragraph, then slide it into view. | $("p#special")_______________________ | .hide().slideDown(); | ^ *\.hide\(\)\.slideDown\(\); *$ |
| Fill in the blank to remove a class and then add a class. Make up the class names. | $("img.iffy")________________________ | .removeClass("iffy").addClass("solid"); | ^ *\.removeClass\(•.+•\)\.addClass\(•.+•\); *$ |
| 5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to assign both a new id and a new class to the list. | $("ol#features").attr("id", "benefits").attr("class", "prominent"); | ||
| Selecting all images, add a class, "gone", and remove the images. | $("img").addClass("gone").remove(); | $`(`"`img`"`)`.`add`Class`(`"`gone`"`)`.`remove`(`)`; | |
| Selecting a div whose id is "main", change its color to black and its font-size to 1.5em. | $("div#main").css("color", "black").css("font-size", "1.5em"); | ||
| Selecting images of a certain class, hide them, then slide them into view. Make up the class name. | $("img.pets").hide().slideDown(); | ^ *\$\(•img\..+•\)\.hide\(\)\.slideDown\(\); *$ | |
| An element has been assigned to the variable graph. Toggle its class and bold it. Make up the class name. | graph.toggleClass("prominent").css("font-weight", "bold"); | ^ *graph\.toggleClass\(•.+•\)\.css\(•font-weight•, •bold•\); *$ | |
| Remove a class and add a class to all paragraphs and unordered lists using the more concise method. Make up the class names. | $("p, ul").removeClass("big").addClass("important"); | ^ *\$\(•p, ul•\)\.removeClass\(•.+•\)\.addClass\(•.+•\); *$ | |
| Change a form field's id and insert some text in it. Make up the two ids and text. | $("input#species").attr("id", "default").val("human"); | ^ *\$\(•input#.+•\)\.attr\(•id•, •.+•\)\.val\(•.+•\); *$ | |
| Toggle a paragraph's visibility and replace all of its classes with a new class. Make up the paragraph's id and the new class name. | $("p#iffy").toggle().attr("class", "temp"); | ^ *\$\(•p#.+•\)\.toggle\(\)\.attr\(•class•, •.+•\); *$ | |
| Selecting a div whose id is "main", change its color to black and its font-size to 1.5em. | $("div#main").css("color", "black").css("font-size", "1.5em"); | ^ *\$\(•div#main•\)\.css\(•color•, •black•\)\.css\(•font-size•, •1\.5em•\); *$ | |
| Selecting images of a certain class, hide them, then slide them into view. Make up the class name. | $("img.pets").hide().slideDown(); | ^ *\$\(•img\..+•\)\.hide\(\)\.slideDown\(\); *$ | |
| An element has been assigned to the variable graph. Toggle its class and bold it. Make up the class name. | graph.toggleClass("prominent").css("font-weight", "bold"); | ^ *graph\.toggleClass\(•.+•\)\.css\(•font-weight•, •bold•\); *$ | |
| Remove a class and add a class to all paragraphs and unordered lists. Make up the class names. | $("p, ul").removeClass("big").addClass("important"); | ^ *\$\(•p, ul•\)\.removeClass\(•.+•\)\.addClass\(•.+•\); *$ | |
| Change a form field's id and insert some text in it. Make up the two ids and text. | $("input#species").attr("id", "default").val("human"); | ^ *\$\(•input#.+•\)\.attr\(•id•, •.+•\)\.val\(•.+•\); *$ | |
| Toggle a paragraph's visibility and replace all of its classes with a new class using the more concise method. Make up the paragraph's id and the new class name. | $("p#iffy").toggle().attr("class", "temp"); | ^ *\$\(•p#.+•\)\.toggle\(\)\.attr\(•class•, •.+•\); *$ | |
| http://jsfiddle.net/ASmarterWayToLearn/0h9tbfrw/ | |||
| http://jsfiddle.net/ASmarterWayToLearn/681sa4sL/ |