<input type="checkbox" id="same-address" checked>
-
by checking the value of $('#same-address').checked
-
by checking the value of $('#same-address').prop('checked')
-
by checking the value of $('#same-address').attr('checked')
-
by checking the value of $('#same-address').val()
<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/messages')
.done(function(data) {
var tonsOfItems = data.messages;
// add all these messages to a large page
});[ ] $.each(tonsOfItems, function(idx, item) {
$('.message-area--list').append('<li>'+item+'</li>');
});
[x] CSS.$messageList = $('.message-area--list');
$.each(tonsOfItems, function(idx, item) {
$('<li>'+item+'</li>').appendTo($messageList);
});
[ ] var tonsOfListItems = tonsOfItems.map(function(item) {
return '<li>'+item+'</li>';
});
$('.message-area--list').append(tonsOfListItems.join(''));
[ ] tonsOfItems.map(function(item) {
$('.message-area--list').append('<li>'+item+'</li>');
});-
None. All CSS selectors are compatible in jQuery.
-
You cannot use multiple class selectors such as .class1.class2.
-
You cannot use pseudoclasses such as :not or :last-of-type.
-
You cannot use IDs and classes together, such as #element.class.
<ul class="menu-first">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>[x] $('.menu-first > li')
.first()
.css('font-weight', 'bold')
.next()
.css('font-style', 'oblique');
[ ] $('.menu-first > li')
.eq(0)
.css('font-weight', 'bold')
.eq(1)
.css('font-style', 'oblique');
[ ] $('.menu-first > li')
.first()
.css('font-weight', 'bold')
.second()
.css('font-style', 'oblique');
[ ] $('.menu-first > li')
.first()
.css('font-weight', 'bold')
.after()
.css('font-style', 'oblique');<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');-
It makes the second set of menu items, not the first, bold.
-
It throws an exception on line 3.
-
It makes the first set of menu items, not the second, bold.
-
It makes all the menu items bold.
jQuery('p');-
aliases jQuery to a variable paliases
-
creates a new paragraph tag and inserts it into the body tag
-
selects all paragraphs on the page
-
loads a paragraph tag from a remote server using AJAX
<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);-
.get() retrieves a DOM element and is 0-indexed. .eq() retrieves a jQuery object and is 1-indexed.
-
.get() retrieves a DOM element and cannot be chained. .eq() retrieves a jQuery object and can be chained.
-
.get() retrieves a jQuery object and is 0-indexed. .eq() retrieves a DOM element and is 1-indexed.
-
.get() retrieves a jQuery object and can be chained. .eq() retrieves a DOM element and cannot be chained.
Q8. 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'); } );[x] event.stopPropagation();
[ ] event.preventDefault();
[ ] event.stop();
[ ] event.capture();<div id="container">
<div class="item">Here's an item</div>
</div>
$('#container').wrap('<div class="wrapper"></div>').css('border', '2px solid red');[ ] <div id="container">
<div class="wrapper" style="border: 2px solid red;">
<div class="item">Here's an item</div>
</div>
</div>
[ ] <div id="container" style="border: 2px solid red;">
<div class="wrapper">
<div class="item">Here's an item</div>
</div>
</div>
[ ] <div class="wrapper" style="border: 2px solid red;">
<div id="container">
<div class="item">Here's an item</div>
</div>
</div>
[x] <div class="wrapper">
<div id="container" style="border: 2px solid red;">
<div class="item">Here's an item</div>
</div>
</div>[ ] $.get('http://httpbin.org/delay/2')
.catch(function(response) {
// Data from first GET is here as `response`
return $.get('http://httpbin.org/delay/2');
})
.done(function(response) {
// Data from second GET is here as `response`
});[x] $.get('http://httpbin.org/delay/2')
.then(function(response) {
// Data from first GET is here as `response`
return $.get('http://httpbin.org/delay/2');
})
.then(function(response) {
// Data from second GET is here as `response`
});[ ] $.get('http://httpbin.org/delay/2', function(response1) {
// Data from first GET is here as `response1`
$.get('http://httpbin.org/delay/2', function(response2) {
// Data from second GET is here as `response2`
});
})[ ] $.get('http://httpbin.org/delay/2')
.then(function(response) {
// Data from first GET is here as `response`
return response;
})
.get('http://httpbin.org/delay/2', function(response) {
// Data from second GET is here as `response`
});<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>[ ] $('.quotes .menu-first')
[ ] $('.quotes' + '.menu-first')
[x] $('.quotes, .menu-first')
[ ] $('.quotes + .menu-first')<button>class="btn btn-primary" type="submit">Continue to checkout</button>[x] $('.btn-primary').hide();
[ ] $('.btn-primary:visible').not();
[ ] $('.btn-primary').visibility(false);
[ ] $('.btn-primary').show(false);<div id="elements"></div>[ ] $("#elements").append($('<p>', {
"class": 'appended',
'text': "As an attribute object"
}));
[x] $("#elements").append(<p className="appended">As a JSX object</p>));
[ ] $("#elements").append($('<p class="appended">As an HTML string</p>'));
[ ] var p = document.createElement('p');
var text = document.createTextNode('As a DOM element');
p.appendChild(text);
$("#elements").append(p);-
Read the change notes for the newer version of jQuery, fix all scripts, install the newer version, and fix anything that remains broken.
-
Install the newer version of jQuery, go through each script one by one, and fix what looks broken.
-
Install the newer version of jQuery at the same time, and use
jQuery.noConflict()on pages that need the older version. -
Install the newer version of jQuery as well as its Migrate plugin, fix all warnings, and uninstall the Migrate plugin.
$('#menu').addClass(function() {
return $('body').attr('class');
});-
It adds all classes found on the #menu element to the body tag.
-
It adds all classes found on the body element to the #menu element.
-
It adds the first class found on the body element to the #menu element.
-
It replaces any classes on the #menu element with all classes from the body tag.
Q16. Working with AJAX, you may have a piece of code that should not be run until after multiple AJAX calls have completed successfully. Suppose you need to call two external services for JSON data—a list of students and a list of classes—after which you will perform some manipulations on a page. What is the preferred way for dealing with this scenario?
https://example.com/json-api/students
https://example.com/json-api/classes[ ] $.bind(
$.get('https://example.com/json-api/students'),
$.get('https://example.com/json-api/classes')
).done(function(studentRequest, classRequest) {
// the rest of the code goes here
});
[x] $.when(
$.get('https://example.com/json-api/students'),
$.get('https://example.com/json-api/classes')
).done(function(studentRequest, classRequest) {
// the rest of the code goes here
});
[ ] $.get([
'https://example.com/json-api/students',
'https://example.com/json-api/classes'
], function(studentRequest, classRequest) {
// the rest of the code goes here
});
[ ] $.ajax('https://example.com/json-api/students', {
success: function(studentRequest) {
$.ajax('https://example.com/json-api/classes', {
success: function(classRequest) {
// the rest of the code goes here
});Q17. 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?
});
[ ] $target.filter('img')
[ ] $('img').is($target)
[ ] $($target.get(0) + ':image')
[x] $target.is('img')Q18. Given this HTML code, how can you use one line to show the button if it is hidden, and hide it if it is visible?
<button class="btn btn-primary" type="submit">Continue to checkout</button>[ ] $('.btn-primary').css({ display: 'block' });
[ ] $('.btn-primary').showHide();
[ ] $('.btn-primary').not(':visible').show();
[x] $('.btn-primary').toggle();<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">[ ] $('input[value!="blimp"]');
[x] $('input[value="blimp"]');
[ ] $('input:checkbox').attr('value', 'blimp');
[ ] $('checkbox').val('blimp');-
jQuery.extend, which can merge objects and make complete deep copies of objects
-
jQuery.isMobile, which can tell whether the user is using a mobile browser
-
jQuery.isNumeric, which can check whether its argument is, or looks like, a number
-
jQuery.each, a general purpose iterator for looping over arrays or objects
[ ] $('a').href('http://www.example.com')
[ ] $('a').attribute('href', 'http://www.example.com')
[ ] $('a').data('href', 'http://www.example.com')
[x] $('a').attr('href', 'http://www.example.com').success {
color: green;
background: #ddffdd;
}
<div class="feedback">
Thank you for answering this survey.
</div>[ ] $('.feedback').hasClass('.success');
[ ] $.css('.feedback', '.success');
[x] $('.feedback').addClass('.success');
[ ] $('.feedback').css('.success');[x] $('header').html() returns the inner HTML of the header. $('header').text() returns only the text
[ ] $('header').html() returns only the HTML tags used, without the text. $('header').text() returns only the text
[ ] $('header').html() strips all HTML from the header. $('header').text() always returns an empty string.
[ ] $('header').html() returns all headers in an HTML document. $('header').text() the first line of a text file.[ ] $('body').on('ajaxComplete', function() { console.count('An AJAX request completed'); });
[x] $(document).ajaxComplete(function() { console.count('An AJAX request completed'); });
[ ] $(document).on('ajax.complete', function() { console.count('An AJAX request completed'); });
[ ] $('body').ajaxComplete(function() { console.count('An AJAX request completed'); });\$('#ball').click(function() {
// Our code goes here
});[x] $(this).animate({ top: '+=100', left: '+=100', }, { duration: 600, complete: function() { $(this).animate({ top: '-=100', left: '-=100', }, 600) } });
[ ] $(this).animate({ top: '-=100', left: '-=100', }, 600, function() { $(this).animate({ top: '+=100', left: '+=100', }, 600) } });
[ ] $(this).animate({ top: '=100', left: '=100', }, { duration: 600, complete: function() { $(this).animate({ top: 0, left: 0, }, 600) } });
[ ] $(this).animate({ top: '100', left: '100', }, 600, function() { $(this).animate({ top: 0, left: 0, }, 600) } });// what goes here?
// ... do some other hidden work on $example
$example.prependTo(document.body);[x] var $example = $('#example').detach();
[ ] var $example = $('#example').remove();
[ ] var $example = $('#example').addBack().empty();
[ ] var $example = $('#example').clone();[x] Set the option "global" to false.
[ ] Set a success callback that returns false.
[ ] Set the type option to "none."
[ ] Set the processData option to false.
<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>[x] $('.animate-me').offset();
[ ] $('.animate-me').each();
[ ] $('.animate-me').position();
[ ] $('.animate-me').offsetParent();`$.fn.customPlugin = function() {
// Point 1
return this.each(function() {
// Point 2
})
}
$(document).customPlugin();[ ] In this case, they mean the same thing: a DOM element.
[ ] At Point 1, this means a jQuery object. [ ] Point 2, it means a DOM element.
[ ] In this case, they mean the same thing: a jQuery object.
[x] At Point 1, this means a DOM element. At Point 2, it means a jQuery object.[ ] $('.form-item').set('value', '555-1212');
[x] $('.form-item').val('555-1212');
[ ] $('.form-item').data('value', '555-1212');
[ ] $.val('.form-item', '555-1212');-[ ] It is a utility function that selects the first element from the document.
-[x] It is an alias to the main core method of jQuery itself—the same as writing jQuery().
-[ ] It is a shorter way to write document.getElementById().
-[ ] It is a utility function that selects the last element from the document.
<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">[ ] $('input:checkbox').attr('value', '*sun*');
[ ] $('checkbox').val(/sun/);
[ ] $('input[value|="sun"]');
[x] $('input[value*="sun"]');