Exercises for Customizing Vendor Systems

Chapter 8: jQuery Basics

This page contains interactive exercises that go along with Chapter 8: jQuery Basics. 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.

jQuerify Bookmarklet

The bookmarklet below can be added to your bookmarks bar to add jQuery to any page you visit. (No need to use it on this site—I've already included jQuery on every page.)

jQuerify

(function() {
	var otherlib = false, msg = '';
	if(typeof jQuery!='undefined') {
		msg = 'This page already using jQuery v' + jQuery.fn.jquery;
		return showMsg(); 
	} else if (typeof $=='function') {
		otherlib=true;
	}
	function getScript(url,success){
		var script=document.createElement('script');
		script.src=url;
		document.getElementsByTagName('head')[0].appendChild(script);
        success();
	}
	function showMsg() {
		console.log(msg);
	}
	getScript('https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js',function() {
		setTimeout(function() {
			msg = 'This page is now jQuerified with v' + jQuery.fn.jquery;       
			if (otherlib) {     
				msg+=' and noConflict(). Use $jq(), not $().';
				$jq=jQuery.noConflict();
			}
			return showMsg();
		}, 2500);
	});
})();

jQuery Statements

Here is a sample table we have used in previous chapters.

<table class="bib_items">
	<tbody>
		<tr class="bibItemsHeader">
			<th width="38%" class="bibItemsHeader">Location</th>
			<th width="38%" class="bibItemsHeader">Call No.</th>
			<th width="24%" class="bibItemsHeader">Status</th>
		</tr>
		<tr class="bibItemsEntry">
			<td width="38%">Mary Idema Pew - 3rd Floor</td>
			<td width="38%">PS3562.E353 G6 2015</td>
			<td width="24%">DUE 09-17-15 +2 HOLDS</td>
		</tr>
		<tr class="bibItemsEntry">
			<td width="38%">Steelcase Popular Reading</td>
			<td width="38%">PS3562.E353 G6 2015 c.2</td>
			<td width="24%">AVAILABLE</td>
		</tr>
		<tr class="bibItemsEntry">
			<td width="38%">Mary Idema Pew - Popular Reading (1st Floor)</td>
			<td width="38%">PS3562.E353 G6 2015 c.3</td>
			<td width="24%">DUE 10-07-15</td>
		</tr>
	</tbody>
</table>

jQuery makes it easier to change the CSS of multiple items that match certain criteria. Try the code below in the console. What happens to the table above?

$(‘td[width="24%"]:contains("DUE")').css('color', 'red');

jQuery also allows you to chaoin statements, like JavaScript. Try running the following code in the console:

$('td[width="24%"]:contains("DUE")').css('color', 'red').css('width', '45%').css('height', '100px');

You can also min-and-match jQuery and JavaScript together. Try running the following code in the console:

var tableCells = $('td[width="24%"]:contains("DUE")');
for(var i = 0; i < tableCells.length; i++) {
	tableCells[i].style.color = 'white';
	tableCells[i].style.backgroundColor = 'red';
}

.find()

Here is some sample markup to demonstrate how find() looks within a predetermined scope:

This is a paragraph inside the wrapper.

Here is another paragraph outside the wrapper.

<div id="wrapper">
	<p>>This is a paragraph inside the wrapper.</p>
	<img src="img/mypic.png" alt="" />
</div>
<p>Here is another paragraph
 outside the wrapper.</p>

Try running the following code. It is searching for paragraphs only within the scope of the element with an ID or wrapper:

$('#wrapper').find('p').css('color', 'red');

.text() and .html()

Capturing the text and HTML of elements is easy in jQuery. try running the following code in the console. What happens if you change the text() to html()?

console.log($('#wrapper').find('p').text(););

We can also change the text or markup of an element. Try this code:

$('#wrapper').find('p').html('This is <em>my favorite</em> paragraph!');

.show() and .hide()

We can control whether is something is visible in jQuery with a shortcut command. Try running this code in the console, and look at the paragraph inside the wrapper above:

$('#wrapper').hide();

Without refreshing the page, try running this code in the console:

$('#wrapper').show();

Going up and down the DOM

We can use several jQuery selectors to move up adn down the DOM from a particular scope. Try running this code in the console. What happens to the image inside the wrapper element above?

$('#wrapper').closest('img').hide();

.append() and .prepend()

We can add content to the beginning or end of an element easily with jQuery. Try running this code. What happens to the element with the ID of wrapper above?

$('#wrapper').prepend('<h1>This is a heading</h1>');

We can also move things around with jQuery. Try running this code. What happened to the content inside of the wrapper element?

var wrapper = $('#wrapper');
$('#wrapper').next('p').append(wrapper);