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
Select text boxes. | $("input:text") | ^ *\$\(•input:text•\) *$ | |
Select textareas. | $("textarea") | ^ *\$\(•textarea•\) *$ | |
Select text boxes and textareas. | $("input:text, textarea") | ^ *\$\(•input:text, textarea•\) *$ | |
Select text boxes in a form whose id is "contact". | $("form#contact input:text") | ^ *\$\(•form#contact input:text•\) *$ | |
5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to code the first line of a function that's triggered when the user clicks in a text box. | $("input:text").on("focus", function() { | ||
Select all text boxes. | $("input:text") | $`(`"`input`:`text`"`) | |
Select all textareas. | $("textarea") | ||
Select all tables, text boxes, and textareas. | $("table, input:text, textarea") | ^ *\$\(•table, input:text, textarea•\) *$ | |
Select text boxes whose class is "key". | $("input:text.key") | ^ *\$\(•input:text\.key•\) *$ | |
Select all text boxes in a particular div. Make up the id of the div. | $("div#order input:text") | ^ *\$\(•div#.+ input:text•\) *$ | |
Select all textareas and insert a value in them. Make up the value. | $("textarea").val("I am 21 or older."); | ^ *\$\(•textarea•\)\.val\(•.+•\); *$ | |
When the user clicks in a text box or textarea, color its background yellow. | $("input:text, textarea").on("focus", function() { $(this).css("background-color", "yellow"); }); | ^ *\$\(•input:text, textarea•\)\.on\(•focus•, function\(\) {\n *\$\(this\)\.css\(•background-color•, •yellow•\);\n}\); *$ | |
Select all textareas. | $("textarea") | ^ *\$\(•textarea•\) *$ | |
Select all tables, text boxes, and textareas. | $("table, input:text, textarea") | ^ *\$\(•table, input:text, textarea•\) *$ | |
Select text boxes whose class is "key". | $("input:text.key") | ^ *\$\(•input:text\.key•\) *$ | |
Select all text boxes in a particular div. Make up the id of the div. | $("div#order input:text") | ^ *\$\(•div#.+ input:text•\) *$ | |
Select all textareas and insert a value in them. Make up the value. | $("textarea").val("I am 21 or older."); | ^ *\$\(•textarea•\)\.val\(•.+•\); *$ | |
When the user clicks out of a text box or textarea, color its background white. | $("input:text, textarea").on("blur", function() { $(this).css("background-color", "white"); }); | ^ *\$\(•input:text, textarea•\)\.on\(•focus•, function\(\) {\n *\$\(this\)\.css\(•background-color•, •yellow•\);\n}\); *$ | |
http://jsfiddle.net/ASmarterWayToLearn/qkgwdh1b/ | |||
http://jsfiddle.net/ASmarterWayToLearn/qo28f2jr/ |