A Smarter Way to Learn jQuery

Select all paragraphs that are the first paragraph of a parent.

$("p:first-of-type")

^ *\$$•p:first-of-type•$ *$

Select all h4 headings that are the last h4 headings of a parent.

$("h4:last-of-type")

^ *\$$•h4:last-of-type•$ *$

Select all divs that are the first div of a parent and all images that are the last image of a parent.

$("div:first-of-type, img:last-of-type")

^ *\$$•div:first-of-type, img:last-of-type•$ *$

Select all paragraphs that are the first child of a parent and all paragraphs that are the last paragraph of a parent.

$("p:first-child, p:last-of-type")

^ *\$$•p:first-child, p:last-of-type•$ *$

5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to move onto the screen the elements that are selected by $("div:first-child") in the following markup:

Toggle the class "visible" for all paragraphs that are the last paragraph of a parent.

$("p:last-of-type").toggleClass("visible");

$`(`"`p`:`last`-`of`-`type`"`)`.`toggle`Class`(`"`visible`"`)`;

Remove all images that are the first child of a parent.

$("img:first-child").remove();

Hide all divs that are the last div of a parent.

$("div:last-of-type").hide();

^ *\$$•div:last-of-type•$\.hide; *$

Add a new list item to the end of all unordered lists that are the first unordered list of a parent. Make up the text for the list item.

$("ul:first-of-type").append("<li>etc.</li>");

^ *\$$•ul:first-of-type•$\.append$•GeorgeStumpliLarryWells.+JudyOwens\/liDennisLeadbetter•$; *$

Fade in all images that are the first image of a parent plus all images of a certain class. Make up the class name. Don't specify a speed.

$("img:first-of-type, img.extra").fadeIn();

^ *\$$•img:first-of-type, img\..+•$\.fadeIn; *$

Assign a class to all paragraphs that are the last paragraph of a parent. Use addClass(). Make up the class name.

$("p:last-of-type").addClass("visible");

^ *\$$•p:last-of-type•$\.addClass$•.+•$; *$

Set the font-size to 1.5 ems of paragraphs inside divs that are the first div of a parent.

$("div:first-of-type p").css("font-size", "1.5em");

^ *\$$•div:first-of-type p•$\.css$•font-size•, •1\.5em•$; *$