jQuery Basics QuizS2C Home « jQuery Basics Quiz

The questions in this first quiz on jQuery are on the topics covered in the jQuery Basics section of the site. The table below lists the lessons, a description of the lesson content and the the quiz question number range.

Lesson Summary

Click on a lesson in the table to go to that lesson for a refresher on the topics for that lesson.

jQuery Basics Lessons Description Question Range
Lesson 1 - Introduction to jQueryIn our first lesson on jQuery we briefly discuss the library and download the latest version of the jQuery API.1 - 3
Lesson 2 - Core and InternalsIn our second lesson on the jQuery library we look at the Core and Internals methods and properties.4 - 6
Lesson 3 - CSS SelectorsIn this lesson we look at the CSS Selectors and how we use them with jQuery.7 - 9
Lesson 4 - jQuery SelectorsFor this lesson we look at the jQuery Selectors and how we use them within jQuery.10 - 12
Lesson 5 - DOM Element MethodsIn this lesson we look at the four DOM element methods and how we use them within jQuery.13 - 15
Lesson 6 - Tree TraversalIn this lesson we look at the tree traversal methods and how we use them within jQuery.16 - 18
Lesson 7 - Other TraversalIn this lesson we look at the non-hierarchial traversal methods and how we use them within jQuery.19 - 21
Lesson 8 - Working With CSS ClassesIn this lesson we look at the four class attribute methods and how we use them within jQuery.22 - 24
Lesson 9 - Working With CSS AttributesIn this lesson we learn how we can work with CSS attributes using jQuery as well as investigating a couple of general use jQuery CSS methods.25 - 27
Lesson 10 - Working With General CSS PropertiesThere are lots of jQuery methods available for working with CSS properties, in this lesson we look at general property methods.28 - 30
Lesson 11 - Working With Dimension & Position CSS PropertiesIn this lesson we look at how jQuery allows us to get and set box model dimensions and position the screen.31 - 33

jQuery Quiz

The quiz below tests your knowledge of the material learnt in the jQuery Basics section of the site.

Question 1 : Where do we place the import and code for jQuery?
- We can place the import and code for jQuery in either the <code>head</code> or <code>body</code> HTML tag.
Question 2 : What is the following code example a shorthand version of?
$(function(){});
- This code is a shorthand version of the <code>.ready()</code> function.
Question 3 : When is the .ready() function fired?
- The <code>.ready()</code> is fired after the document is fully parsed and converted into the DOM tree.
Question 4 : What jQuery method do we use to select a group of elements to wrap?
- We use the <code>jQuery()</code> method to select a group of elements to wrap.
Question 5 : The jQuery library makes exclusive use of the $ symbol as a global identifier and so cannot be used in conjunction with other JavaScript libraries that also use the $ symbol as a global identifier, such as Prototype?
-The <code>jQuery.noConflict()</code> method allows us to free up the jQuery library control of the <code>$</code> variable and optionally the jQuery namespace as well, so there is no problem using other libraries in conjunction with jQuery.
Question 6 : What jQuery method do we use to allows provision to execute callback functions, on Deferred or plain JavaScript objects, based on one or more objects representing asynchronous events?
- We use the <code>jQuery.when()</code> method to execute callback functions, on Deferred or plain JavaScript objects, based on one or more objects representing asynchronous events.
Question 7 : jQuery allows selection of elements using CSS1/2 selectors but not CSS3 selectors as these don't work in all browsers?
- jQuery allows selection of elements using CSS1/2 and CSS3 selectors regardless of browser version.
Question 8 : Is the following code valid?
$("input[name]:enabled").css('backgroundColor', 'yellow').val("enter input");
- It's prefectly valid to use more than one jQuery method in a row and is known as 'method chaining'.
Question 9 : What will the following code select?
$('h3 a[href^="c"]');
- <code>$('h3 a[href^="c"]');</code> - Selects all 'h3' elements that have a 'href' attribute that starts with "c".
Question 10 : Are there any disadvantages to using jQuery selectors?
- Being jQuery extensions, the jQuery selectors are not part of any current CSS specification and thus cannot take advantage of the performance boost provided by the native DOM <code>querySelectorAll()</code> method.
Question 11 : jQuery Form selectors allow us to select and manipulate parts of forms that we wouldn't be able to using CSS selectors instead?
- For the majority of jQuery form selectors we can use valid CSS alternatives so the statement is not true.
Question 12 : What are index positional selectors based on?
- Index positional selectors are based on an index starting from 0.
Question 13 : Which of the DOM Element Methods has beed deprecated?
- The <code>.size()</code> has been deprecated. Use the <code>.length</code> property instead, which does the same thing, without the overhead of a function call.
Question 14 : What will the variable $a hold after the following code is run?
var $a = $('.testtable tr').get();
- The <code>.get()</code> method will retrieve all elements matching the selector specified, so in this case all 'tr' elements within the table with a class of 'testtable'.
Question 15 : Can we chain JavaScript methods onto jQuery methods?
- Yes it is perfectly acceptable for example to do the following chaining: <code>alert($('p').toArray().reverse());</code>.
Question 16 : Which jQuery method do we use to retrieve all ancestors of each element within the matched set?
- We use the <code>.parents()</code> method to retrieve all ancestors of each element within the matched set.
Question 17 : What does the .find() jQuery method do?
- We use the <code>.find()</code> jQuery method for descendant element retrieval of each element in the current matched set.
Question 18 : There are no jQuery methods for traversing down the DOM tree?
- There are two jQuery methods for traversing down the DOM tree.
Question 19 : What happens to the jQuery stack when we chain traversal methods?
- The matched set returned from the newest traversal method is 'pushed' onto the stack, above the previous matched set.
Question 20 : Which deprecated jQuery method did .addBack() replace?
- The <code>.addBack()</code> jQuery method replaced the deprecated <code>.andSelf()</code> jQuery method.
Question 21 : Which jQuery method will end the most recent filtering operation in the current execution chain and return the matched set of elements to its previous state ( prior to the most recent filter being applied ) ?
- The <code>.end()</code> jQuery method will end the most recent filtering operation in the current execution chain and return the matched set of elements to its previous state.
Question 22 : When adding classes to an element using the .addClass() jQuery method, the last class added for that element will be the one used for styling when a conflict arises?
- The order in which classes are added to an element is immaterial as CSS always applies styles top-down, so the last style in the CSS styles list and not in the 'class' attribute wins if a conflict arises.
Question 23 : When using the .removeClass() jQuery method without any parameters what happens?
- Using the <code>.removeClass()</code> jQuery method without any parameters removes all classes of each element in the matched set.
Question 24 : We can use the current object and the .hasClass() jQuery method as an expression in a conditional operator?
- Yes we can use the current object (<code>this</code>) and the <code>.hasClass()</code> jQuery method as an expression in a conditional operator, for example - <code>if ($(this).hasClass('someClass')) {...};</code>
Question 25 : When using the .attr() jQuery method to retrieve the value of an attribute what is returned when an attribute has not been set?
- The <code>.attr()</code> jQuery method returns <code>undefined</code> when an attribute has not been set.
Question 26 : We can use the .attr() jQuery method on any object?
- The <code>.attr()</code> jQuery method should not be used on plain objects, arrays, the document or window.
Question 27 : Which jQuery method is best used for getting and setting the dynamic state of a DOM element's values?
- The <code>.val()</code> jQuery method is best used for getting and setting the dynamic state of a DOM element's values.
Question 28 : Which jQuery method is best used for getting and setting the dynamic state of a DOM element's values that are disabled or checked?
- The <code>.prop()</code> jQuery method is best used for getting and setting the dynamic state of a DOM element's values that are <code>disabled</code> or <code>checked</code>.
Question 29 : We can use the .css() method to retrieve or set the values of all CSS properties?
- We cannot use the <code>.css()</code> jQuery method on shorthand CSS properties such as <code>background</code> and <code>border</code>.
Question 30 : What value is returned from the .removeprop() jQuery method when a property has not been or cannot be removed?
- The <code>.removeprop()</code> jQuery method returns <code>undefined</code> when a property has not been or cannot be removed.
Question 31 : What does .position() jQuery method signature do?
- The <code>.position()</code> jQuery method signature retrieves the current coordinates from the first element within the matched set, relative to the offset parent.
Question 32 : Which jQuery method signature retrieves the currently computed CSS height of the first element within the matched set including padding, but not border or margin?
- The <code>.innerHeight()</code> jQuery method signature retrieves the currently computed CSS height of the first element within the matched set including padding, but not border or margin.
Question 33 : What does .offset() jQuery method signature do?
- The <code>.offset()</code> jQuery method signature retrieves the current coordinates from the first element within the matched set, relative to the offset parent.
Quiz Progress Bar Please select an answer

What's Next?

In the next quiz we test our knowledge of the topics covered in the jQuery Intermediate section of the site.

go to home page Homepage go to top of page Top