jQuery Core Fundamentals Quiz Quiz

Challenge your understanding of essential jQuery concepts including selectors, event handling, DOM manipulation, and effects. This quiz is designed to reinforce your knowledge of core jQuery syntax and typical usage scenarios in modern web development.

1. Identifying jQuery Selectors

   Which jQuery selector would best select all elements with the class 'highlight' on a page?

   1. $('highlight')
   2. $(highlight)
   3. $('.highlight')
   4. $('#highlight')

   Explanation: The correct answer is $('.highlight') because the dot syntax in jQuery selectors targets all elements with the specified class name. $('#highlight') uses a hash and would only select an element with the id 'highlight'. $('highlight') and $(highlight) do not refer to the correct syntax for either classes or ids and would fail to select the intended elements. Using the dot before the class name is essential in jQuery class selectors.

2. Understanding Event Binding

   If you want to execute a function when any button with the class 'submit-btn' is clicked, which jQuery method should you use?

   1. .hover()
   2. .click()
   3. .focus()
   4. .press()

   Explanation: .click() is the correct method for attaching a handler that responds to click events, such as when a user clicks a button. .press() is not a standard jQuery method and will not work. .hover() is used for mouseover events, and .focus() relates to input focus rather than clicks. Choosing .click() ensures your function runs whenever any 'submit-btn' is clicked.

3. Chaining jQuery Methods

   What does the expression $('#menu').slideDown().addClass('active') accomplish on a webpage?

   1. Selects all menu items instead of a single element
   2. Slides down the element with id 'menu' and adds the 'active' class to it
   3. Adds the 'active' class before sliding down the element
   4. Deletes the 'active' class after sliding down

   Explanation: The given expression first reveals the element by sliding it down, then immediately applies the 'active' class using method chaining. The second option is incorrect since the methods execute left to right; .addClass runs after the slide-down. No class is deleted, so the third option is wrong. Finally, $('#menu') selects a single element with the id 'menu', not all menu items, making the fourth option incorrect.

4. Manipulating HTML Content

   How would you replace the text inside a paragraph with id 'info' to become 'Update complete' using jQuery?

   1. $('#info').val('Update complete')
   2. $('.info').html('Update complete')
   3. $('#info').text('Update complete')
   4. $('info').replace('Update complete')

   Explanation: The correct jQuery method for changing the text content of an element is .text(). $('#info').text('Update complete') selects the paragraph by id and updates its content. .html() would also work but is typically used for HTML markup and does not match the selector in option two. .val() changes the value of form elements, while $('info').replace('...') is not a valid jQuery method or selector.

5. Iterating Over Multiple Elements

   If you wish to apply a background color to every list item within an unordered list using jQuery, which approach is most appropriate?

   1. $('#ul li').addClass('yellow-bg')
   2. $('ul li').each(function(){ $(this).css('background', 'yellow') })
   3. $('li,ul').setBackgroundColor('yellow')
   4. $('ul.li').css('background', 'yellow')

   Explanation: The first option uses .each() to iterate and apply a style to every list item inside unordered lists, which is correct. $('ul.li') incorrectly selects u003Culu003E elements with class 'li', not list items. $('#ul li') assumes an element with id 'ul', which may not exist and unnecessarily complicates selection. .setBackgroundColor is not a standard jQuery method. Only the first option properly selects and styles each relevant element.