A Smarter Way to Learn jQuery

Fill in the blank. The following code fragment _________ some HTML with some existing text.

okToBold.html("<p id='important'><strong>" + okToBold.text()

concatenates

^ *concatenates *$

Store a paragraph selector in a variable. Make up the variable name and the paragraph's id.

var para = $("p#important");

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

Store the text of a paragraph in a variable. Make up the variable name and the paragraph's id.

var content = $("p#important").text();

^ *var ([a-zA-Z$_][a-zA-Z$_0-9]*) = \$$•p#.+•$\.text; *$

Store a paragraph, including its tags, in a variable. Make up the variable name and the paragraph's id.

var para = $("p#important").html();

^ *var ([a-zA-Z$_][a-zA-Z$_0-9]*) = \$$•p#.+•$\.html; *$

5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to bold the existing text in a paragraph whose selector has been assigned to the variable okToBold.

okToBold.html("<p id='desc'><strong>" + okToBold.text() + "</strong></p>");

Assign the text of an h3 heading to a variable. The variable is content. The heading's id is "intro".

var content = $("h3#intro").text();

var`1spacecontent`1space=`1space$`(`"`h3`#`intro`"`)`.`text`(`)`;

Assign the contents of an unordered list, including all tags, to a variable. The variable is pList. The list's id is "pets".

var pList = $("ul#pets").html();

The user has clicked a paragraph. Code a statement that bolds the paragraph, using the longer, eight-character tag for bolding. Don't use css(). Recreate the paragraph and its text including tags. The newly formed paragraph won't have an id.

$(this).html("<p><strong>" + $(this).text() + "</strong></p>");

^ *\$$this$\.html$•GeorgeStumppLarryWellsJudyOwensstrongDennisLeadbetter• *\+ *\$\(this$\.text *\+ *•PeterKann\/strongMartinQuinnHowardSherman\/pJamieHindman•\); *$

The user has clicked a paragraph. Code a statement that converts it to an h4 heading with the same text.

$(this).html("<h4>" + $(this).text() + "</h4>");

^ *\$$this$\.html$•GeorgeStumph4LarryWells• *\+ *\$\(this$\.text *\+ *•JudyOwens\/h4DennisLeadbetter•\); *$

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

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

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

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

When the user mouses over a particular paragraph, replace its text with a concatenation of two text strings. Make up the paragraph's id and the two text strings.

$("p#changeable").on("mouseover", function() {
$(this).text("Hi " + "Ho");
});

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

Assign the contents of an unordered list, including all tags, to a variable. The variable is pList. The list's id is "pets".

var pList = $("ul#pets").html();

^ *var pList = \$$•ul#pets•$\.html; *$