Exercises for Customizing Vendor Systems

Chapter 9: Advanced jQuery

This page contains interactive exercises that go along with Chapter 9: Advanced jQuery. For each exercise, you will find the code snippets presented in the book along with live versions of the markup. Running the code in your browser's Developer Tools console will run the code on the page so you can see how the jQuery statements being discussed work.

.remove() and .empty()

We can completely remove elements from the DOM, or remove all of their contents. Try running the code below, and then look at the markup of this page in your Elements Browser. What happened to the code? WHat happens when you refresh the page and try the code again, but with .empty() in place of .remove()?

$('h1').remove();

Loops with .each()

Below is the sample results list described in the section on Loops in Chapter 9.

<div id="linkresolver" class="sample">
    <table>
      <tr class="row">
        <td>
          <table>
            <tr>
              <td class="article"><a href="#article1">Article</a></td>
              <td class="journal"><a href="#journal1">Journal</a></td>
              <td class="database"><a href="#database1">Database Name 1</a></td>
              <td class="dates">1986-present</td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <table>
            <tr class="row">
              <td class="article"><a href="#article2">Article</a></td>
              <td class="journal"><a href="#journal2">Journal</a></td>
              <td class="database"><a href="#database2">Database Name 2</a></td>
              <td class="dates">1991-1999</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
   </div>

The code below will scrape the text from the various table cells to create a set of arrays, and then echo the contents of those arrays into the console.

// Define the variables
var articleLinks = new Array(), journalLinks = new Array(), databaseLinks = new Array(), databaseNames = new Array(), dates = new Array();

$('#linkresolver table table').each(function() {
	// Limit the scope
	var row = $(this).find('tr');
	// Get links
	articleLinks.push($(row).find('td a:contains("Article")').attr('href'));
	journalLinks.push($(row).find('td a:contains("Journal")').attr('href'));
	databaseLinks.push($(row).find('td:nth-child(2) a').attr('href'));

	// Get details
	databaseNames.push($(row).find('td:nth-child(2) a').text());
	dates.push($(row).find('td:last-child').text());
});
console.log(articleLinks); 
console.log(journalLinks); 
console.log(databaseLinks); 
console.log(databaseNames); 
console.log(dates);

Event Listeners

Often we need to run a script after a user has interacted with our site, or after another event has occured (like the page is done loading). Event Listeners are a great way to do this in jQuery. Below you will find the sample results list described in the section on Event Listeners.

<div class="first-result">
	<a href="#" class="article">Full Text Online</a> from <a href="#" class="database">Academic Search Database</a><br />
	<span class="dates">Coverage: 1996-present </span>
	<small><a href="#">Browse the journal</a></small>
</div>
<p id="results-toggle">Show Additional results</p>
<ul id="additional-results">
	<li><a href="#">Full Text Online</a> from Database.</li>
	<li><a href="#">Full Text Online</a> from Database.</li>
	<li><a href="#">Full Text Online</a> from Database.</li>
</ul>

The following code will hide the additional results by default, and then show them when the "Show additional results" link is clicked.

$('#additional-results').hide();
$('#results-toggle').mousedown(function() {
	if($('#additional-results').css('display') == 'none') {
		// Show
		$(this).text('Hide Additional Results');
		$('#additional-results').show();
	} else {
		// Hide
		$(this).text('Show Additional Results');
		$('#additional-results').hide();
	}
});

Now try refreshing the page and using this version of the code, which toggles a CSS class to show and hide the extra results:

$('#additional-results').addClass('hide');
$('#results-toggle').click(function() {
	if($('#additional-results').hasClass('hide')) {
		// Show
		$(this).text('Hide Additional Results');
		$('#additional-results').removeClass('hide'); 
	} else {
		// Hide
		$(this).text('Show Additional Results');
		$('#additional-results').addClass('hide');  
	}
});

Here is code that will slide the hidden content up and down. What happens if you change the number of milliseconds each method takes?

$('#additional-results').css('display', 'none');
$('#results-toggle').click(function() {
	if($('#additional-results').css('display') == 'none') {
		// Show
		$(this).text('Hide Additional Results');
		$('#additional-results').slideDown(200); 
	} else {
		// Hide
		$(this).text('Show Additional Results');
   
		$('#additional-results').slideUp(1000);  
	
}
});

Finally, here is a version that doesn't change the label text, but is just one line to slide the content up and down.

$('#additional-results').css('display', 'none');
$('#results-toggle').click(function() {
	$('#additional-results').slideToggle();
});