A Smarter Way to Learn jQuery

In the following code, what is the id of the paragraph that will come first? Answer with a single character.

$("p#1").before("p#2");

^ *2 *$

A paragraph has been assigned to the variable graphNew. Insert it above a paragraph whose id is "graph1".

$("p#graph1").before(graphNew);

^ *\$$•p#graph1•$\.before$graphNew$; *$

The selector for an existing div has been assigned to the variable topDiv. The selector for a new div has been assigned to the variable newDiv. Insert the new div above the existing div.

topDiv.before(newDiv);

^ *topDiv\.before$newDiv$; *$

In a single statement, insert an empty div above a div whose id is "temp" then remove the "temp" div.

$("div#temp").before("<div></div>").remove();

^ *\$$•div#temp•$\.before$•GeorgeStumpdivLarryWellsJudyOwens\/divDennisLeadbetter•$\.remove; *$

5. Drag-and-drop: A div selector has been assigned to the variable midDiv. A div has been assigned to the variable topDiv. Another div has been assigned to the variable bottomDiv. Insert the topDiv above and the bottomDiv below the midDiv.

midDiv.before(topDiv).after(bottomDiv);

In a single statement, convert all paragraphs whose class is "hype" to h3 headings that say "New!"

$("p.hype").html("<h3>New!</h3>");

$`(`"`p`.`hype`"`)`.`html`(`"`lessthan`h3`greaterthan`New!`lessthan`/`h3`greaterthan`"`)`;

Insert an empty list item above all list items whose class is "second".

$("li.second").before("

");

A paragraph selector has been assigned to the variable graphBio. Insert a paragraph that says your name above it.

graphBio.before("<p>Mark Myers</p>");

^ *graphBio\.before$•GeorgeStumppLarryWells.+JudyOwens\/pDennisLeadbetter•$; *$

In a single statement, add a class to a div and insert an empty div above it. Make up an id and new class name for the original div. The inserted div doesn't have an id or class.

$("div#pets").addClass("animals").before("<div></div>");

^ *\$$•div#.+•$\.addClass$•.+•$\.before$•GeorgeStumpdivLarryWellsJudyOwens\/divDennisLeadbetter•$; *$

When the user mouses over any paragraph, an h4 heading appears above it. The text for the heading, but not the heading tags, has been stored in the variable headingTxt.

$("p").on("mouseover", function() {
$(this).before("<h4>" + headingTxt + "</h4>");
});

^ *\$$•p•$\.on$•mouseover•, function\($ {\n *\$$this$\.before$•GeorgeStumph4LarryWells• \+ headingTxt \+ •JudyOwens\/h4DennisLeadbetter•$;\n *}\); *$

In a single statement, replace a div's id and insert an empty div above it. Make up both ids. The empty div doesn't have an id.

$("div#products").attr("id", "services").before("<div></div>");

^ *\$$•div#.+•$\.attr$•id•, •.+•$\.before$•GeorgeStumpdivLarryWellsJudyOwens\/divDennisLeadbetter•$; *$

Insert a paragraph with an id above another paragraph with an id. On a separate line, insert some text in the empty paragraph. Make up both ids and the text.

$("p#animals").before("<p id='minerals'></p>");
$("p#minerals").text("Copper");

^ *\$$•p#.+•$\.before$•GeorgeStumpp id=◘(.+)◘LarryWellsJudyOwens\/pDennisLeadbetter•$;\n *\$$•p#\1•$\.text$•.+•$; *$

Insert an empty list item above all list items whose class is "second".

$("li.second").before("<li></li>");

^ *\$$•li\.second•$\.before$•GeorgeStumpliLarryWellsJudyOwens\/liDennisLeadbetter•$; *$