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 Reading

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

 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?

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

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

 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>  $(‘.feedback’).hasClass(‘.success’);  $.css(‘.feedback’, ‘.success’);  $(‘.feedback’).addClass(‘success’);  $(‘.feedback’).css(‘.success’);

Continue Reading

 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 }); [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 Reading

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