Test My jQuery Skills: Solutions

Test Your Skills: Solutions

1In addition to jQuery(), we can also use a shorter reference to the jQuery function. What is it?

• jQ 
• $ 
• $$ 
• j

Additional Notes

If you review the jQuery source (something you should always do), you will find that jQuery and $ can both be used interchangably. The former is most often used in situations when the $ can clash with existing code or libraries.

2True or False: the jQuery function accepts a CSS selector, which is used to query the DOM for the applicable elements.

•  True
•  False

Additional Notes

Remember, you are not limited to mere CSS selectors; you can also pass DOM nodes, and even create elements. For instance, the following code will create a div and append it to the body: $("

Hi there

").appendTo("body");

3Query the DOM for the div with an id of container and store a reference to it ("cache it") in a variable, called container.

var container = $("#container"); 

Additional Notes

Storing the results of a particular query in a variable is often referred to as "caching." This way, we keep from having to dive into the DOM pool over and over to retrieve the same set of elements.

4Query the DOM for the ul, and add a class of alternate.

$("ul").addClass("alternate"); 

Additional Notes

Technically, this code will add a class of alternate to all unordered lists in the DOM. If you need to be more specific, you can use an id, or a method like eq() or first() to fine-tune the results.

5Which of the following is not a valid jQuery method?

• addClass 
• next 
• prev 
• grandparents

Additional Notes

Don't take the "parent-child" relationship idea too far. grandparents or grandchildren do not exist! Instead, you'd use parents(), closest(), and find().

6True or False: We use $(document).ready(fn); to ensure that the DOM has fully loaded before proceeding.

•  True
•  False

Additional Notes

Alternatively, the same result can be achieved by passing an anonymous function to jQuery.

7Use jQuery's text method to update the 

 element. Change it to "Updated."

$("h1").text("Updated"); 

Additional Notes

Should you need to insert actual HTML, you'd instead use the html method.

8Which method will return the nearest element, moving up the DOM chain, that matches the provided selector?

• ancestors() 
• closest() 
• nearest() 
• children()

Additional Notes

closest will retrieve the first element that matches a provided selector. It begins at the current element, and works up through the DOM tree.

9The box (or div) below has a class of box. Listen for when this box is clicked. When it is, remove the box class. Hint: you will want to use jQuery'son() method.

$("div.box").on("click", function() { 

   $(this).removeClass("box");

}); 

Additional Notes

In addition to on(), jQuery also provides a handful of "shortcut" methods, such as click() and hover().

10Imagine that you've selected one list item, and now need to select all other list items on that same level. Which method should use to accomplish this?

Additional Notes

Additionally, a selector can be passed to the siblings method. This allows you to filter the matches.

11Select the fourth list item below, and use the css method to set its background color
to 'gray'.

$('li:nth-child(4)').css('background', 'gray'); 

Additional Notes

There were lots of ways to handle this question. In addition to the provided solution, you could also use the eq()method: $("li").eq(3).css("backgroundColor", "gray");. jQuery also allows you to use eq as a custom selectors: $("li:eq(3)");.

12True or False: jQuery is just JavaScript.

•  True
•  False

Additional Notes

Sometimes, it's easy to think of JavaScript and jQuery as entirely separate languages, but they aren't! At its core, jQuery is just JavaScript.