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?
$.extend $.clone $.fn.extend $.merge
Continue ReadingCategory: jQuery Assessment Answers
What is the difference between $(‘header’).html() and $(‘header’).text()?
$(‘header’).html() returns the inner HTML of the header. $(‘header’).text() returns only the text $(‘header’).html() returns only the HTML tags used, without the text. $(‘header’).text() returns only the text $(‘header’).html() strips all HTML from the header. $(‘header’).text() always returns an empty string. $(‘header’).html() returns all headers in an HTML document. $(‘header’).text() the first line of a text file.
Continue ReadingGiven 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> $(‘.btn-primary’).hide(); $(‘.btn-primary:visible’).not(); $(‘.btn-primary’).visibility(false); $(‘.btn-primary’).show(false);
Continue ReadingGenerally speaking, when used on a web page, how should jQuery be installed, and why?
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 Using the highest version number possible because only jQuery 3 and up are compatible with Internet Explorer 7 In the head tag […]
Continue ReadingWe want to create a new jQuery plugin called linkUpdater that can be chained onto other jQuery selector like a normal plugin. It should update all the links in the referenced collection so they open in new windows or tabs. Below is the first cut. What is one problem with this plugin?
“user strict”; ($.linkUpdater = function() { this.find(‘a’).attr(‘target’, ‘_blank’); })( jQuery ); this needs to be wrapped, like $(this), in order to be chained in a plugin. jQuery plugins can’t be safely authored in strict mode. In order to be used by other code, plugins need to be added to the global namespace, not wrapped in a […]
Continue ReadingWhat is jQuery?
jQuery is a bridge between Java and Javascript that makes native apps easier to write. jQuery is a plugin for JavaScript that makes database queries easier to write. jQuery is a collection of JavaScript functions that makes finding and manipulating elements on a page, AJAX, and other things easier. jQuery is a Chrome extension that […]
Continue ReadingBelow is an example page snippet that includes a couple of messages in a list, and a code snippet that retrieves a few hundred messages from a API endpoints using AJAX. How might we add these items to the page snippet in a way that avoids performance problems with DOM insertions?
<div class=”message-area”> <ul class=”message-area–list”> <li>Existing message 1</li> <li>Existing message 2</li> </ul> </div> $.get(‘//example.com/api/v1/message’) .done(function(data) { var tonsOfItems = data.messages; // add all these messages to a large page }); 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(”)); Removing the event handlers with JavaScript will be slower than removing them $.each(tonsOfItems, […]
Continue ReadingGiven 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> $(‘.feedback’).hasClass(‘.success’); $.css(‘.feedback’, ‘.success’); $(‘.feedback’).addClass(‘success’); $(‘.feedback’).css(‘.success’);
Continue ReadingSuppose 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 }); [x] $(this).animate({ top: ‘+=100’, left: ‘+=100’, }, { duration: 600, complete: function() { $(this).animate({ top: ‘-=100’, left: ‘-=100’, }, 600) } }); [ ] $(this).animate({ top: ‘-=100’, left: ‘-=100’, }, 600, function() { $(this).animate({ top: ‘+=100’, left: ‘+=100’, }, 600) }); [ ] $(this).animate({ top: ‘=100’, left: […]
Continue ReadingGiven 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); .get() retrieves a DOM element, and can’t be chained, eq() retrieves a jQuery object, and can be chained. .get() retrieves a jQuery object, and can’t be chained, eq() retrieves a DOM element, and can be chained. .get() retrieves a jQuery object, and is […]
Continue Reading