A Smarter Way to Learn jQuery

Fill in the blank to select the next element.

$("p#features")._______

next()

^ *next *$

Fill in the blank to select the next element.

$(this)________

.next()

^ *\.next *$

Select the next element after a button whose id is "show".

$("button#show").next()

^ *\$$•button#show•$\.next *$

Select the next element after $(this).

$(this).next()

^ *\$$this$\.next *$

5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to fade in the element after the image.

$("img#thumbnail_1").next().fadeIn(2000);

Bold the element after $(this).

$(this).next().css("font-weight", "bold");

$`(`this`)`.`next`(`)`.`css`(`"`font`-`weight`"`comma`1space"`bold`"`)`;

Add the class "big" to the element after the first div.

$("div:first").next().addClass("big");

Remove the element after $(this).

$(this).next().remove();

^ *\$$this$\.next\.remove; *$

Toggle the class of an element after a particular paragraph. Make up the class name and the id of the paragraph.

$("p#loris").next().toggleClass("light");

^ *\$$•p#.+•$\.next\.toggleClass$•.+•$; *$

The element after $(this) is a form field. Read its contents and assign the contents to a variable. Make up the variable name.

var input_contents = $(this).next().val();

^ *var .+ = \$$this$\.next\.val; *$

When a button is clicked, select the next element and assign it to a variable that hasn't yet been declared. Make up the id of the button and the variable name.

$("button#choice_1").on("click", function() {
var selected_element = $(this).next();
});

^ *\$$•button#.+•$\.on$•click•, function\($ {\n *var .+ = \$$this$\.next;\n}\); *$

When a particular image is moused over, insert text into the next element. Make up the id of the image and the text.

$("img#loris").on("mouseover", function() {
$(this).next().text("Yes, it's a loris.");
});

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