A Smarter Way to Learn jQuery

Fill in the blank to assign the class to images if they don't have it and remove it if they have it.

$("img")__________("invisible");

.toggleClass

^ *\.toggleClass *$

Fill in the blank to assign the class "big" to paragraphs if they don't have it and remove the class if they have it.

$("p").toggleClass____________

("big");

^ *$•big•$; *$

The ID of the div is "products". Toggle the class "special".

$("div#products").toggleClass("special");

^ *\$$•div#products•$\.toggleClass$•special•$; *$

Toggle the class "big" for all paragraphs and unordered lists.

$("p, ul").toggleClass("big");

^ *\$$•p, ul•$\.toggleClass$•big•$; *$

5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to toggle the class "invisible" for an image whose ID is "temp".

$("img#temp").toggleClass("invisible");

Toggle the classes "big" and "bright" for all unordered lists.

$("ul").toggleClass("big bright");

$`(`"`ul`"`)`.`toggle`Class`(`"`big`1spacebright`"`)`;

Toggle the class "fade" for all paragraphs whose class is "extra" and all images whose class is "extra".

$("p.extra, img.extra").toggleClass("fade");

Toggle a class for a class of divs. Make up the class names.

$("div.changeable").toggleClass("invisible");

^ *\$$•div\..+•$\.toggleClass$•.+•$; *$

Toggle a class for all elements of a particular class. Make up the class names.

$(".minor").toggleClass("disappear");

^ *\$$•\..+•$\.toggleClass$•.+•$; *$

Toggle two classes for an h4 heading and a paragraph. Make up the two IDs and the two class names. Use the short form for selecting multiple elements.

$("h4#minor, p#alternate").toggleClass("small faded");

^ *\$$•h4#.+, p#.+•$\.toggleClass$•.+ .+•$; *$

Toggle two classes for two images. Make up the two IDs and the two class names. Use the short form for selecting multiple elements.

$("img#minor, img#alternate").toggleClass("small faded");

^ *\$$•img#.+, img#.+•$\.toggleClass$•.+ .+•$; *$

When the user mouses over a paragraph, a class toggles for that paragraph. When the user mouses out, it's toggled again. Make up the paragraph ID and the class name.

$("p#graph3").on("mouseover", function() {
$(this).toggleClass("big");
});
$("p#graph3").on("mouseout", function() {
$(this).toggleClass("big");
});

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

Toggle the class "fade" for all paragraphs whose class is "extra" and all images whose class is "extra". Use the short form for selecting multiple elements.