14 Sep 100 jQuery MCQ (Multiple Choice Questions) with Answers

Posted at 21:32h in mcq by

 

1) What is jQuery?
  1. A JavaScript library
  2. A CSS framework
  3. A programming language
  4. A database
Show Answer
Answer: a
Explanation
jQuery is a fast, lightweight JavaScript library that simplifies HTML document traversal, event handling, animation and AJAX.

2) Who created jQuery?

  1. Google
  2. John Resig
  3. Microsoft
  4. Mozilla
Show Answer
Answer: b
Explanation
jQuery was created by John Resig and introduced publicly in 2006.

3) In which year was jQuery first released?

  1. 2004
  2. 2006
  3. 2008
  4. 2010
Show Answer
Answer: b
Explanation
jQuery’s first release was in 2006, at the BarCamp NYC event.

4) Which symbol is used as an alias for jQuery?

  1. &
  2. $
  3. #
  4. @
Show Answer
Answer: b
Explanation
The dollar sign $ is a shorthand alias for the global jQuery object.

5) Which method is used to wait for the document to be ready?

  1. $(document).ready()
  2. $(window).load()
  3. $(document).load()
  4. $(window).ready()
Show Answer
Answer: a
Explanation
$(document).ready() fires as soon as the DOM is constructed, without waiting for images and other assets to load.

6) What is the correct syntax to select all <p> elements?

  1. $(“p”)
  2. $(“P”)
  3. $(“.p”)
  4. $(“#p”)
Show Answer
Answer: a
Explanation
A bare tag name inside the jQuery function — $(“p”) — selects every paragraph element on the page.

7) Which selector selects an element with id=”demo”?

  1. $(“.demo”)
  2. $(“#demo”)
  3. $(“demo”)
  4. $(“id=demo”)
Show Answer
Answer: b
Explanation
The hash (#) prefix denotes an ID selector, so $("#demo") selects the element with id="demo".

8) Which selector selects all elements with class=”test”?

  1. $(“test”)
  2. $(“#test”)
  3. $(“.test”)
  4. $(“class=test”)
Show Answer
Answer: c
Explanation
A leading dot (.) denotes a class selector — $(".test") matches every element carrying that class.

9) What does $(“div p”) select?

  1. All <p> inside <div>
  2. All <div> inside <p>
  3. All <div> and <p>
  4. All <p> after <div>
Show Answer
Answer: a
Explanation
A space between two selectors is the descendant combinator, so $("div p") selects all paragraphs nested anywhere inside a div.

10) Which method is used to hide an element?

  1. hide()
  2. hidden()
  3. displayNone()
  4. invisible()
Show Answer
Answer: a
Explanation
hide() sets the element’s display to none, optionally animating the change over a given duration.

11) Which method is used to show an element?

  1. show()
  2. visible()
  3. display()
  4. appear()
Show Answer
Answer: a
Explanation
show() reverses a hide, restoring the element’s default display value.

12) Which method is used to toggle hide/show?

  1. toggle()
  2. switch()
  3. change()
  4. flip()
Show Answer
Answer: a
Explanation
toggle() hides visible elements and shows hidden ones in a single call.

13) Which method fades out an element?

  1. fadeOut()
  2. fadeIn()
  3. fadeToggle()
  4. fadeTo()
Show Answer
Answer: a
Explanation
fadeOut() animates an element’s opacity down to 0 and then sets display to none.

14) Which method slides an element up?

  1. slideUp()
  2. slideDown()
  3. slideToggle()
  4. slide()
Show Answer
Answer: a
Explanation
slideUp() animates the height of an element down to zero, hiding it.

15) Which method is used for custom animations?

  1. animate()
  2. effect()
  3. motion()
  4. custom()
Show Answer
Answer: a
Explanation
animate() performs a custom animation on a set of CSS properties that accept numeric values.

16) Which method stops an ongoing animation?

  1. stop()
  2. halt()
  3. pause()
  4. end()
Show Answer
Answer: a
Explanation
stop() immediately halts the animation currently running on the matched elements.

17) Which method is used to add a class to selected elements?

  1. addClass()
  2. insertClass()
  3. appendClass()
  4. setClass()
Show Answer
Answer: a
Explanation
addClass() adds one or more class names to each element in the matched set.

18) Which method removes a class?

  1. removeClass()
  2. deleteClass()
  3. dropClass()
  4. eraseClass()
Show Answer
Answer: a
Explanation
removeClass() removes one, several or all class names from the matched elements.

19) Which method toggles a class?

  1. toggleClass()
  2. switchClass()
  3. changeClass()
  4. flipClass()
Show Answer
Answer: a
Explanation
toggleClass() adds the class if it is absent and removes it if it is already present.

20) Which method sets or returns CSS properties?

  1. css()
  2. style()
  3. attr()
  4. prop()
Show Answer
Answer: a
Explanation
css() gets the computed style of the first matched element, or sets one or more style properties on all of them.

21) Which method sets or returns attributes?

  1. attr()
  2. prop()
  3. val()
  4. css()
Show Answer
Answer: a
Explanation
attr() reads or writes HTML attributes such as href, src, title or data-*.

22) Which method sets or returns the value of form fields?

  1. val()
  2. value()
  3. attr()
  4. text()
Show Answer
Answer: a
Explanation
val() is designed for form elements — inputs, selects and textareas — to get or set their current value.

23) Which method sets or returns the text content?

  1. text()
  2. html()
  3. val()
  4. content()
Show Answer
Answer: a
Explanation
text() works with the plain-text content of an element, stripping out any markup.

24) Which method sets or returns the HTML content?

  1. html()
  2. text()
  3. val()
  4. innerHTML()
Show Answer
Answer: a
Explanation
html() gets or sets the inner HTML of an element, including any tags it contains.

25) Which method appends content to selected elements?

  1. append()
  2. prepend()
  3. after()
  4. before()
Show Answer
Answer: a
Explanation
append() inserts content at the end of the inside of each matched element.

26) Which method prepends content?

  1. prepend()
  2. append()
  3. before()
  4. after()
Show Answer
Answer: a
Explanation
prepend() inserts content at the beginning of the inside of each matched element.

27) Which method inserts content after selected elements?

  1. after()
  2. before()
  3. append()
  4. prepend()
Show Answer
Answer: a
Explanation
after() inserts content as a sibling immediately following each matched element.

28) Which method inserts content before selected elements?

  1. before()
  2. after()
  3. append()
  4. prepend()
Show Answer
Answer: a
Explanation
before() inserts content as a sibling immediately preceding each matched element.

29) Which method removes selected elements?

  1. remove()
  2. delete()
  3. empty()
  4. detach()
Show Answer
Answer: a
Explanation
remove() takes the matched elements out of the DOM along with any event handlers and data attached to them.

30) Which method removes child elements?

  1. empty()
  2. remove()
  3. delete()
  4. clear()
Show Answer
Answer: a
Explanation
empty() removes all child nodes of the matched elements but keeps the elements themselves in the DOM.

31) Which method is used to bind an event handler?

  1. bind()
  2. on()
  3. click()
  4. All of the above
Show Answer
Answer: d
Explanation
All three can attach handlers: bind() and the shorthand click() are older forms, while on() is the modern, preferred one.

32) Which method is the preferred way to attach events in jQuery 1.7+?

  1. bind()
  2. live()
  3. on()
  4. delegate()
Show Answer
Answer: c
Explanation
Since jQuery 1.7, on() is the single unified API for direct and delegated event binding.

33) Which method is used to remove event handlers?

  1. off()
  2. unbind()
  3. undelegate()
  4. All of the above
Show Answer
Answer: d
Explanation
off() is the modern counterpart to on(), while unbind() and undelegate() are the older APIs.

34) Which method triggers the click event?

  1. click()
  2. trigger(“click”)
  3. Both a and b
  4. None
Show Answer
Answer: c
Explanation
Calling click() with no argument triggers the event, and trigger("click") does exactly the same thing.

35) Which method is used for AJAX requests?

  1. ajax()
  2. get()
  3. post()
  4. All of the above
Show Answer
Answer: d
Explanation
$.ajax() is the low-level method; $.get() and $.post() are convenience shortcuts built on top of it.

36) Which method loads data from server and places it into selected element?

  1. load()
  2. get()
  3. post()
  4. ajax()
Show Answer
Answer: a
Explanation
Explanation
load() fetches a URL and injects the returned HTML directly into the matched elements.

37) Which method performs an AJAX GET request?

  1. $.get()
  2. $.post()
  3. $.ajax()
  4. $.load()
Show Answer
Answer: a
Explanation
$.get() is the shorthand helper that issues an HTTP GET request.

38) Which method performs an AJAX POST request?

  1. $.post()
  2. $.get()
  3. $.ajax()
  4. $.load()
Show Answer
Answer: a
Explanation
$.post() is the shorthand helper that issues an HTTP POST request with the supplied data.

39) What is the correct syntax for $.ajax?

  1. $.ajax({url: “test.html”, success: function(result){…}})
  2. $.ajax(“test.html”)
  3. $.ajax({url: “test.html”})
  4. All of the above
Show Answer
Answer: d
Explanation
$.ajax() accepts either a settings object or a URL string, so all three forms are valid.

40) Which method is used to iterate over a jQuery object?

  1. each()
  2. forEach()
  3. loop()
  4. iterate()
Show Answer
Answer: a
Explanation
.each() iterates over the matched DOM elements, passing the index and the raw element to the callback.

41) Which method is used to iterate over arrays and objects?

  1. $.each()
  2. $.forEach()
  3. $.loop()
  4. $.iterate()
Show Answer
Answer: a
Explanation
The static utility $.each() loops over plain JavaScript arrays and objects (as opposed to the collection method .each()).

42) Which method is used to filter an array?

  1. $.grep()
  2. $.filter()
  3. $.find()
  4. $.search()
Show Answer
Answer: a
Explanation
$.grep() filters an array using a test function, returning only the items that pass.

43) Which method is used to translate all items in an array to a new array?

  1. $.map()
  2. $.translate()
  3. $.convert()
  4. $.transform()
Show Answer
Answer: a
Explanation
$.map() applies a function to every item of an array or object and returns a new array of the results.

44) Which method removes whitespace from both ends of a string?

  1. $.trim()
  2. $.strip()
  3. $.clean()
  4. $.removeSpace()
Show Answer
Answer: a
Explanation
$.trim() strips leading and trailing whitespace (including tabs and newlines) from a string.

45) Which method is used to merge the contents of two arrays?

  1. $.merge()
  2. $.concat()
  3. $.join()
  4. $.combine()
Show Answer
Answer: a
Explanation
$.merge() combines the contents of two arrays into the first one, which is also returned.

46) Which method is used to find elements within a selected element?

  1. find()
  2. filter()
  3. not()
  4. has()
Show Answer
Answer: a
Explanation
find() searches the descendants of each matched element for those matching the given selector.

47) Which method reduces the set of matched elements to those that match the selector?

  1. filter()
  2. find()
  3. not()
  4. is()
Show Answer
Answer: a
Explanation
filter() keeps only the elements from the current set that match the selector or pass the test function.

48) Which method removes elements from the set?

  1. not()
  2. filter()
  3. find()
  4. is()
Show Answer
Answer: a
Explanation
not() is the inverse of filter() — it removes the elements that match the selector from the set.

49) Which method gets the children of each element?

  1. children()
  2. child()
  3. kids()
  4. offspring()
Show Answer
Answer: a
Explanation
children() returns the immediate children of each matched element, optionally filtered by a selector.

50) Which method gets the parent of each element?

  1. parent()
  2. parents()
  3. parentsUntil()
  4. closest()
Show Answer
Answer: a
Explanation
parent() returns the single direct parent of each matched element.

51) Which method gets all ancestors?

  1. parents()
  2. parent()
  3. closest()
  4. ancestors()
Show Answer
Answer: a
Explanation
parents() walks up the DOM tree and returns every ancestor of each matched element, up to the document root.

52) Which method gets siblings?

  1. siblings()
  2. brother()
  3. sister()
  4. next()
Show Answer
Answer: a
Explanation
siblings() returns all elements that share the same parent as the matched element, excluding the element itself.

53) Which method gets the next sibling?

  1. next()
  2. nextAll()
  3. nextUntil()
  4. prev()
Show Answer
Answer: a
Explanation
next() returns the immediately following sibling of each matched element.

54) Which method gets the previous sibling?

  1. prev()
  2. previous()
  3. before()
  4. next()
Show Answer
Answer: a
Explanation
prev() returns the immediately preceding sibling of each matched element.

55) Which method is used to chain multiple jQuery methods?

  1. Chaining
  2. Piping
  3. Linking
  4. Connecting
Show Answer
Answer: a
Explanation
Chaining works because most jQuery methods return the same jQuery object, allowing further calls to be appended.

56) What does $(“div”).css(“color”, “red”).slideUp(2000).slideDown(2000); demonstrate?

  1. Chaining
  2. Queuing
  3. Animation
  4. All of the above
Show Answer
Answer: a
Explanation
The single statement calls three methods in a row on the same object — the classic demonstration of jQuery chaining.

57) Which method is used to add a function to jQuery?

  1. $.fn.myPlugin = function() {}
  2. $.myPlugin = function() {}
  3. jQuery.myPlugin = function() {}
  4. $.plugin = function() {}
Show Answer
Answer: a
Explanation
Adding to $.fn (an alias of jQuery.prototype) makes the new function available on every jQuery object.

58) What is the purpose of jQuery.noConflict()?

  1. To avoid conflicts with other libraries using $
  2. To stop jQuery
  3. To delete jQuery
  4. To rename jQuery
Show Answer
Answer: a
Explanation
jQuery.noConflict() releases control of the $ variable so other libraries (like Prototype) can use it, letting you reference jQuery by name instead.

59) Which method is used to set multiple CSS properties?

  1. css({property1: value1, property2: value2})
  2. css(property1: value1, property2: value2)
  3. css(“property1: value1, property2: value2”)
  4. css(property1, value1, property2, value2)
Show Answer
Answer: a
Explanation
Passing a plain object of key/value pairs to css() sets several properties in a single call.

60) Which method is used to get the position of an element?

  1. position()
  2. offset()
  3. Both a and b
  4. location()
Show Answer
Answer: c
Explanation
Both return coordinates — offset() relative to the document and position() relative to the offset parent.

61) Which method gets the offset relative to the document?

  1. offset()
  2. position()
  3. scrollTop()
  4. scrollLeft()
Show Answer
Answer: a
Explanation
offset() returns the element’s coordinates relative to the document, as {top, left}.

62) Which method gets the position relative to the offset parent?

  1. position()
  2. offset()
  3. scrollTop()
  4. scrollLeft()
Show Answer
Answer: a
Explanation
position() returns the coordinates relative to the nearest positioned ancestor (the offset parent).

63) Which method is used to scroll to a specific position?

  1. scrollTop()
  2. scrollLeft()
  3. Both a and b
  4. scroll()
Show Answer
Answer: c
Explanation
Passing a number to scrollTop() or scrollLeft() scrolls the element vertically or horizontally to that position.

64) Which method is used to get the width of an element?

  1. width()
  2. innerWidth()
  3. outerWidth()
  4. All of the above
Show Answer
Answer: d
Explanation
width() excludes padding; innerWidth() includes padding; outerWidth() adds borders (and optionally margins).

65) Which method is used to get the height of an element?

  1. height()
  2. innerHeight()
  3. outerHeight()
  4. All of the above
Show Answer
Answer: d
Explanation
height(), innerHeight() and outerHeight() mirror the three width methods for vertical measurement.

66) Which method is used to remove an event handler from an element?

  1. off()
  2. unbind()
  3. undelegate()
  4. All of the above
Show Answer
Answer: d
Explanation
All three detach handlers — off() being the modern API, with unbind() and undelegate() retained for backwards compatibility.

67) Which method is used to attach an event handler that runs only once?

  1. one()
  2. once()
  3. single()
  4. only()
Show Answer
Answer: a
Explanation
one() binds a handler that automatically unbinds itself after firing for the first time.

68) Which method is used to trigger a custom event?

  1. trigger()
  2. triggerHandler()
  3. Both a and b
  4. fire()
Show Answer
Answer: c
Explanation
trigger() runs handlers and the default action; triggerHandler() runs handlers only and does not bubble — both fire custom events.

69) Which method is used to prevent the default action of an event?

  1. preventDefault()
  2. stopPropagation()
  3. return false
  4. Both a and c
Show Answer
Answer: d
Explanation
preventDefault() cancels the browser’s default behaviour, and return false does the same (plus stops propagation) inside a jQuery handler.

70) Which method is used to stop event bubbling?

  1. stopPropagation()
  2. preventDefault()
  3. return false
  4. Both a and c
Show Answer
Answer: d
Explanation
stopPropagation() halts bubbling up the DOM, and return false also stops propagation inside jQuery handlers.

71) Which method is used to create a new element?

  1. $(“<div>”)
  2. $(“div”)
  3. document.createElement(“div”)
  4. Both a and c
Show Answer
Answer: d
Explanation
Passing HTML markup such as $("<div>") creates a new element, and the native document.createElement() also works when wrapped in jQuery.

72) Which method is used to add content to the end of selected elements?

  1. append()
  2. appendTo()
  3. Both a and b
  4. after()
Show Answer
Answer: a
Explanation
append() inserts content inside the target at the end; appendTo() is the mirror-image form written from the content’s perspective.

73) Which method is used to add content to the beginning of selected elements?

  1. prepend()
  2. prependTo()
  3. Both a and b
  4. before()
Show Answer
Answer: a
Explanation
prepend() inserts content inside the target at the beginning; prependTo() is the reversed-perspective counterpart.

74) Which method is used to insert content after selected elements?

  1. after()
  2. insertAfter()
  3. Both a and b
  4. append()
Show Answer
Answer: a
Explanation
after() inserts content as a following sibling; insertAfter() achieves the same result written from the content’s side.

75) Which method is used to insert content before selected elements?

  1. before()
  2. insertBefore()
  3. Both a and b
  4. prepend()
Show Answer
Answer: a
Explanation
before() inserts content as a preceding sibling; insertBefore() is the equivalent reversed-perspective method.

76) Which method is used to replace selected elements?

  1. replaceWith()
  2. replaceAll()
  3. Both a and b
  4. swap()
Show Answer
Answer: a
Explanation
replaceWith() swaps the matched elements for new content; replaceAll() is the same operation expressed from the other direction.

77) Which method is used to wrap selected elements?

  1. wrap()
  2. wrapAll()
  3. wrapInner()
  4. All of the above
Show Answer
Answer: d
Explanation
All three wrap: wrap() wraps each element, wrapAll() wraps the whole set in one wrapper, and wrapInner() wraps each element’s contents.

78) Which method is used to remove the parents of selected elements?

  1. unwrap()
  2. unwrapAll()
  3. removeWrap()
  4. unwrapInner()
Show Answer
Answer: a
Explanation
unwrap() removes the parent of each matched element, leaving the element itself in place.

79) Which method is used to clone selected elements?

  1. clone()
  2. copy()
  3. duplicate()
  4. replicate()
Show Answer
Answer: a
Explanation
clone() creates a deep copy of the matched elements, optionally carrying over their event handlers and data.

80) Which method is used to check if an element has a class?

  1. hasClass()
  2. isClass()
  3. containsClass()
  4. has()
Show Answer
Answer: a
Explanation
hasClass() returns true if any element in the set carries the specified class name.

81) Which method is used to get the index of an element?

  1. index()
  2. getIndex()
  3. position()
  4. findIndex()
Show Answer
Answer: a
Explanation
index() returns the zero-based position of the first matched element among its siblings (or within a given selector).

82) Which method is used to get the DOM element at a specific index?

  1. get()
  2. eq()
  3. index()
  4. find()
Show Answer
Answer: a
Explanation
get() returns the raw DOM element at the given index, not a jQuery-wrapped object.

83) Which method is used to reduce the set to a specific index?

  1. eq()
  2. get()
  3. index()
  4. filter()
Show Answer
Answer: a
Explanation
eq() reduces the set to the single element at the specified index while keeping it wrapped as a jQuery object.

84) Which method is used to get the first element?

  1. first()
  2. eq(0)
  3. Both a and b
  4. get(0)
Show Answer
Answer: c
Explanation
first() and eq(0) both reduce the set to its first element as a jQuery object; get(0) returns the raw DOM node instead.

85) Which method is used to get the last element?

  1. last()
  2. eq(-1)
  3. Both a and b
  4. get(-1)
Show Answer
Answer: c
Explanation
last() and eq(-1) both select the final element of the set as a jQuery object.

86) Which method is used to check if any element matches a selector?

  1. is()
  2. has()
  3. filter()
  4. not()
Show Answer
Answer: a
Explanation
is() returns a boolean indicating whether at least one element in the set matches the given selector or condition.

87) Which method is used to get the descendants of each element?

  1. find()
  2. children()
  3. descendants()
  4. all()
Show Answer
Answer: a
Explanation
find() traverses all descendants (not just direct children) looking for elements that match the selector.

88) Which method is used to get all siblings until a selector?

  1. nextUntil()
  2. prevUntil()
  3. siblingsUntil()
  4. Both a and b
Show Answer
Answer: d
Explanation
nextUntil() walks forward and prevUntil() walks backward, stopping when the given selector is reached.

89) Which method is used to get all parents until a selector?

  1. parentsUntil()
  2. parentUntil()
  3. closestUntil()
  4. ancestorsUntil()
Show Answer
Answer: a
Explanation
parentsUntil() returns all ancestors up to, but not including, the element matched by the given selector.

90) Which method is used to get the closest ancestor that matches a selector?

  1. closest()
  2. parent()
  3. parents()
  4. find()
Show Answer
Answer: a
Explanation
closest() starts at the element itself and travels up the DOM tree, returning the first ancestor that matches the selector.

91) Which method is used to add elements to the set?

  1. add()
  2. push()
  3. concat()
  4. merge()
Show Answer
Answer: a
Explanation
add() creates a new jQuery set containing the original elements plus the ones supplied as arguments.

92) Which method is used to add elements to the set and then remove duplicates?

  1. add()
  2. unique()
  3. merge()
  4. concat()
Show Answer
Answer: a
Explanation
add() returns a new set with duplicates removed automatically (jQuery also exposes the lower-level $.uniqueSort() helper).

93) Which method is used to get the number of elements in the set?

  1. length
  2. size()
  3. count()
  4. Both a and b
Show Answer
Answer: d
Explanation
Both work — length is the property and size() was the older method, now deprecated in jQuery 3.0.

94) Which property gives the number of elements in a jQuery object?

  1. length
  2. size
  3. count
  4. total
Show Answer
Answer: a
Explanation
length is the standard property that reports how many elements the jQuery object holds.

95) Which method is deprecated in jQuery 3.0?

  1. size()
  2. length
  3. each()
  4. on()
Show Answer
Answer: a
Explanation
size() was removed in jQuery 3.0 — use the length property instead.

96) Which method is used to bind an event that runs when the DOM is ready?

  1. ready()
  2. load()
  3. onload()
  4. DOMContentLoaded()
Show Answer
Answer: a
Explanation
ready() registers a function to run once the DOM has finished parsing, before external assets load.

97) Which method is used to unbind all event handlers from an element?

  1. off()
  2. unbind()
  3. Both a and b
  4. remove()
Show Answer
Answer: c
Explanation
Calling off() or unbind() with no arguments removes every handler attached to the element.

98) Which method is used to execute a function when an AJAX request completes successfully?

  1. success
  2. done()
  3. complete()
  4. Both a and b
Show Answer
Answer: d
Explanation
The legacy success option and the modern promise method done() both run when the request succeeds.

99) Which method is used to execute a function when an AJAX request fails?

  1. fail()
  2. error()
  3. Both a and b
  4. catch()
Show Answer
Answer: c
Explanation
The legacy error callback and the modern promise method fail() both handle a failed request.

100) Which method is used to execute a function always when an AJAX request completes (success or failure)?

  1. always()
  2. complete()
  3. done()
  4. fail()
Show Answer
Answer: a
Explanation
always() runs its callback regardless of whether the AJAX request succeeded or failed.
100 JavaScript MCQ (Multiple Choice Questions) with Answers
100 CSS MCQ (Multiple Choice Questions) with Answers
Print page
0 Likes
Studyopedia Editorial Staff
contact@studyopedia.com

We work to create programming tutorials for all.

No Comments

Post A Comment