‫بسم هللا الرحمن الرحيم‬

jQuery MCQ (Multiple Choice Questions)

1) Who developed jQuery, and in which year it was first released?

a. John Richard in 2001

b. Mark Bensman in 2004
c. John Resig in 2006
d. None of the above

Hide Answer Workspace

Answer: (c) John Resig in 2006

Explanation: jQuery was first released in January 2006 by John Resig at BarCamp NYC. It is
currently headed by Timmy Wilson and maintained by a team of developers.

2) jQuery is a -

a. JavaScript method
b. JavaScript library
c. JSON library
d. PHP method

Hide Answer Workspace

Answer: (b) JavaScript library

Explanation: jQuery is a fast, small, cross-platform and feature-rich JavaScript library. It is

designed to simplify the client-side scripting of HTML. It is a small, light-weight and fast
JavaScript library.

3) Which of the following sign is used as a shortcut for jQuery?

a. the % sign
 b. the & sign
c. the $ sign
d. the @ sign

Hide Answer Workspace

Answer: (c) the $ sign

Explanation: Every jQuery selector start with this dollar sign $(). This sign is known as the
factory function. It uses the three basic building blocks while selecting an element in a given
document.

4) $(this) in jQuery is used when -

a. an HTML element references the entire document

b. an HTML element references its own action
c. an HTML element references the action of its parent element
d. All of the above

Hide Answer Workspace

Answer: (b) an HTML element references its own action

Explanation: $(this) and this refers to the same element. But they are used in a different way.
When 'this' is wrapped in $(), it becomes the jQuery object, and it is used when an HTML
element refers to its own action.

5) Which of the following jQuery method is used to hide the selected elements?

a. The hidden() method

b. The hide() method
c. The visible(false) method
d. The display(none) method

Hide Answer Workspace

Answer: (b) The hide() method

Explanation: The jQuery hide() method is used to hide the selected elements.
6) Which jQuery method is used to set one or more style properties to the selected element?

a. The html() method

b. The style() method
c. The css() method
d. All of the above

Hide Answer Workspace

Answer: (c) The css() method

Explanation: The jQuery css() method is used to get (return) or set style properties or values for
selected elements. It facilitates you to get or set one or more style properties.

7) Which of the following jQuery method can be used to deal with the name conflicts?

a. The conflict() method

b. The nameConflict() method
c. The noConflict() method
d. None of the above

Hide Answer Workspace

Answer: (c) The noConflict() method

Explanation: Many JavaScript libraries also use the $ sign as the shortcut, along with the jQuery
on the same page. But if two different frameworks use the same alias, a conflict could occur, and
one of the frameworks might stop working. The noConflict() method is implemented in jQuery
to deal with such situations. It is used to avoid the conflict of using $ variable with other
libraries. This method releases the hold on the $ (dollar) identifier so that other libraries can use
it.

8) The correct syntax to set the background color of all h1 elements to yellow in jQuery -

a. $("h1").style("background-color","yellow");
b. $("h1").html("background-color","yellow");
c. $("h1").css("background-color","yellow");
 d. $("h1").layout("background-color","yellow");

Hide Answer Workspace

Answer: (c) $("h1").css("background-color","yellow");

Explanation: In jQuery, using the css() method, we can set the style of an HTML element. The
correct syntax for setting the background color to yellow of an h1 element is -
$("h1").css("background-color","yellow");

9) Which of the following jQuery method is used to attach a handler to an event?

a. unbind() method
b. attach() method
c. bind() method
d. None of the above

Hide Answer Workspace

Answer: (c) bind() method

Explanation: The jQuery bind() event is used to attach one or more event handlers for selected
elements from a set of elements. It specifies a function to run when the event occurs.

10) The jQuery method used to perform an asynchronous HTTP request -

a. jQuery ajaxSetup() method

b. jQuery ajaxSync() method
c. jQuery ajax() method
d. None of the above

Hide Answer Workspace

Answer: (c) jQuery ajax() method

Explanation: AJAX is an acronym for Asynchronous JavaScript and XML. The ajax() method in
jQuery performs an AJAX request. It sends an asynchronous HTTP request to the server.

11) Which of the following jQuery method is used to stop jQuery for few milliseconds?
a. stop() method
b. delay() method
c. slowdown() method
d. pause() method

Hide Answer Workspace

Answer: (b) delay() method

Explanation: The jQuery delay() method is used to delay the execution of functions in the
queue. It is the best method to make a delay between the queued jQuery effects. The jQuery
delay() method sets a timer to delay the execution of the next item in the queue.

12) What does the syntax $("p.para") will select?

a. The first paragraph element with class = "para"

b. The first paragraph element with id = "para"
c. The first paragraph element with name = "para"
d. All paragraph elements with class = "para"

Hide Answer Workspace

Answer: (d) All paragraph elements with class = "para"

Explanation: In jQuery, the correct syntax for selecting all paragraph elements with class =
"para" is - $("p.para").

13) Which of the jQuery function prevents the code from running before the loading of the
document finishes?

a. $(document).load()
b. $(document).unload()
c. $(document).ready()
d. $(document).trim()

Hide Answer Workspace

Answer: (c) $(document).ready()

Explanation: The ready() function in jQuery executes the code only when the DOM (Document
object model) is fully loaded. The code inserted between $(document).ready() is executed only
when a page is ready for JavaScript code to execute.

14) The jQuery used to find all next sibling elements after the current element is -

a. find() method
b. nextAll() method
c. siblings() method
d. None of the above

Hide Answer Workspace

Answer: (b) nextAll() method

Explanation: The nextAll() method is used to return all next siblings of the specified selector.
This method traverses forwards along with the next siblings of DOM elements. Whereas the
siblings() method returns all next and previous siblings of the specified selector.

15) The correct syntax for selecting the first paragraph element with id p1 is -

a. $("p.p1:first")
b. $("p#p1:first")
c. $("p1#p:first")
d. None of the above

Hide Answer Workspace

Answer: (b) $("p#p1:first")

Explanation: In jQuery, the correct syntax for selecting the first paragraph element with id =
"p1" is - $("p#p1:first").

16) Which of the following jQuery method is used to check whether or not the selected elements
have the specified class name?

a. hasClass() method
b. addClass() method
 c. find() method
d. toggleClass() method

Hide Answer Workspace

Answer: (a) hasClass() method

Explanation: The jQuery hasClass() method is used to check whether selected elements have a
specified class name or not. It returns TRUE if the specified class is present in any of the selected
elements; otherwise, it returns FALSE.

17) Which of the following jQuery method is used to set the value of an element?

a. val() method
b. setValue() method
c. content() method
d. None of the above

Hide Answer Workspace

Answer: (a) val() method

Explanation: There are two usages of the jQuery val() method. It can be used to set the value of
every matched element. It can also be used to get the current value of the first element in the
set of matched elements.

18) The jQuery method used to set the width property of an element is -

a. setWidth( val ) method

b. width( val ) method
c. setCSSWidth( val ) method
d. None of the above

Hide Answer Workspace

Answer: (b) width( val ) method

Explanation: jQuery width() method is used to return or set the width of the matched element.
When this method is used to return the width, it returns the width of the first matched element.
When this method is used to set the width, it sets the width for every matched element.
19) The jQuery method used to get all ancestors of the matched set of elements is -

a. parents() method
b. parent() method
c. offsetParent() method
d. None of the above

Hide Answer Workspace

Answer: (a) parents() method

Explanation: The parents() method in jQuery is used to get all ancestor elements of the given
selector. This method traverses upwards from the parent element, all the level up in the DOM
tree and returns all ancestors of the selected element.

20) The jQuery method used to remove the set of matched elements is -

a. delete() method
b. empty() method
c. remove() method
d. None of the above

Hide Answer Workspace

Answer: (c) remove() method

Explanation: The jQuery remove() method is used to remove the selected elements out of the
DOM. It removes the selected element itself, as well as everything inside it (including all texts
and child nodes). This method also removes the data and the events of the selected elements.

21) The jQuery method used for parsing the JSON text is -

a. parseJSON() method
b. parseHTML() method
c. noConflict() method
d. each() method
Hide Answer Workspace

Answer: (a) jQuery.parseJSON() method

Explanation: The jQuery parseJSON() method takes a JSON string and returns a JavaScript
object. The specified JSON string must follow the strict JSON format. Passing an incorrect string
will cause a JS exception.

22) What does the syntax $("div#myDiv .para") will select?

a. It will select all elements with class = "para" within the div element with id = "myDiv"
b. It will select all elements with id = "myDiv" within the div element with class = "para"
c. All div elements with class = "para" or with id = "myDiv"
d. None of the above

Hide Answer Workspace

Answer: (a) It will select all elements with class = "para" within the div element with id =
"myDiv"

Explanation: The jQuery syntax $("div#myDiv .para") will select all elements with class = "para"
within the div element with id = "myDiv".

23) Which of the following jQuery method is used to reduce the set of matched elements to a single
element?

a. isEqual() method
b. val() method
c. eq() method
d. delegate() method

Hide Answer Workspace

Answer: (c) eq() method

Explanation: The eq() method in jQuery returns an element with the given index. This method
reduces the set of elements to the one with a specific index. The index can either be positive or
negative.
24) The toggle() method in jQuery is used to -

a. toggle between the hide() and show() methods

b. toggle between the fadeIn() and fadeOut() methods
c. toggle between the slideUp() and slideDown() methods
d. None of the above

Hide Answer Workspace

Answer: (a) toggles between the hide() and show() methods

Explanation: The jQuery toggle() is a special type of method which is used to toggle between
the hide() and show() method. It shows the hidden elements and hides the shown element.

25) Which of the following method is used to toggle between the fadeIn() method and fadeOut()
method?

a. toggle() method
b. fadeToggle() method
c. slideToggle() method
d. animate() method

Hide Answer Workspace

Answer: (b) fadeToggle() method

Explanation: jQuery fadeToggle() method is used to toggle between the fadeIn() and fadeOut()
methods. If the elements are faded in, it will make them faded out, and if they are faded out, it
will make them faded in.

26) The :even and :odd filters in jQuery are used to -

a. determine if the number is odd or even

b. determine if the index position of an element is odd or even
c. both (a) & (b)
d. None of the above

Hide Answer Workspace

Answer: (b) determine if the index position of an element is odd or even

Explanation: The :even selector in jQuery is used to select the elements with even index
numbers (such as 2, 4, 6, etc.). The index starts at 0. The :odd selector in jQuery is used to select
the elements with an odd index number (such as 1, 3, 5, etc.).

27) If the names of variables are the same, then which of the following type of variable takes
precedence?

a. local variable
b. global variable
c. both (a) & (b)
d. None of the above

Hide Answer Workspace

Answer: (a) local variable

Explanation: In the function's body, the precedence of the local variable is more than the global
variable with the same name. If the name of the function's local variable is the same as the name
of the global variable, then the local variable hides the global variable.

28) Which of the following is the correct code in jQuery to make all div elements 150px high?

a. $("div").height(150);
b. $("div").height = "150" ;
c. $("div").height = 150 ;
d. None of the above

Hide Answer Workspace

Answer: (a) $("div").height(150);

Explanation: The jQuery height() method is used to set the height of every matched element or
return the current computed height for the first element. When it is used to set the height, then
it will set the height of every matched element, and when it is used to return the height, the
height() method will return the height of the first matched element.

29) Which of the following is the basic requirement to start with jQuery?
a. To use jQuery, first, we have to buy the jQuery library from its official website.
b. To use jQuery, we don't require anything as it is already built in the browser we are using.
c. To use jQuery, we have to refer to its hosted library, or we can download the latest jQuery
version from its official website.
d. All of the above

Hide Answer Workspace

Answer: (c) To use jQuery, we have to refer to its hosted library, or we can download the latest
jQuery version from its official website.

Explanation: To start with jQuery, we need to refer to its library, or we can download the latest
version of jQuery from jQuery.com.

30) CDN stands for -

a. Content development network

b. Content delivery network / Content distribution network
c. Communication development network
d. None of the above

Hide Answer Workspace

Answer: (b) Content delivery network / Content distribution network

Explanation: CDN stands for Content Delivery Network or Content Distribution Network. It is a
large distributed system of servers deployed in multiple data centers across the internet. It
provides the files from servers at a higher bandwidth that leads to faster loading time.

31) The jQuery method used to find all previous sibling elements of the current element is -

a. nextAll() method
b. prevAll() method
c. siblings() method
d. None of the above

Hide Answer Workspace

Answer: (b) prevAll() method

Explanation: The prevAll() method is jQuery's inbuilt function that returns all previous siblings
of the selected element. This method traverses backward along with the previous siblings of
DOM elements. Whereas the siblings() method returns all next and previous siblings of the
specified selector.

32) The jQuery method used to return the direct parent element of the selected element is -

a. parents() method
b. parent() method
c. offsetParent() method
d. None of the above

Hide Answer Workspace

Answer: (b) parent() method

Explanation: The parent() method in jQuery finds the direct parent of the given selector. It is an
inbuilt function in jQuery. This method only traverses a single level up in the DOM tree and
returns the direct parent of the selected element.

33) The jQuery method used to load data using HTTP get is -

a. get(URL, data, callback, dataType) method

b. post(URL, data, callback, dataType) method
c. ajax() method
d. ajaxSend() method

Show Answer Workspace

34) Can we use multiple document.ready() function on the same page?

a. Yes
b. No
c. Can't say
d. Not possible

Hide Answer Workspace

Answer: (a) Yes

Explanation: We can use any number of document.ready() function on the same page. For
example:

$(document).ready(function() {
$("h1").css("background-color", "red");
});

$(document).ready(function() {
$("p").css("background-color", "pink");
});

35) The code $("p").css("background-color","yellow") is equivalent to -

a. jQuery("p").css("background-color","yellow")
b. document("p").css("background-color","yellow")
c. jq("p").css("background-color","yellow")
d. None of the above

Hide Answer Workspace

Answer: (a) jQuery("p").css("background-color","yellow")

Explanation: Instead of using the $ (dollar sign), we can use jQuery as a function name. For
example:

jQuery(document).ready(function() {
jQuery("p").css("background-color", "yellow");
});

36) Which of the following jQuery method is used to add/remove one or more classes from the
selected elements?

a. toggleClass() method
b. fadeToggle() method
c. toggle() method
d. slideToggle() method

Hide Answer Workspace

Answer: (a) toggleClass() method

Explanation: The jQuery toggleCLass() method is used to add or remove one or more classes
from the selected elements. This method toggles between adding and removing one or more
class name. It checks each element for the specified class names. If the class name is already set,
it removes, and if the class name is missing, it adds.

37) What does the syntax $("p") will select?

a. All paragraph elements

b. Only first paragraph element
c. Only last paragraph element
d. None of the above

Hide Answer Workspace

Answer: (a) All paragraph elements

Explanation: In jQuery, the syntax $("p") will select all paragraph elements.

38) What does the syntax $("p span") will select?

a. All span elements inside the paragraph element

b. Only first span element inside the paragraph element
c. Only last span element inside the paragraph element
d. None of the above

Hide Answer Workspace

Answer: (a) All span elements inside the paragraph element

Explanation: In jQuery, the syntax $("p span") will select all span elements inside a paragraph
element.

39) The selector $(":disabled") will select -

a. The elements with the text ":disabled"

b. The elements that do not include the text ":disabled"
c. The hidden elements
d. All disabled input elements
Hide Answer Workspace

Answer: (d) All disabled input elements

Explanation: The :disabled selector is used to select all disabled form elements. It is a pseudo-
class selector that can also be used to style the disabled UI elements. This selector can only be
used for the HTML elements that support the disabled attribute.

40) Which of the following selector in jQuery is used to select the elements with lesser index value
than the value of its index parameter?

a. jQuery :lt() selector

b. jQuery :gt() selector
c. jQuery :lang() selector
d. jQuery :nth-child selector

Hide Answer Workspace

Answer: (a) jQuery :lt() selector

Explanation: The :lt() selector selects the elements that have lesser index value than the value
specified in the index parameter of the :lt() selector. The index starts at 0.

41) Which of the following method in jQuery is used to make copies of the set of matched
elements?

a. jQuery detach() method

b. jQuery delegate() method
c. jQuery clone() method
d. jQuery serialize() method

Hide Answer Workspace

Answer: (c) jQuery clone() method

Explanation: The jQuery clone() method is used to make copies of the set of matched elements.
It also makes copies of their child nodes, texts and attributes. The clone() method is a
convenient way to duplicate elements on a page.
42) The jQuery method which is used to remove the tabs, space and the line breaks from the
beginning and end of the specified string is -

a. jQuery empty() method

b. jQuery trim() method
c. jQuery remove() method
d. jQuery serialize() method

Hide Answer Workspace

Answer: (b) jQuery trim() method

Explanation: The trim() method in jQuery is used to remove the space, tabs, and all line breaks
from the starting and end of the specified string. This method does not remove these characters
if these whitespace characters are in the middle of the string.

43) Which of the following jQuery method returns the direct children of the selected element?

a. jQuery ancestors() method

b. jQuery next() method
c. jQuery children() method
d. None of the above

Hide Answer Workspace

Answer: (c) jQuery children() method

Explanation: The children() method in jQuery returns the direct children of the given selector. It
is an inbuilt method in jQuery.

44) Which of the following jQuery method returns all siblings of the selected element?

a. jQuery ancestors() method

b. jQuery siblings() method
c. jQuery parents() method
d. None of the above

Hide Answer Workspace

Answer: (b) jQuery siblings() method

Explanation: As its name implies, the siblings() method returns all siblings of the selected
element. It is an inbuilt method in jQuery.

45) The jQuery selector used to select the elements containing the specified string is -

a. jQuery :contains selector

b. jQuery :lang() selector
c. jQuery :nth-child selector
d. None of the above

Hide Answer Workspace

Answer: (a) jQuery :contains selector

Explanation: The :contains() selector in jQuery selects the elements that contain the specified
string. The matching string can be directly appeared in the selected element or in the
descendants of that element.

46) The jQuery selector used to select the elements with the specified language code is -

a. jQuery :contains selector

b. jQuery :lang() selector
c. jQuery :nth-child selector
d. None of the above

Hide Answer Workspace

Answer: (b) jQuery :lang() selector

Explanation: The :lang() selector is used to select the elements with the specified language
code. It selects the elements whose language value is equal to the supplied language code. We
can use the lang attribute in HTML to determine the language value of the elements.

47) Which of the following jQuery method is used to replace all selected elements with new HTML
elements?
a. jQuery replaceWith() method
b. jQuery replaceAll() method
c. jQuery load() method
d. jQuery delegate() method

Hide Answer Workspace

Answer: (b) jQuery replaceAll() method

Explanation: The replaceAll() method in jQuery replaces all selected elements with new HTML
elements. This method replaces the elements and their contents with other HTML elements. It
returns the selected elements with new content.

48) The jQuery method used to trigger a specified event handler for the selected element is -

a. jQuery trigger() method

b. jQuery toggle() method
c. jQuery eq() method
d. jQuery next() method

Show Answer Workspace

49) Which of the following method is used to remove the specified attribute from the selected
element?

a. jQuery remove() method

b. jQuery empty() method
c. jQuery removeAttr() method
d. jQuery error() method

Hide Answer Workspace

Answer: (c) jQuery removeAttr() method

Explanation: The removeAttr() method is used to remove attributes from the element. This
method is used to remove the specified attribute from the selected element.
50) Which of the following jQuery method is used to merge the content of two or more objects into
the first object?

a. jQuery extend() method

b. jQuery eq() method
c. jQuery data() method
d. jQuery param() method

Hide Answer Workspace

Answer: (a) jQuery extend() method

Explanation: The jQuery extend() method together merges the content of two or more objects
into the first object. This method returns the merged object.