linkedin-skill-assessments-quizzes

jQuery

Q1. What is the difference between these two snippets?

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

Q2. What does the following line of code do?

jQuery('p')

Q3. 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>

Q4. 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

$.get(
  ['https://example.com/json-api/students', 'https://example.com/json-api/classes'],
  function (studentRequest, classRequest) {
    // the rest of the code goes here
  },
);
$.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
});
$.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
});
$.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
      },
    });
  },
});

Q5. 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);

Q6. 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?

$('#ball').click(function () {
  // Our code goes here
});
$(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);
});

Q7. 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>

Q8. 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?

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

Q9. What is jQuery?

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

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

Q12. 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>

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

Q14. 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?

Q15. 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>

Q16. 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>

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

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

Q19. 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?

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

Q20. 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?

$('#ball').click(function () {
  // Our code goes here
});
$(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: '-=100',
          left: '-=100',
        },
        600,
      );
    },
  },
);
$(this).animate(
  {
    top: 100,
    left: 100,
  },
  600,
  function () {
    $(this).animate(
      {
        top: 0,
        left: 0,
      },
      600,
    );
  },
);
$(this).animate(
  {
    top: 100,
    left: 100,
  },
  {
    duration: 600,
    complete: function () {
      $(this).animate(
        {
          top: 0,
          left: 0,
        },
        600,
      );
    },
  },
);

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

<div id="container">
  <div class="item">Here's an item</div>
</div>
$('#container').wrap('<div class="wrapper"></div>').css('border', '2px solid red');
<div class="wrapper" style="border: 2px solid red;">
  <div id="container">
    <div class="item">Here's an item</div>
  </div>
</div>
<div class="wrapper">
  <div id="container" 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 id="container">
  <div class="wrapper" style="border: 2px solid red;">
    <div class="item">Here's an item</div>
  </div>
</div>

Q22. 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>

Q23. 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?

Q24. 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?

Q25. What is the main difference between selectors and filters?

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

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

Q28. 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();

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

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

Q30. Which CSS selectors can you NOT use in jQuery?

Q31. 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');
});

Difference between preventDefault, stopPropagation & return false

Q32. 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?
});

Q33. 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?

<div id="elements"></div>
$('#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);
$('#elements').append(<p class="appended">As a JSX object</p>);
$('#elements').append(
  $('<p>', {
    class: 'appended',
    text: 'As an attribute object',
  }),
);

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

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

Q35. 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?

Q37. What does $() mean in jQuery?

Q38. 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?

Q39. 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" />

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

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

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

Source: ajaxComplete Explanation: Note: As of jQuery version 1.8, this method should only be attached to document.

Q43. 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" />

Q44. 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');

Q45. 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,
);

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

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

Q48. 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>

Q49. Which describes how jQuery makes working with the DOM faster?

Q50. 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');

Q51. Which choice is an example of statement chaining?

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

Q53. 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?

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

Q54. 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');

Source: jQuery closest Method

Explanation: Considering current HTML code, .closest() returns only #main-menu; .parents() returns only #main-menu; cause both of them are looking for .items class which only exist in the #main-menu. Thus all choices are incorrect. This can be seen using this snippet: $('.leaf').closest('.items').each(function(i, obj) {console.log(obj)}); $('.leaf').parents('.items').each(function(i, obj) {console.log(obj)});

Q55. What does this line of code do?

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

Q56. 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?

<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>
function listResponder(evt) {
  console.log('You clicked a list item that says', evt.target.innerText);
}

Q57. What is the difference between $(‘p’).find(‘a’) and $(‘p’).children(‘a’)?

Source: https://api.jquery.com/find/

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.

Q58. 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?

<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>
$('.ball--green').fadeIn(3000, function(){
    console.log("Animation is done!");
});
$('.ball--green').fade('in',3000).done(function(){
    console.log("Animation is done!");
});
$('.ball--green').fadeIn(3).console().log("Animation is done!");
$('.ball--green').fadeIn("3s", function(){
    console.log("Animation is done!");
});

Source: jQuery Docs: fadeIn

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.

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

$(document).on('myCustomEvent', function(){
    // act on my custom event
});

//and later...
$(document).trigger('myCustomEvent');

Source: learn.jquery.com

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.

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

<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' });
$('#element-1').animate({ top: '+=100' })
    .pushStack('#element-2')
    .animate({ top: '+=100' })
    .pushStack('#element-3').animate({ top: '+=100' })
$('#element-1').animate({ top: '+=100' }, function() {
    $('#element-2').animate({ top: '+=100' }, function() {
        $('#element-3').animate({ top: '+=100' });
    })
});
$('#element-1').animate({ top: '+=100' })
    .add('#element-2').animate({ top: '+=100' })
    .add('#element-3').animate({ top: '+=100' })
$('#element-1').animate({ top: '+=100' }, {queue: 'custom'});
$('#element-2').animate({ top: '+=100' }, {queue: 'custom'});
$('#element-3').animate({ top: '+=100' }, {queue: 'custom'});
$('custom').dequeue();

Source: jQuery Docs: animate

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

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

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

Q62. 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?

Q63. 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

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

Source: jQuery Docs: event.target

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.

Extra reading: Event Bubbling and capturing

Q65. 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?

$.fn.myTraverse = function() {
   // ... setup

   var additionalItems = [ /* some additional items for jQuery */ ];

   return // return what?
}

Source: jQuery Docs

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.

Extra Reading: bennadel.com

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

<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');

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

Source: jQuery Docs

.nextAll([selector]) method Gets all following siblings of each element in the set of matched elements, optionally filtered by a selector.

Q67. You have an element with a series of code (not CSS) animations applied to it that could be triggered by code you control, or other code elsewhere (such as plugins). How can you fire some code when all those animations have completed?

$('#element').on('animationend', function () {
  console.log('Finally, everything is done!');
});
$('#element')
  .on('promise')
  .then(function () {
    console.log('Finally, everything is done!');
  });
$('#element')
  .promise()
  .catch(function () {
    console.log('Finally, everything is done!');
  });
$('#element')
  .promise()
  .then(function () {
    console.log('Finally, everything is done!');
  });
  1. [Source: HTMLElement: animationend event MDN ](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event)
  2. Example: Stackoverflow

Explanation: Although A is not complete as it could include animationend webkitAnimationEnd oAnimationEnd, other choices are incorrect. The last choice could be also correct if it were .promise().done instead

Q68. HTML5 data attributes allow you to create valid custom attributes to store arbitrary data within DOM elements. jQuery has an API to interface with custom data such as the series of quotes below. How can you mark the second quote as your favorite?

<div class="quotes">
  <blockquote data-favorite="false">A quote</blockquote>
  <blockquote data-favorite="false">A favorite quote</blockquote>
  <blockquote data-favorite="false">A quote</blockquote>
  <blockquote data-favorite="false">A quote</blockquote>
</div>
  1. [Source: .data() jQuery API Documentation](https://api.jquery.com/data/)
  2. [Source: :nth-child() MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child)

Q69. jQuery can create event handlers that execute exactly once. How is this done?

[Source: .one() jQuery API Documentation](https://api.jquery.com/one/)

Q70. You want to implement the behavior of an effect like slideDown() manually using animate(). What is one critical point you need to remember?

  1. [Source: .slideDown() jQuery API Documentation](https://api.jquery.com/slidedown/)
  2. [Source: .animate() jQuery API Documentation](https://api.jquery.com/animate/)\

Q71. What is the main difference between the contents() and children() functions?

  1. [Source: .children() jQuery API Documentation](https://api.jquery.com/children/)
  2. [Source: .contents() jQuery API Documentation](https://api.jquery.com/contents/)

Q72. If your JavaScript project involves a lot of DOM manipulation, but no AJAX or animation, which version of jQuery should you use?

Q73. The .ready() function is one of the most basic parts of jQuery, but jQuery also provides a mechanism for executing code when both one or more Promises have resolved and the DOM is ready. Which code snippet accomplishes this?

$(function({
    getData : $.get('http://httpbin.org/get'),
    delayedData : $.get('http://httpbin.org/delay/3')
})  {
    //DOM is ready, getData and delayedData are available
});
$($.get('http://httpbin.org/get'), $.get('http://httpbin.org/delay/3')).then(
  function (getData, delayedData) {
    //DOM is ready, getData and delayedData are available
  },
);
$.when($.get('http://httpbin.org/get'), $.get('http://httpbin.org/delay/3')).then(
  function (getData, delayedData) {
    //DOM is ready, getData and delayedData are available
  },
);
$.ready($.get('http://httpbin.org/get'), $.get('http://httpbin.org/delay/3')).then(
  function (getData, delayedData) {
    //DOM is ready, getData and delayedData are available
  },
);

Q74. You want to take an element and any event handlers that go with it out of the DOM to do some work—without the changes affecting the rest of the page—and then move it somewhere else in the DOM, like right after the opening tag. What should go on the first line of this code snippet?

// what goes here?
// ... do some other hidden work on $example
$example.prependTo(document.body);

https://api.jquery.com/detach/

Q75. Review the HTML below. You want to select the first item in the list and fade it out, then select the subsequent items up to (but not including) the active item, and fade them out halfway. How can you set up a single chain to do this?

<ul class="items">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li class="active">Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>
$('.items > li').first().fadeOut().nextUntil('.active').fadeTo('fast', 0.5);
$('.items').children(':first-child').fadeOut().filter('.active').fadeTo('fast', 0.5);
$('.items > li').first().fadeOut().nextAll('.active').fadeOut(50);
$('.items').find('li:first-child').fadeOut().next('.active').fadeTo('fast', 0.5);
  1. https://api.jquery.com/fadeTo/
  2. https://api.jquery.com/fadeOut/
  3. https://api.jquery.com/nextUntil/

Q76. What is a particular performance concern when dealing with event handlers, and how can you cope with it?

Q77. What is the purpose of the jQuery.fx.off global property?

Source: jQuery.fx.off Property

Q78. When you use custom Jquery selection extensions, such as :animated, on a page with lots of DOM elements, you can run into performance issues. What is the best practice for managing those issues?

Q79. What is the main difference between the ajaxStop and ajaxComplete global handlers?

Q80. The :only-child selector selects _.

Q81. Because querySelectorAll and querySelector are in the native DOM API of modern browsers, you don’t need jQuery to do many kinds of DOM selections. But the jQuery selector engine does provide extensions that browsers do not support natively. Which extension is supported only by jQuery and not by querySelector or querySelectorAll?

Source: Selectors Level 4

Q82. jQuery is quite large, and developers often do not use all of its functionality on a project. Beyond using the slim build of jQuery 3, how can you use some of jQuery, but not all?

Source: jQuery GitHub repo

Explanation: Special builds can be created that exclude subsets of jQuery functionality. This allows for smaller custom builds when the builder is certain that those parts of jQuery are not being used.

Q83. jQuery UI includes many animation features not found in jQuery core. Which choice is not one of the features that jQuery UI adds to jQuery?

Q84. Given this snippet of HTML and jQuery, which answer accurately describes what the line of jQuery does?

<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>
$('.menu').find('a').css('color', 'red').end().find('.active').hide();

Q85. A jQuery selection acts on the HTML below, which selects the active menu item. What can you chain onto this selection to select the #main nav tag and add a class called “processed” to it?

<nav id="main">
  <ul>
    <li><a href="/" class="active">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>
$('a.active').addClass('hover');

Q86. When might you want to use custom queues for animations instead of relying on the built-in FX queue?

Q87. Which symbol is commonly used to represent the jQuery object?

Source: Stack Overflow

Q88. Along with standard DOM events like click, focus, or blur, you can register and listen for custom events with jQuery. If you have an external API at http://example.com/api/v1 and you want to use custom events to ping that API from various places throughtout your codebase, what would that look like?

// listens
$('body').on('myEvent', function () {
  $.get('http://example.com/api/v1/ping');
});
// triggers
$('body').trigger('myEvent');
// listens
$('body').on('custom', 'myEvent', function () {
  $.get('http://example.com/api/v1/ping');
});
// triggers
$('document').trigger('custom', 'myEvent');
// listens
$('body').on(function (event) {
  if (event === 'myEvent') {
    $.get('http://example.com/api/v1/ping');
  }
});
// triggers
$('body').triggerHandler('myEvent');
// listens
$.on('myEvent', function () {
  $.get('http://example.com/api/v1/ping');
});
// triggers
$.trigger('myEvent');

Source: Introducing Custom Events

Q89. Given the HTML code between <form> and </form> below, what does the snippet between <script> and </script> do?

<form class="needs-validation" novalidate="">
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="checkbox-opt-in">
    <label class="custom-control-label" for="checkbox-opt-in">I totally read and accept the terms, really.</label>
  </div>
</form>

<script>
  $(function() {
    $('form').submit(function(evt) {
      if ($(this).find('.checkbox-opt-in').prop('checked') === false) {
        evt.preventDefault();

        alert("Please read and accept the terms.")
      }
    });
  });
</script>

Source: .preventDefault()

Q90. jQuery has an internal function used to prepare data that are submitted with AJAX requests, and it is available to you as well. Suppose you have a page with a simple button. Based on various conditions on the page, you build up an object that will alter the URL. If you want the presented URL, how can you get a complete representation of the data into the URL?

<div class="actions">
  <a href="//example.com/action">Let's go!</a>
</div>;

var data = {
  username: 'jaffacakes',
  message: {
    date: '2018-07-05 13:14:00 GMT-07:00',
    text: `I have a whole lot to say, everyone, and I'm gonna say it!`,
  },
  tags: ['discourse', 'thoughts', 'messageOfTheDay'],
};

//example.com/action?username=jaffacakes&message%5Bdate%5D=2018-07-05+13%3A14%3A00+GMT-07%3A00

Source: jQuery.param()