Jquery

What's the difference between these two snippets?

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

1.

Only the second one will work; jQuery does not have a function called `.on`.

2.

The second snippet will not function.

3.

Nothing `.click(function)` is shorter way to write `.on('click', function)`.

4.

The first snippet will execute for every button on the page, the second will only apply to the first button.

Q 1 / 67

Jquery

What does the following line of code do?

`jQuery('p')`

1.

Loads a paragraph tag from a remote server using AJAX

2.

Aliases jQuery to a variable p

3.

Selects all paragraphs on the page

4.

Creates a new paragraph tag and inserts it into the body tag

Q 2 / 67

Jquery

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

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

1.

`$('.btn-primary').toggle();`

2.

`$('.btn-primary').showHide();`

3.

`$('.btn-primary').not(':visible').show();`

4.

`$('.btn-primary').css({ display: 'block'});`

Q 3 / 67

Jquery

Working with AJAX, we may run into situations where a piece of code should not be run until after multiple AJAX calls have completed successfully. Say we need to call two external services for JSON data (a list of students, and a list of classes). And only after retrieving those data will we 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` js $.get(   ['https://example.com/json-api/students', 'https://example.com/json-api/classes'],   function (studentRequest, classRequest) {     // the rest of the code goes here   }, );  js $.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 });  js $.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 });  js $.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       },     });   }, });

1.

js
$.get(
  ['https://example.com/json-api/students', 'https://example.com/json-api/classes'],
  function (studentRequest, classRequest) {
    // the rest of the code goes here
  },
);

2.

js
$.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
});

3.

js
$.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
});

4.

js
$.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
      },
    });
  },
});

Q 4 / 67

Jquery

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

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

1.

.get() retrieves a DOM element, and can't be chained, eq() retrieves a jQuery object, and can be chained.

2.

.get() retrieves a jQuery object, and can't be chained, eq() retrieves a DOM element, and can be chained.

3.

.get() retrieves a jQuery object, and is zero-indexed, eq() retrieves a DOM element, and is 1-indexed.

4.

.get() retrieves a DOM element, and is zero-indexed, eq() retrieves a jQuery object, and is 1-indexed.

Q 5 / 67

Jquery

Suppose we want to have a ball created from an HTML element (id=ball) move down and to the right from its original location when clicked, and move back into its original place when finished. Given a starting point of this, which of these snippets would accomplish that goal?

js $('#ball').click(function () {   // Our code goes here });  js $(this).animate(   { top: '+=100', left: '+=100' },   {     duration: 600,     complete: function () {       $(this).animate({ top: '-=100', left: '-=100' }, 600);     },   }, );  js $(this).animate({ top: '-=100', left: '-=100' }, 600, function () {   $(this).animate({ top: '+=100', left: '+=100' }, 600); });  js $(this).animate(   { top: '=100', left: '=100' },   {     duration: 600,     complete: function () {       $(this).animate({ top: 0, left: 0 }, 600);     },   }, );  js $(this).animate({ top: '100', left: '100' }, 600, function () {   $(this).animate({ top: 0, left: 0 }, 600); });

1.

js
$(this).animate(
  { top: '+=100', left: '+=100' },
  {
    duration: 600,
    complete: function () {
      $(this).animate({ top: '-=100', left: '-=100' }, 600);
    },
  },
);

2.

js
$(this).animate({ top: '-=100', left: '-=100' }, 600, function () {
  $(this).animate({ top: '+=100', left: '+=100' }, 600);
});

3.

js
$(this).animate(
  { top: '=100', left: '=100' },
  {
    duration: 600,
    complete: function () {
      $(this).animate({ top: 0, left: 0 }, 600);
    },
  },
);

4.

js
$(this).animate({ top: '100', left: '100' }, 600, function () {
  $(this).animate({ top: 0, left: 0 }, 600);
});

Q 6 / 67

Jquery

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

css .success {   color: green;   background: #ddffdd; }  html <div class="feedback">Thank you for answering this survey.</div>

1.

`$('.feedback').hasClass('.success');`

2.

`$.css('.feedback', '.success')`;

3.

`$('.feedback').addClass('success');`

4.

`$('.feedback').css('.success');`

Q 7 / 67

Jquery

The following page snippet includes a couple of messages in a list, and a code snippet that retrieves a few hundred messages from an API endpoint using AJAX. How can you add these new items to the .message-area--list element in the most performant way?

html <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 });  js tonsOfItems.map(function (item) {   $('.message-area--list').append('<li>' + item + '</li>'); });  js var tonsOfListItems = tonsOfItems.map(function (item) {   return '<li>' + item + '</li>'; }); $('.message-area--list').append(tonsOfListItems.join(''));  js CSS.$messageList = $('.message-area--list'); $.each(tonsOfItems, function (idx, item) {   $('<li>' + item + '</li>').appendTo($messageList); });  js $.each(tonsOfItems, function (idx, item) {   $('.message-area--list').append('<li>' + item + '</li>'); });

1.

js
tonsOfItems.map(function (item) {
  $('.message-area--list').append('<li>' + item + '</li>');
});

2.

js
var tonsOfListItems = tonsOfItems.map(function (item) {
  return '<li>' + item + '</li>';
});
$('.message-area--list').append(tonsOfListItems.join(''));

3.

js
CSS.$messageList = $('.message-area--list');
$.each(tonsOfItems, function (idx, item) {
  $('<li>' + item + '</li>').appendTo($messageList);
});

4.

js
$.each(tonsOfItems, function (idx, item) {
  $('.message-area--list').append('<li>' + item + '</li>');
});

Q 8 / 67

Jquery

What is jQuery?

1.

jQuery is a bridge between Java and Javascript that makes native apps easier to write.

2.

jQuery is a plugin for JavaScript that makes database queries easier to write.

3.

jQuery is a collection of JavaScript functions that makes finding and manipulating elements on a page, AJAX, and other things easier.

4.

jQuery is a Chrome extension that allows users to create their own extensions with just a few lines of JavaScript.

Q 9 / 67

Jquery

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?

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

1.

this needs to be wrapped, like `$(this)`, in order to be chained in a plugin.

2.

jQuery plugins can't be safely authored in strict mode.

3.

In order to be used by other code, plugins need to be added to the global namespace, not wrapped in a function expression.

4.

Our plugin should extend jQuery.fn, not jQuery itself.

Q 10 / 67

Jquery

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

1.

Just before the closing body tag, because we want to avoid blocking other resources from loading, and we use the ready method to make sure our code fires after the DOM is ready

2.

Using the highest version number possible because only jQuery 3 and up are compatible with Internet Explorer 7

3.

In the head tag because we want jQuery available as soon as possible

4.

From a CDN because we want to be able to use jQuery online or offline

Q 11 / 67

Jquery

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

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

1.

`$('.btn-primary').hide();`

2.

`$('.btn-primary:visible').not();`

3.

`$('.btn-primary').visibility(false);`

4.

`$('.btn-primary').show(false);`

Q 12 / 67

Jquery

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

1.

`$('header').html()` returns the inner HTML of the header. `$('header').text()` returns only the text

2.

`$('header').html()` returns only the HTML tags used, without the text. `$('header').text()` returns only the text

3.

`$('header').html()` strips all HTML from the header. `$('header').text()` always returns an empty string.

4.

`$('header').html()` returns all headers in an HTML document. `$('header').text()` the first line of a text file.

Q 13 / 67

Jquery

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?

1.

$.extend

2.

$.clone

3.

$.fn.extend

4.

$.merge

Q 14 / 67

Jquery

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?

html <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>

1.

`$('button').on('click.myApp', (function() { $('input[type=select]').trigger('click'); });`

2.

`$('button').on('click', (function() { $('input[type=select]').click()); });`

3.

`$('button').trigger(function() { $('input[type=select]').click(); });`

4.

`$('button').click(function() { $('input[type=select]').click(); });`

Q 15 / 67

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`?

html <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>

1.

`$('.animate-me').offset();`

2.

`$('.animate-me').each();`

3.

`$('.animate-me').position();`

4.

`$('.animate-me').offsetParent();`

Q 16 / 67

Jquery

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

1.

`jQuery.sub`

2.

`jQuery.ajaxTransport`

3.

`jQuery.Deferred`

4.

`jQuery.proxy`

Q 17 / 67

Jquery

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

1.

Referring to lists of items, they are 1-indexed (like CSS), not 0-indexed (like JavaScript).

2.

They don't return the jQuery object, and cannot be chained.

3.

They can return the wrong items if the DOM was recently manipulated.

4.

They are not part of CSS, so they don't get the performance benefits of passing through the `document.querySelectorAll`.

Q 18 / 67

Jquery

jQuery's AJAX functions return objects that implement the Promise API. As a result, you can chain promises and avoid nested callbacks. What does that look like?

js $.get('hhttp://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'   });  js $.get('hhttp://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'   });  js $.get('hhttp://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'   }); });  js $.get('hhttp://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'   });

1.

js
$.get('hhttp://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'
  });

2.

js
$.get('hhttp://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'
  });

3.

js
$.get('hhttp://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'
  });
});

4.

js
$.get('hhttp://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'
  });

Q 19 / 67

Jquery

You want to have a ball that is created from an HTML element (id=ball) move down and to the right of its original location when clicked, and move back to its original place when finished. What snippet, added to the code below, would do this?

js $('#ball').click(function () {   // Our code goes here });  js $(this).animate(   {     top: '-=100',     left: '-=100',   },   600,   function () {     $(this).animate(       {         top: '+=100',         left: '+=100',       },       600,     );   }, );  js $(this).animate(   {     top: '+=100',     left: '+=100',   },   {     duration: 600,     complete: function () {       $(this).animate(         {           top: '-=100',           left: '-=100',         },         600,       );     },   }, );  js $(this).animate(   {     top: 100,     left: 100,   },   600,   function () {     $(this).animate(       {         top: 0,         left: 0,       },       600,     );   }, );  js $(this).animate(   {     top: 100,     left: 100,   },   {     duration: 600,     complete: function () {       $(this).animate(         {           top: 0,           left: 0,         },         600,       );     },   }, );

1.

js
$(this).animate(
  {
    top: '-=100',
    left: '-=100',
  },
  600,
  function () {
    $(this).animate(
      {
        top: '+=100',
        left: '+=100',
      },
      600,
    );
  },
);

2.

js
$(this).animate(
  {
    top: '+=100',
    left: '+=100',
  },
  {
    duration: 600,
    complete: function () {
      $(this).animate(
        {
          top: '-=100',
          left: '-=100',
        },
        600,
      );
    },
  },
);

3.

js
$(this).animate(
  {
    top: 100,
    left: 100,
  },
  600,
  function () {
    $(this).animate(
      {
        top: 0,
        left: 0,
      },
      600,
    );
  },
);

4.

js
$(this).animate(
  {
    top: 100,
    left: 100,
  },
  {
    duration: 600,
    complete: function () {
      $(this).animate(
        {
          top: 0,
          left: 0,
        },
        600,
      );
    },
  },
);

Q 20 / 67

Jquery

The way `.wrap()` works is sometimes misunderstood. Given the DOM and jQuery snippets below, what does the modified DOM snippet look like?

html <div id="container">   <div class="item">Here's an item</div> </div>  js $('#container').wrap('<div class="wrapper"></div>').css('border', '2px solid red');  html <div class="wrapper" style="border: 2px solid red;">   <div id="container">     <div class="item">Here's an item</div>   </div> </div>  html <div class="wrapper">   <div id="container" style="border: 2px solid red;">     <div class="item">Here's an item</div>   </div> </div>  html <div id="container" style="border: 2px solid red;">   <div class="wrapper">     <div class="item">Here's an item</div>   </div> </div>  html <div id="container">   <div class="wrapper" style="border: 2px solid red;">     <div class="item">Here's an item</div>   </div> </div>

1.

html
<div class="wrapper" style="border: 2px solid red;">
  <div id="container">
    <div class="item">Here's an item</div>
  </div>
</div>

2.

html
<div class="wrapper">
  <div id="container" style="border: 2px solid red;">
    <div class="item">Here's an item</div>
  </div>
</div>

3.

html
<div id="container" style="border: 2px solid red;">
  <div class="wrapper">
    <div class="item">Here's an item</div>
  </div>
</div>

4.

html
<div id="container">
  <div class="wrapper" style="border: 2px solid red;">
    <div class="item">Here's an item</div>
  </div>
</div>

Q 21 / 67

Jquery

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

html <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>

1.

`$('.quotes + .menu-first')`

2.

`$('.quotes .menu-first')`

3.

`$('.quotes, .menu-first')`

4.

`$('.quotes' + '.menu-first')`

Q 22 / 67

Jquery

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?

1.

"fast"

2.

"extreme"

3.

2000

4.

"slow"

Q 23 / 67

Jquery

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?

1.

`$('#dialog').classToggle('bounce')`

2.

`$('#dialog.bounce').removeClass().addClass()`

3.

`$('#dialog').addOrRemoveClass('bounce')`

4.

`$('#dialog').toggleClass('bounce')`

Q 24 / 67

Jquery

What is the main difference between selectors and filters?

1.

Selectors are used to refine the content that filters have been applied to.

2.

Selectors are used to find and select content in a page. Filters are used to refine the results of selectors.

3.

Filters are used to remove content from the page. Selectors are used to add content to the page

4.

There is no real difference. They are both used to build up lists of page content.

Q 25 / 67

Jquery

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

1.

`$('#canvas').on('click.right', function(){ console.log('Handled a right-click') });`

2.

`$('#canvas').on('contextual', function(){ console.log('Handled a right-click') });`

3.

`$('#canvas').on('contextmenu', function(){ console.log('Handled a right-click') });`

4.

`$('#canvas').on('rightclick', function(){ console.log('Handled a right-click') });`

Q 26 / 67

Jquery

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

1.

`$('p').count()`

2.

`$('p').length`

3.

`$('*').find('p')`

4.

`$('p').length()`

Q 27 / 67

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?

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

1.

At Point 1, `this` means a jQuery object. At Point 2, it means a DOM element.

2.

In this case, they mean the same thing: a jQuery object.

3.

In this case, they mean the same thing: a DOM element.

4.

At Point 1, `this` means a DOM element. At Point 2, it means a jQuery object.

Q 28 / 67

Jquery

How can you make the first list item bold and the next item oblique, in a single statement chain?

html <ul class="menu-first">   <li>Item 1</li>   <li>Item 2</li>   <li>Item 3</li>   <li>Item 4</li> </ul>  js $('.menu-first > li').eq(0).css('font-weight', 'bold').eq(1).css('font-style', 'oblique');  js $('.menu-first > li').first().css('font-weight', 'bold').after().css('font-style', 'oblique');  js $('.menu-first > li').first().css('font-weight', 'bold').second().css('font-style', 'oblique');  js $('.menu-first > li').eq(0).css('font-weight', 'bold').next().css('font-style', 'oblique');

1.

js
$('.menu-first > li').eq(0).css('font-weight', 'bold').eq(1).css('font-style', 'oblique');

2.

js
$('.menu-first > li').first().css('font-weight', 'bold').after().css('font-style', 'oblique');

3.

js
$('.menu-first > li').first().css('font-weight', 'bold').second().css('font-style', 'oblique');

4.

js
$('.menu-first > li').eq(0).css('font-weight', 'bold').next().css('font-style', 'oblique');

Q 29 / 67

Jquery

Which CSS selectors can you NOT use in jQuery?

1.

You cannot use multiple class selectors such as `.class1.class2`.

2.

You cannot use pseudo-classes such as `:not` or `:last-of-type`.

3.

You cannot use IDs and classes together, such as `#element.class`.

4.

None. All CSS selectors are compatible in jQuery.

Q 30 / 67

Jquery

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?

html <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>  js $('.leaf').click(function (event) {   console.log('Sub Item 1 got a click'); }); $('#main-menu').click(function (event) {   console.log('Main menu got a click'); });

1.

`event.capture();`

2.

`event.stopPropagation();`

3.

`event.preventDefault();`

4.

`event.stop();`

Q 31 / 67

Jquery

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?

html <div id="sidebar">   <img src="fancy-button.png" alt="Pick Me" />   <input type="text" placeholder="Fill in something" /> </div>  js $('#sidebar').click(function (evt) {   var $target = $(evt.target);   // What goes here? });

1.

`$($target.get(0) + ':image')`

2.

`$('img').is($target)`

3.

`$target.filter('img')`

4.

`$target.is('img')`

Q 32 / 67

Jquery

There are many ways to create elements that can be added to the page. Which answer is NOT one of those ways, assuming you have the following on the page?

html <div id="elements"></div>  js $('#elements').append($('<p class="appended">As an HTML string</p>'));  js var p = document.createElement('p'); var text = document.createTextNode('As a DOM element'); p.appendChild(text); $('#elements').append(p);  js $('#elements').append(<p class="appended">As a JSX object</p>);  js $('#elements').append(   $('<p>', {     class: 'appended',     text: 'As an attribute object',   }), );

1.

js
$('#elements').append($('<p class="appended">As an HTML string</p>'));

2.

js
var p = document.createElement('p');
var text = document.createTextNode('As a DOM element');
p.appendChild(text);
$('#elements').append(p);

3.

js
$('#elements').append(<p class="appended">As a JSX object</p>);

4.

js
$('#elements').append(
  $('<p>', {
    class: 'appended',
    text: 'As an attribute object',
  }),
);

Q 33 / 67

Jquery

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

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

1.

It adds the first class found on the body element to the #menu element.

2.

It adds all classes found on the #menu element to the body tag.

3.

It replaces any classes on the #menu element with all classes from the body tag.

4.

It adds all classes found on the body element to the #menu element.

Q 34 / 67

Jquery

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?

1.

Install the newer version of jQuery, go through each script one by one, and fix what looks broken.

2.

Read the change notes for the newer version of jQuery, fix all scripts, install the newer version, and fix anything that remains broken.

3.

Install the newer version of jQuery as well as its Migrate plugin, fix all warnings, and uninstall the Migrate plugin.

4.

Install the newer version of jQuery at the same time, and use `jQuery.noConflict()` on pages that need the older version.

Q 35 / 67

Jquery

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?

1.

`$('a').attribute('href', 'http://www.example.com')`

2.

`$('a').attr('href', 'http://www.example.com')`

3.

`$('a').data('href', 'http://www.example.com')`

4.

`$('a').href('http://www.example.com')`

Q 36 / 67

Jquery

What does `$()` mean in jQuery?

1.

It is an alias to the main core method of jQuery itself—the same as writing jQuery().

2.

It is a utility function that selects the first element from the document.

3.

It is a shorter way to write `document.getElementById()`.

4.

It is a utility function that selects the last element from the document.

Q 37 / 67

Jquery

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?

1.

`jQuery.each`, a general purpose iterator for looping over arrays or objects

2.

`jQuery.isNumeric`, which can check whether its argument is, or looks like, a number

3.

`jQuery.extend`, which can merge objects and make complete deep copies of objects

4.

`jQuery.isMobile`, which can tell whether the user is using a mobile browser

Q 38 / 67

Jquery

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

html <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" />

1.

`$('checkbox').val(/sun/);`

2.

`$('input[value*="sun"]');`

3.

`$('input[value|="sun"]');`

4.

`$('input:checkbox').attr('value', '*sun*');`

Q 39 / 67

Jquery

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

1.

Set the type option to "none".

2.

Set the processData option to false.

3.

Set a success callback that returns false.

4.

Set the option "global" to false.

Q 40 / 67

Jquery

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

1.

`$.val('.form-item', '555-1212');`

2.

`$('.form-item').val('555-1212');`

3.

`$('.form-item').data('value', '555-1212');`

4.

`$('.form-item').set('value', '555-1212');`

Q 41 / 67

Jquery

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

1.

`$('body').ajaxComplete(function() { console.count('An AJAX request completed'); });`

2.

`$(document).on('ajax-complete', function() { console.count('An AJAX request completed'); });`

3.

`$('body').on('ajaxComplete', function() { console.count('An AJAX request completed'); });`

4.

`$(document).ajaxComplete(function() { console.count('An AJAX request completed'); });`

Q 42 / 67

Jquery

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

html <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" />

1.

`$('input[value="blimp"]');`

2.

`$('input[value!="blimp"]');`

3.

`$('checkbox').val('blimp');`

4.

`$('input:checkbox').attr('value', 'blimp');`

Q 43 / 67

Jquery

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

html <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>  js var m = $('.menu'),   sm = $('.submenu'); m.add(sm); m.css('font-weight', 'bold');

1.

It makes all the menu items bold.

2.

It throws an exception on line 3.

3.

It makes the first set of menu items, not the second, bold.

4.

It makes the second set of menu items, not the first, bold.

Q 44 / 67

Jquery

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?

html <div id="type" style="font: 1em/1.5 helvetica, arial, sans-serif; background: #ffc; padding: 0">   Animate me! </div>  js $('#type').animate(   {     fontSize: '+=1em',   },   3000, );

1.

jQuery does not support ems and will make the type 1 pixel larger instead of 1 em larger.

2.

jQuery cannot override CSS in a style attribute, so the font size will not change.

3.

The font size was set with a shorthand property, so jQuery will not animate the font size at all.

4.

The font size was set with a shorthand property, so jQuery will start the animation from 0 instead of from 1 em.

Q 45 / 67

Jquery

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

1.

The `clone()` function may ignore data attributes on the original elements.

2.

The `clone()` function may result in elements with duplicate ID attributes.

3.

The `clone()` function may remove CSS classes from the cloned elements.

4.

The `clone()` function may not respect the attribute order of the original elements.

Q 46 / 67

Jquery

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

1.

The jQuery script tag must come first, followed by the plugin, followed by your custom scripts, all preferably at or near the bottom of the page.

2.

Your custom scripts must appear first in the document `<head>`, followed by jQuery, followed by the plugin.

3.

The jQuery script tag and the plugin script tag must appear in the document `<head>`, and your custom scripts can follow anywhere on the page.

4.

The jQuery script tag must appear in the document `<head>`, but the plugin and your custom scripts can appear anywhere else in any order.

Q 47 / 67

Jquery

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

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

1.

The code inside them can manipulate the DOM safely, knowing the browser has loaded it fully.

2.

The code inside them can manipulate images on the page safely, knowing they have fully downloaded to the browser.

3.

The code inside them will be run exactly once per user session.

4.

The code inside them is not aware of the DOM.

Q 48 / 67

Jquery

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

1.

self

2.

target

3.

object

4.

source

Q 49 / 67

Jquery

Which describes how jQuery makes working with the DOM faster?

1.

jQuery optimizes the DOM in a background thread, making updates faster.

2.

jQuery avoids using the DOM at all.

3.

jQuery uses a virtual DOM that batches updates, making inserts and deletes faster.

4.

jQuery code to perform DOM manipulation is shorter and easier to write, but does not make DOM operations faster.

Q 50 / 67

Jquery

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?

js $('.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');

1.

The `.css()` method accepts only an object, not two separate arguments. This will trigger an exception that should be caught.

2.

The `$('.item')` selection is being made several times. This should be cached in a variable for (however slightly) better performance and easier maintainability.

3.

The call to `.parents()` is in an inefficient place.

4.

All the calls to `$('.item')` should be chained together as a single executable line for better performance.

Q 51 / 67

Jquery

Which choice is an example of statement chaining?

1.

`var $p = $('p'); console.log($p.length);`

2.

`$('p').find('a').children('li');`

3.

`$('p > a > li');`

4.

`$('p'); $('a'); $('li');`

Q 52 / 67

Jquery

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

1.

`$('.element').attr('class', 'active')`

2.

`$('.element').with('.active')`

3.

`$('.element').hasClass('active')`

4.

`$('.active').then()`

Q 53 / 67

Jquery

jQuery has a main function for handling AJAX, and several shorthand function including `load()` that make calling that main function easier. Given this HTML snippet, how can you insert only the second snippet from the source.html file (`div#one`) into the `#load-me` div on-demand via AJAX?

html <div id="load-me">This area will be replaced with AJAX loaded content.</div> <div id="one">   <h1>First Piece</h1>   <p>Lorem ipsum duis maximus quam condimentum dolor eleifend scelerisque.</p> </div> <div id="two">   <h1>Second Piece</h1>   <p>Lorem ipsum proin facilisis augue in risus interdum ornare.</p> </div>

1.

`$('#load-me').get('source.html#one');`

2.

`$('#load-me').get('source.html #one');`

3.

`$('#load-me').load('source.html #one');`

4.

`$('#load-me').load('source.html', '#one');`

Q 54 / 67

Jquery

Given this HTML list and subsequent two lines of jQuery, what is the difference in the behavior of `.closest()` and `.parents()`?

html <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>  js $('.leaf').closest('.items'); $('.leaf').parents('.items');

1.

`.closest()` returns `.leaf` and `#main-menu`; `.parents()` returns `#main-menu` and `#sub-menu`.

2.

`.closest()` returns `.leaf` and `#sub-menu`; `.parents()` returns `#main-menu` and `#sub-menu`.

3.

`.closest()` returns only `#main-menu`; `.parents()` returns `#main-menu` and `#sub-menu`.

4.

`.closest()` returns only `#sub-menu`; `.parents()` returns `#main-menu` and `#sub-menu`.

Q 55 / 67

Jquery

What does this line of code do?

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

1.

selects the first list item inside all unordered lists on the page

2.

selects the first list item inside the first unordered list on the page

3.

selects the first element inside any list items on the page

4.

creates a predefined CSS selector that can be reused later

Q 56 / 67

Jquery

Below is a list of items that you want to be clickable and an event handler function. How can you assign the event handler to every item in the list in a way that is most performant, and also that ensures that the handler is called even if more items are added to the list programmatically?

html <ul class="clickable-list">   <li>First Item</li>   <li>Second Item</li>   <li>Third Item</li>   <li>Fourth Item</li>   <li>Fifth Item</li> </ul>  js function listResponder(evt) {   console.log('You clicked a list item that says', evt.target.innerText); }

1.

`$('.clickable-list').click(listResponder);`

2.

`$('.clickable-list').on('click', 'li', listResponder);`

3.

`$('.clickable-list').on('click, append', listResponder);`

4.

`$('.clickable-list').each(function() { $(this).click(listResponder); });`

Q 57 / 67

Jquery

What is the difference between $('p').find('a') and $('p').children('a')?

**Explanation**:`Given a jQuery object that represents a set of DOM elements, the .find() method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements. The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree.`

1.

`find() traverses only one level down, whereas children() selects anything inside the original element`

2.

`$('p').find('a') finds all paragraphs inside links, whereas $('p').children('a') finds links within paragraph tags`

3.

`.find() always searches the entire DOM tree, regardless of the original selection .children() searches only the immediate childern of an element`

4.

`children() traverses only one level down, whereas find() selects anything inside the original element`

Q 58 / 67

Jquery

Consider the following markup, used to lay out three balls on the page, all hidden. How can you select the green ball, make it faded in over the course of three seconds, and log a console message when the animation has finished?

html <div class="balls">   <div class="ball ball--red" style="display: none"></div>   <div class="ball ball--green" style="display: none"></div>   <div class="ball ball--blue" style="display: none"></div> </div>  JavaScript $('.ball--green').fadeIn(3000, function(){     console.log("Animation is done!"); });  JavaScript $('.ball--green').fade('in',3000).done(function(){     console.log("Animation is done!"); });  JavaScript $('.ball--green').fadeIn(3).console().log("Animation is done!");  JavaScript $('.ball--green').fadeIn("3s", function(){     console.log("Animation is done!"); });  `Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used.`

1.

JavaScript
$('.ball--green').fadeIn(3000, function(){
    console.log("Animation is done!");
});

2.

JavaScript
$('.ball--green').fade('in',3000).done(function(){
    console.log("Animation is done!");
});

3.

JavaScript
$('.ball--green').fadeIn(3).console().log("Animation is done!");

4.

JavaScript
$('.ball--green').fadeIn("3s", function(){
    console.log("Animation is done!");
});

Q 59 / 67

Jquery

Why might you use custom events instead of shared helper functions? For example

JavaScript $(document).on('myCustomEvent', function(){     // act on my custom event }); //and later... $(document).trigger('myCustomEvent');  `Instead of focusing on the element that triggers an action, custom events put the spotlight on the element being acted upon. This brings a bevy of benefits, including: Behaviors of the target element can easily be triggered by different elements using the same code. Behaviors can be triggered across multiple, similar, target elements at once. Behaviors are more clearly associated with the target element in code, making code easier to read and maintain.`

1.

`Custom events are at least an order of magnitude faster than helper functions`

2.

`Custom events can be listened for and acted upon across one or more scripts without needing to keep helper functions in scope`

3.

`Handler functions for custom events are less likely to be mangled by minification and obfuscation build tools`

4.

`It is easier to write documentation for custom events than it is for helper functions`

Q 60 / 67

Jquery

In the HTML and JavaScript below, the animations will all fire at once. How can you make them fire in sequence instead?

html <div id="element-1" class="animel"></div> <div id="element-2" class="animel"></div> <div id="element-3" class="animel"></div> $('#element-1').animate({ top: '+=100' }); $('#element-2').animate({ top: '+=100' }); $('#element-3').animate({ top: '+=100' });  JavaScript $('#element-1').animate({ top: '+=100' })     .pushStack('#element-2')     .animate({ top: '+=100' })     .pushStack('#element-3').animate({ top: '+=100' })  JavaScript $('#element-1').animate({ top: '+=100' }, function() {     $('#element-2').animate({ top: '+=100' }, function() {         $('#element-3').animate({ top: '+=100' });     }) });  JavaScript $('#element-1').animate({ top: '+=100' })     .add('#element-2').animate({ top: '+=100' })     .add('#element-3').animate({ top: '+=100' })  JavaScript $('#element-1').animate({ top: '+=100' }, {queue: 'custom'}); $('#element-2').animate({ top: '+=100' }, {queue: 'custom'}); $('#element-3').animate({ top: '+=100' }, {queue: 'custom'}); $('custom').dequeue();  `the .animate() method can take in a function to call once the animation is complete, called once per matched element. Which is called the complete option for the animate method`

1.

JavaScript
$('#element-1').animate({ top: '+=100' })
    .pushStack('#element-2')
    .animate({ top: '+=100' })
    .pushStack('#element-3').animate({ top: '+=100' })

2.

JavaScript
$('#element-1').animate({ top: '+=100' }, function() {
    $('#element-2').animate({ top: '+=100' }, function() {
        $('#element-3').animate({ top: '+=100' });
    })
});

3.

JavaScript
$('#element-1').animate({ top: '+=100' })
    .add('#element-2').animate({ top: '+=100' })
    .add('#element-3').animate({ top: '+=100' })

4.

JavaScript
$('#element-1').animate({ top: '+=100' }, {queue: 'custom'});
$('#element-2').animate({ top: '+=100' }, {queue: 'custom'});
$('#element-3').animate({ top: '+=100' }, {queue: 'custom'});
$('custom').dequeue();

Q 61 / 67

Jquery

Given this checkbox, how can you determine whether a user has selected or cleared the checkbox?

`<input type="checkbox" id="same-address" checked>`

1.

by checking the value of `$('#same-address').val()`

2.

by checking the value of `$('#same-address').prop('checked')`

3.

by checking the value of `$('#same-address').attr('checked')`

4.

by checking the value of `$('#same-address').checked`

Q 62 / 67

Jquery

In some projects, jQuery is not included as a file with an obvious version number (if it has been run through a minifier or other code bundler, for example). How can you detect programmatically what version of jQuery is active?

1.

`jQuery.version()`

2.

`jQuery.jquery`

3.

`jQuery.prototype.version`

4.

`jQuery.fn.jquery`

Q 63 / 67

Jquery

Given this snippet of HTML, how can you get the value of the text field using jQuery?

`<input type="text" class="form-control" id="firstName" placeholder="" value="" required="">` `all the listed selectors will target the text field since it has a type=text, a class=form-control, and an id=firstName`

1.

`$('input[type=text]').val()`

2.

`$('.form-control').val()`

3.

`all of these answers`

4.

`$('#firstName').val()`

Q 64 / 67

Jquery

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

`The target property can be the element that registered for the event or a descendant of it. It is often useful to compare event.target to this in order to determine if the event is being handled due to event bubbling.`

1.

target

2.

self

3.

source

4.

object

Q 65 / 67

Jquery

You want to write a plugin that creates a new traversal function—such as parent() and children()—and behaves like the ones jQuery includes out of the box. It needs to correctly modify the list of selections jQuery tracks internally, build up a list of additional items, and return the merged collection. What do you need to return on the last line of the function in order for this plugin to work correctly?

JavaScript $.fn.myTraverse = function() {    // ... setup    var additionalItems = [ /* some additional items for jQuery */ ];    return // return what? }  `When you call pushStack() off of the current collection, it will take the given collection and associate it to the current collection such that calling the end() method (after the plugin exits) will return the programmer to the current collection.`

1.

`return this.append(additionalItems);`

2.

`return additionalItems.appendTo(this);`

3.

`return this.pushStack(additionalItems);`

4.

`return this.add(additionalItems);`

Q 66 / 67

Jquery

Given this snippet of HTML and jQuery code, what will the result look like?

html <ul class="items">   <li class="active">Item 1</li>   <li>Item 2</li>   <li>     Item 3     <ul>       <li>Sub Item 1</li>       <li>Sub Item 2</li>     </ul>   </li> </ul>  `$('.items').find('.active').nextAll().addClass('after-active');` html <ul class="items">   <li class="active">Item 1</li>   <li class="after-active">Item 2</li>   <li class="after-active">     Item 3     <ul>       <li>Sub Item 1</li>       <li>Sub Item 2</li>     </ul>   </li> </ul>  html <ul class="items">   <li class="active">Item 1</li>   <li class="after-active">Item 2</li>   <li class="after-active">     Item 3     <ul class="after-active">       <li>Sub Item 1</li>       <li>Sub Item 2</li>     </ul>   </li> </ul>  html <ul class="items">   <li class="active">Item 1</li>   <li class="after-active">Item 2</li>   <li class="after-active">     Item 3     <ul>       <li class="after-active">Sub Item 1</li>       <li class="after-active">Sub Item 2</li>     </ul>   </li> </ul>  html <ul class="items">   <li class="active">Item 1</li>   <li class="after-active">Item 2</li>   <li class="after-active">     Item 3     <ul class="after-active">       <li class="after-active">Sub Item 1</li>       <li class="after-active">Sub Item 2</li>     </ul>   </li> </ul>  **.nextAll([selector]) method** `Gets all following siblings of each element in the set of matched elements, optionally filtered by a selector.`

1.

html
<ul class="items">
  <li class="active">Item 1</li>
  <li class="after-active">Item 2</li>
  <li class="after-active">
    Item 3
    <ul>
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
    </ul>
  </li>
</ul>

2.

html
<ul class="items">
  <li class="active">Item 1</li>
  <li class="after-active">Item 2</li>
  <li class="after-active">
    Item 3
    <ul class="after-active">
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
    </ul>
  </li>
</ul>

3.

html
<ul class="items">
  <li class="active">Item 1</li>
  <li class="after-active">Item 2</li>
  <li class="after-active">
    Item 3
    <ul>
      <li class="after-active">Sub Item 1</li>
      <li class="after-active">Sub Item 2</li>
    </ul>
  </li>
</ul>

4.

html
<ul class="items">
  <li class="active">Item 1</li>
  <li class="after-active">Item 2</li>
  <li class="after-active">
    Item 3
    <ul class="after-active">
      <li class="after-active">Sub Item 1</li>
      <li class="after-active">Sub Item 2</li>
    </ul>
  </li>
</ul>

Q 67 / 67

What's the difference between these two snippets?

What does the following line of code do?

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

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

Suppose we want to have a ball created from an HTML element (id=ball) move down and to the right from its original location when clicked, and move back into its original place when finished. Given a starting point of this, which of these snippets would accomplish that goal?

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

The following page snippet includes a couple of messages in a list, and a code snippet that retrieves a few hundred messages from an API endpoint using AJAX. How can you add these new items to the .message-area--list element in the most performant way?

What is jQuery?

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?

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

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

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

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?

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?

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`?

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

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

jQuery's AJAX functions return objects that implement the Promise API. As a result, you can chain promises and avoid nested callbacks. What does that look like?

You want to have a ball that is created from an HTML element (id=ball) move down and to the right of its original location when clicked, and move back to its original place when finished. What snippet, added to the code below, would do this?

The way `.wrap()` works is sometimes misunderstood. Given the DOM and jQuery snippets below, what does the modified DOM snippet look like?

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

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?

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 main difference between selectors and filters?

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

What is the correct way to check how many paragraphs exist on a page using 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?

How can you make the first list item bold and the next item oblique, in a single statement chain?

Which CSS selectors can you NOT use in jQuery?

There are many ways to create elements that can be added to the page. Which answer is NOT one of those ways, assuming you have the following on the page?

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

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?

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?

What does `$()` mean in jQuery?

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?

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

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

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

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

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

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

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?

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

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

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

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

Which describes how jQuery makes working with the DOM faster?

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?

Which choice is an example of statement chaining?

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

jQuery has a main function for handling AJAX, and several shorthand function including `load()` that make calling that main function easier. Given this HTML snippet, how can you insert only the second snippet from the source.html file (`div#one`) into the `#load-me` div on-demand via AJAX?

Given this HTML list and subsequent two lines of jQuery, what is the difference in the behavior of `.closest()` and `.parents()`?

What does this line of code do?

Below is a list of items that you want to be clickable and an event handler function. How can you assign the event handler to every item in the list in a way that is most performant, and also that ensures that the handler is called even if more items are added to the list programmatically?

What is the difference between $('p').find('a') and $('p').children('a')?

Consider the following markup, used to lay out three balls on the page, all hidden. How can you select the green ball, make it faded in over the course of three seconds, and log a console message when the animation has finished?

Why might you use custom events instead of shared helper functions? For example

In the HTML and JavaScript below, the animations will all fire at once. How can you make them fire in sequence instead?

Given this checkbox, how can you determine whether a user has selected or cleared the checkbox?

In some projects, jQuery is not included as a file with an obvious version number (if it has been run through a minifier or other code bundler, for example). How can you detect programmatically what version of jQuery is active?

Given this snippet of HTML, how can you get the value of the text field using jQuery?

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

Given this snippet of HTML and jQuery code, what will the result look like?

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?