jQuery Part-III

JavaScript isn't enabled in your browser, so this file can't be opened. Enable and reload.

jQuery Part-III

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

1 point

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

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

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

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

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

1 point

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

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

all of these answers

$('#firstName').val()

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

1 point

Option 1

Option 2

Option 3

Option 4

Which choice is an example of statement chaining? *

1 point

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

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

$('p > a > li');

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

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

1 point

Option 1

Option 2

Option 3

Option 4

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

1 point

return this.append(additionalItems);

return additionalItems.appendTo(this);

return this.pushStack(additionalItems);

return this.add(additionalItems);

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

1 point

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

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

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

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

What does this line of code do? *

1 point

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

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

selects the first element inside any list items on the page

creates a predefined CSS selector that can be reused later

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

1 point

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

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

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

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

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

1 point

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

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

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

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

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

1 point

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

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

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

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

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

1 point

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

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

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

$('.active').then()

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

1 point

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

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

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

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

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

1 point

target

self

source

object

51. 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? *

1 point

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

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

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

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

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

1 point

Option 1

Option 2

Option 3

Option 4

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 point

jQuery.version()

jQuery.jquery

jQuery.prototype.version

jQuery.fn.jquery

Submit

Clear form

Forms

This content is neither created nor endorsed by Google.