Download OpenJS Foundation jQuery Practice Exam and more Exams Technology in PDF only on Docsity!
Question 1. Which jQuery method is used to execute a function when the DOM is fully loaded? A) $.ready() B) $(document).ready() C) $(window).load() D) $.onLoad() Answer: B Explanation: $(document).ready() fires as soon as the DOM is ready, before images and other resources finish loading. Question 2. How can you include jQuery in a page without using a CDN? A) <script src="https://code.jquery.com/jquery.min.js"></script> B) <script src="/js/jquery.js"></script> C) <link rel="stylesheet" href="jquery.css"> D) <script>import $ from 'jquery';</script> Answer: B Explanation: A local file reference such as /js/jquery.js loads jQuery from the server’s own file system. Question 3. What does the $ symbol represent in jQuery? A) The global window object B) An alias for jQuery function C) A CSS selector for IDs D) A method to create animations Answer: B Explanation: $ is a shorthand alias for the jQuery function, allowing concise calls like $(selector).
Question 4. Which method puts jQuery into no‑conflict mode? A) $.noConflict() B) $.release() C) $.disable() D) $.unload() Answer: A Explanation: $.noConflict() releases the $ identifier so other libraries can use it without interference. Question 5. When should you use the minified version of jQuery in production? A) When debugging code B) To reduce file size and improve load time C) To enable source‑map debugging D) Only for older browsers Answer: B Explanation: The minified file removes whitespace and shortens variable names, decreasing download size for production environments. Question 6. Which selector targets all <p> elements that are direct children of a <div>? A) $("div p") B) $("div > p") C) $("div + p") D) $("div ~ p") Answer: B Explanation: The child selector (>) selects only <p> elements that are immediate children of <div>.
Question 10. Which filter selects only form controls that are currently checked? A) :selected B) :enabled C) :checked D) :focus Answer: C Explanation: :checked matches checkboxes, radio buttons, and options that are currently selected. Question 11. Which method retrieves the HTML content of the first matched element? A) .text() B) .val() C) .html() D) .data() Answer: C Explanation: .html() gets (or sets) the inner HTML of the selected element(s). Question 12. How can you change the text of all <h1> elements to “Hello”? A) $("h1").html("Hello") B) $("h1").text("Hello") C) $("h1").val("Hello") D) $("h1").attr("text","Hello") Answer: B Explanation: .text() sets plain text content, while .html() would treat the string as HTML. Question 13. Which method inserts new content after each element in the set of matched elements?
A) .append() B) .prepend() C) .after() D) .before() Answer: C Explanation: .after() adds the specified content immediately after each matched element. Question 14. How would you wrap every <li> element with a <div class="wrapper">? A) $("li").wrap("<div class='wrapper'></div>") B) $("li").wrapAll("<div class='wrapper'></div>") C) $("li").wrapInner("<div class='wrapper'></div>") D) $("li").append("<div class='wrapper'></div>") Answer: A Explanation: .wrap() surrounds each selected element individually with the provided markup. Question 15. Which method completely removes an element and all its associated data and events? A) .remove() B) .empty() C) .detach() D) .clear() Answer: A Explanation: .remove() deletes the element from the DOM and also clears jQuery‑stored data and event handlers. Question 16. What is the difference between .remove() and .detach()? A) .remove() keeps data, .detach() does not
C) $("elem").class("selected") returns true/false D) $("elem").containsClass("selected") Answer: A Explanation: .hasClass() returns true if the element’s class list includes the given class. Question 20. Which syntax correctly sets multiple CSS properties on a <p> element? A) $("p").css("color","red","font-size","12px") B) $("p").css({color:"red",fontSize:"12px"}) C) $("p").style({color:"red",fontSize:"12px"}) D) $("p").attr("style","color:red;font-size:12px") Answer: B Explanation: Passing an object to .css() allows setting several properties at once. Question 21. How can you retrieve the computed width of an element including padding but excluding border? A) .width() B) .innerWidth() C) .outerWidth() D) .css("width") Answer: B Explanation: .innerWidth() returns the element’s width plus left and right padding. Question 22. Which method returns the element’s position relative to its offset parent? A) .offset() B) .position() C) .coordinates()
D) .location() Answer: B Explanation: .position() provides top/left coordinates relative to the nearest positioned ancestor. Question 23. How do you attach a click handler to all current and future <button> elements inside #container? A) $("#container button").on("click", handler) B) $("#container").on("click", "button", handler) C) $("button").click(handler) D) $(document).delegate("#container button", "click", handler) Answer: B Explanation: Event delegation via .on(event, selector, handler) binds the handler to the parent and catches events from matching descendants, including future ones. Question 24. Which shorthand method is equivalent to $(element).on("mouseenter", handler)? A) .hover(handler) B) .mouseover(handler) C) .mouseenter(handler) D) .focus(handler) Answer: C Explanation: .mouseenter() is a direct shortcut for binding the mouseenter event. Question 25. In an event handler, how can you prevent the default action of the event? A) event.stopPropagation() B) event.preventDefault()
D) .toggle() Answer: A Explanation: .slideUp() animates the element’s height to zero, giving a sliding‑up effect. Question 29. What does .fadeTo(400, 0.5) do? A) Fades the element out completely over 400 ms B) Fades the element to 50 % opacity over 400 ms C) Fades the element in to full opacity over 400 ms D) Instantly sets opacity to 0.5 without animation Answer: B Explanation: .fadeTo(duration, opacity) animates the element to the specified opacity value. Question 30. Which method queues a function to run after the current animation finishes? A) .delay() B) .queue() C) .dequeue() D) .stop() Answer: A Explanation: .delay(milliseconds) inserts a pause in the animation queue before subsequent actions. Question 31. How can you stop all queued animations on an element immediately? A) .finish() B) .clearQueue() C) .stop(true, true) D) .abort()
Answer: C Explanation: .stop(true, true) clears the queue and jumps to the end state of the current animation. Question 32. Which shorthand method performs a GET request and expects JSON data? A) $.post() B) $.getJSON() C) $.ajax() D) $.load() Answer: B Explanation: $.getJSON() sends a GET request and automatically parses the response as JSON. Question 33. How would you send form data using the POST method with jQuery? A) $.post("/submit", $("#myForm").serialize()) B) $.get("/submit", $("#myForm").serialize()) C) $.ajax({type:"GET", data: $("#myForm").serialize()}) D) $("#myForm").send() Answer: A Explanation: $.post() sends data via POST; serialize() converts form fields into a URL‑encoded string. Question 34. Which option in $.ajax() sets a timeout of 5 seconds? A) timeout: 5000 B) time: 5 C) delay: 5000 D) maxTime: 5 Answer: A
Explanation: .closest(selector) travels up the DOM tree and returns the first element that matches the selector. Question 38. How would you retrieve all direct child <li> elements of an ordered list? A) $("ol").children("li") B) $("ol li") C) $("ol").find("li") D) $("ol > li") Answer: A Explanation: .children() only returns immediate children; the selector li filters those children. Question 39. Which method returns the set of all sibling elements of the matched element? A) .siblings() B) .nextAll() C) .prevAll() D) .adjacent() Answer: A Explanation: .siblings() returns all elements that share the same parent, excluding the original element. Question 40. How can you filter a jQuery collection to keep only elements that are visible? A) .filter(":visible") B) .is(":visible") C) .visible() D) .show() Answer: A
Explanation: .filter(":visible") returns a new collection containing only elements that pass the :visible selector. Question 41. Which utility method iterates over an array and executes a callback for each element? A) $.each() B) $.map() C) $.loop() D) $.forEach() Answer: A Explanation: $.each(collection, function(index, value){ … }) works on both arrays and objects. Question 42. What does $.trim(" hello ") return? A) "hello" B) " hello " C) "hello " D) " hello" Answer: A Explanation: $.trim() removes leading and trailing whitespace from the string. Question 43. How can you merge the properties of two objects, with the second object overriding the first? A) $.extend(obj1, obj2) B) $.merge(obj1, obj2) C) $.combine(obj1, obj2) D) $.copy(obj1, obj2) Answer: A
Explanation: :first filters the collection to the first element that matched the original selector. Question 47. Which method retrieves the raw DOM element from a jQuery object? A) .get(0) B) .element() C) .node() D) .raw() Answer: A Explanation: .get(index) returns the underlying DOM element at the specified position; .get(0) is the first element. Question 48. How can you animate the left CSS property of a <div> to 200px over 1 second? A) $("div").animate({left:"200px"}, 1000) B) $("div").css({left:"200px"}, 1000) C) $("div").move({left:200}, 1000) D) $("div").transition({left:"200px"}, 1000) Answer: A Explanation: .animate() changes numeric CSS properties over a duration. Question 49. Which method returns true if at least one element in the collection matches the selector? A) .is() B) .has() C) .contains() D) .match() Answer: A
Explanation: .is(selector) tests the current set against the selector and returns a boolean. Question 50. What does the :empty selector match? A) Elements with no child elements or text nodes B) Elements with no attributes C) Elements that are hidden D) Elements that have no CSS classes Answer: A Explanation: :empty selects elements that contain no child nodes, including text. Question 51. Which method can be used to execute code after all AJAX requests have completed? A) $(document).ajaxStop() B) $(document).ajaxComplete() C) $(document).ajaxSuccess() D) $(document).ajaxError() Answer: A Explanation: ajaxStop fires when the last active AJAX request finishes. Question 52. How would you retrieve the JSON response from an AJAX call using the success callback? A) success: function(data){ console.log(data); } B) complete: function(data){ console.log(data); } C) error: function(data){ console.log(data); } D) beforeSend: function(data){ console.log(data); } Answer: A Explanation: The success callback receives the parsed response data as its first argument.
Explanation: .empty() clears the element’s contents without removing the element from the DOM. Question 56. What does $(this).closest('form') return inside a click handler attached to a button inside a form? A) The button itself B) The nearest ancestor <form> element C) All sibling forms D) The document object Answer: B Explanation: .closest('form') walks up the DOM tree from the current element until it finds a <form>. Question 57. Which method can be used to serialize a form into a URL‑encoded query string? A) .serialize() B) .toQueryString() C) .encode() D) .param() Answer: A Explanation: .serialize() returns a string like name=John&age=30 suitable for GET or POST requests. Question 58. How would you delay the execution of a function by 2 seconds after a click event? A) setTimeout(handler, 2000) inside the click handler B) $("button").delay(2000).click(handler) C) $("button").on("click", handler).delay(2000)
D) $("button").click(handler).delay(2000) Answer: A Explanation: setTimeout is the standard JavaScript way; .delay() only works in the animation queue, not for arbitrary functions. Question 59. Which method returns the number of elements in a jQuery collection? A) .size() (deprecated) B) .length property C) .count() D) .total() Answer: B Explanation: The .length property gives the count; .size() existed but is deprecated. Question 60. How can you ensure that a piece of code runs after the DOM is ready and after all images have loaded? A) $(document).ready(handler) B) $(window).load(handler) C) $(document).on("load", handler) D) $(window).on("ready", handler) Answer: B Explanation: The load event on window fires after the entire page, including images, has finished loading. Question 61. Which selector matches an element that has both class="a" and class="b"? A) .a.b B) .a, .b C) .a + .b
