JQuery MCQ: JQuery Multiple Choice Questions and Answers

Along with DOM traversal and manipulation, jQuery offers several general-purpose helper functions that fill in some JavaScript gaps, especially before ES2015. Which is NOT a jQuery utility function?

How can you select the following blockquote AND the list in a single call to jQuery() without chaining?

<div class="quotes">
<blockquote data-favorite="false">A quote</blockquote>
<blockquote data-favorite="true">A favorite quote</blockquote>
<blockquote data-favorite="false">A quote</blockquote>
<blockquote data-favorite="false">A quote</blockquote>
</div>

<ul class="menu-first">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

There are some issues with this snippet of jQuery. First, it is manipulating CSS directly, rather than manipulating classes and leaving the CSS in stylesheets. What else in this code is best to avoid?

$('.item').css('background-color', 'red');
// some other code here
var firstSubItem = $('.item').find('.sub-item').get(0);
// some other code here too
$('.item').parents('.navigation').css('font-weight', 'bold');

What does this line of code do?

$('ul > li:first-child');

What is the main difference between selectors and filters?

Starting with some DOM elements in the nested structure below, you assign listeners for the same event to a child element and one of the parents using the JavaScript that follows. You want to ensure that when .leaf is clicked, only its event handler will be fired, instead of the click bubbling up and also firing the parent's click handler. What do you need to add to its handler function?

<ul class="items" id="main-menu">
<li>Item 1<ul>
<li class="leaf">Sub Item 1</li>
<li>Sub Item 2</li>
</ul></li>
</ul>
$('.leaf').click( function(event) { console.log('Sub Item 1 got a click'); } );
$('#main-menu').click( function(event) { console.log('Main menu got a click'); } );

What does $() mean in jQuery?

You have an absolutely positioned element inside a relatively positioned parent element, and you want to animate that element within its parent element. What jQuery function is most useful for finding the initial coordinates of the .animate-me?

<style>
.parent {
position: relative;
top: 3em;
width: 50%;
min-height: 50vh;
margin: 0 auto;
}

.animate-me {
position: absolute;
top: 40px;
right: 30px;
}
</style>

<div class="parent">
<div class="animate-me">
This box will move!
</div>
</div>

Which CSS selectors can you NOT use in jQuery?

Given the following CSS and HTML codes below, how could you apply the success class to the feedback div?

.success {
color: green;
background: #ddffdd;
}

<div class="feedback">
Thank you for answering this survey.
</div>

Given this snippet of HTML and jQuery code, what does the jQuery do?

<ul class="menu">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="active submenu">
<li><a href="#">Subpage 1</a></li>
<li><a href="#">Subpage 2</a></li>
</ul>

var m = $('.menu'), sm = $('.submenu');
m.add(sm);
m.css('font-weight', 'bold');

Which choice is an example of statement chaining?

Below is an example page snippet that includes a couple of messages in a list, and a code snippet that retrieves a few hundred messages from a API endpoints using AJAX. How might we add these items to the page snippet in a way that avoids performance problems with DOM insertions?

<div class="message-area">
<ul class="message-area--list">
<li>Existing message 1</li>
<li>Existing message 2</li>
</ul>
</div>

$.get('//example.com/api/v1/message')
.done(function(data) {
var tonsOfItems = data.messages;
// add all these messages to a large page
});

You want to work with AJAX using a Promise-like interface instead of nested callback functions. What jQuery API should you use?

. Which property of the jQuery event object references the DOM object that dispatched an event?

Given the following HTML, how could we make this button disappear from the page using jQuery?

<button class="btn btn-primary" type="submit">Continue to checkout</button>

Generally speaking, when used on a web page, how should jQuery be installed, and why?

These two script tags show different ways of using jQuery's ready() method. What is true about both approaches?

<script>
$(function() {
// The rest of my code goes here
});
</script>

<script>
jQuery(document).ready(function($) {
// The rest of my code goes here
});
</script>

Which describes how jQuery makes working with the DOM faster?

Given this set of checkboxes, how can you select the one with the value "blimp"?

<input type="checkbox" name="songs[]" value="satisfaction">
<input type="checkbox" name="songs[]" value="respect">
<input type="checkbox" name="songs[]" value="blimp">
<input type="checkbox" name="songs[]" value="saturn">
<input type="checkbox" name="songs[]" value="penguins">

. Effects like show, hide, fadIn, and fadeOut can be called with no arguments, but can also take arguments for how long they should last. Which is NOT a duration argument supported by these functions?

Given the following HTML, how could we use one line to hide or show the button?

<button class="btn btn-primary" type="submit">Continue to checkout</button>

Given this set of checkboxes, how can you select the ones that have the phrase "sun" as part of the value?

<input type="checkbox" name="artists[]" value="sun-ra">
<input type="checkbox" name="artists[]" value="otis-redding">
<input type="checkbox" name="artists[]" value="captain-beefheart">
<input type="checkbox" name="artists[]" value="king-sunny-ade">
<input type="checkbox" name="artists[]" value="weather-report">

You want to take a block of type and animate it to a larger size with jQuery. The following HTML and JavaScript behaves strangely. What is the issue?

<div id="type" style="font: 1em/1.5 helvetica, arial, sans-serif; background: #ffc; padding: 0">
Animate me!
</div>

$('#type').animate({
fontSize: '+=1em'
}, 3000);

We want to create a new jQuery plugin called linkUpdater that can be chained onto other jQuery selector like a normal plugin. It should update all the links in the referenced collection so they open in new windows or tabs. Below is the first cut. What is one problem with this plugin?

"user strict";
($.linkUpdater = function() {
this.find('a').attr('target', '_blank');
})( jQuery );

As with many areas of JavaScript, keeping track of the meaning of this is important and sometimes tricky. What does this mean at each of the two points in this custom plugin snippet?

$.fn.customPlugin = function() {
// Point 1

return this.each(function() {
// Point 2
})
}
$(document).customPlugin();

Though jQuery offers visual effects, it is considered a best practice to use CSS to set up different states triggered by classes, where it makes sense. What's the easiest way to enable and disable a class bounce on an element with the ID dialog?

What is the difference between $('header').html() and $('header').text()?

What is jQuery?

What is the difference between $('header').html() and $('header').text()?

The .addClass() and .removeClass() methods can accept functions as arguments. What does this function do?

$('#menu').addClass(function() {
return $('body').attr('class');
});

How can you get an AJAX request to go through without triggering any of jQuery's AJAX events?

You want to create a custom right-click menu. How might you start the code?

When incorporating a plugin into a project, what are the important steps for basic installation and usage?

Given the snippet of HTML below, what is the difference between the two lines that follow it?

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
$('ul').find('li').get(2);
$('ul').find('li').eq(2);

What is tricky about jQuery's nth- filters (:nth-child, :nth-of-type, etc.) relative to other filters?

Using event delegation, you can listen for events on a lot of different items without having to attach separate listeners to each one. But there are times when you may want to check the type of item receiving the event before doing anything, such as checking if an image was clicked versus a text field. Given the starter code below, which choice shows what jQuery provides to help with that process?

<div id="sidebar">
<img src="fancy-button.png" alt="Pick Me">
<input type="text" placeholder="Fill in something">
</div>

$('#sidebar').click(function(evt) {
var $target = $(evt.target);

// What goes here?
});

Let's say you have a page with just one link on it. How can you change the anchor tag so it links to example.com?

Given this HTML list and subsequent two lines of jQuery, what is the difference in the behavior of .closest() and .parents()?
<ul class="items" id="main-menu">

<li>Item 1 <ul id="sub-menu">
<li class="leaf">Sub Item 1</li>
<li>Sub Item 2</li>
</ul></li>
</ul>
$('.leaf').closest('.items');
$('.leaf').parents('.items');

What does the following line of code do?

jQuery('p')

How can you ensure that some code executes only when a class active appears on an element?

. How would you fire a callback when any AJAX request on a page has completed?

You're working on a site that uses an old version of jQuery, and you want to update to a newer version. What's the most efficient way to do so?

. There are times when you might want to programmatically trigger an event, instead of simply reacting to user input directly. Given this markup, Which choice will NOT cause a click event to the select box when the button is clicked?

<article>
<div>
Here's a button you can click: <button class="btn">Click Me</button>
</div>
<form>
<p>
Further down the page, there's a select box.
</p>
<select>
<option value="1">One</option>
<option value="2">One</option>
<option value="3">One</option>
<option value="4">One</option>
</select>
</form>
</article>

When writing jQuery plugins, we often provide default options that may be overridden by the end user. What jQuery function is most useful for this purpose?

When using the clone() function to duplicate an element, what is one of the main concerns your code needs to watch out for?

How do you change the current value of a text field with the class .form-item to "555-1212"?

What's the difference between these two snippets?

$('button').on('click', function(){ alert('you clicked the button!'); });
$('button').click(function(){ alert('you clicked the button!'); });

What is the correct way to check how many paragraphs exist on a page using jQuery?