<section>
<?= t_head("Attach jQuery and JavaScript File", "5–10") ?>
<p>Download the following skeleton file:</p>
<p class="resource"><a href="minilab5.html">minilab5.html</a></p>
<p>Create a <samp>minilab5.js</samp> file and link it to your HTML file. Place an <code>alert</code> at the top of your JavaScript file to be sure it’s linked properly.</p>
<p class="note important">If you don’t see the alert when you refresh the page, your JavaScript file is not linked properly!</p>
<p>Now include <strong>jQuery</strong> to your HTML page. Be sure to place the jQuery <code>script</code> tag <strong>before</strong> your <samp>minilab5.js</samp> file.</p>
</section>
<section>
<?= t_head("Select Elements Using jQuery", "10–15") ?>
<p>Begin by issuing several jQuery queries to the JavaScript console in Firebug. When finished, copy and paste your command history from the Firebug console into a <samp>.txt</samp> file and submit that.</p>
<ol>
<li>Select all paragraphs on the page. (There are three.)</li>
<li>Select only the paragraphs in the <samp>benefits</samp> div. (There are two.)</li>
<li>Select only the paragraph in the benefits div that is a note. (There’s only one.)
<ul>
<li>Style this paragraph with a noticeable background color.</li>
</ul>
</li>
<li>Select all <code>a</code> tags on the page. (There are six.)</li>
<li>Select all <code>a</code> tags <strong>except</strong> the one in the <code>li</code> with the class of <samp>important</samp>. (There are five.)
<ul>
<li><del>Set a CSS property on these links so that they are only underlined when the mouse is hovering over them.</del> (This can only be solved using the jQuery <code>.hover()</code> event handler. You can solve it if you want, but this is optional.)</li>
</ul>
</li>
<li>Select all <code>abbr</code> tags. (There are two, and they are both the abbreviation “API”.) In HTML, the <code>abbr</code> tag indicates an abbreviation, and it takes an optional <code>title</code> attribute which indicates the expanded form of the abbreviation.
<ul>
<li>Add a <code>title</code> attribute to all of the <code>abbr</code> tags with the value <samp>'Application Programming Interface'</samp>.</li>
</ul>
</li>
</ol>
</section>
<section>
<?= t_head("Modify the Page Using jQuery", "10–15") ?>
<p>Some steps in Exercise 2 make changes to the page. Replicate these changes in your <samp>minilab5.js</samp> file.</p>
<p>In order to modify the contents of the page, you’ll need to delay your jQuery queries until after the page has loaded. Use the jQuery <code>.ready()</code> function to do this.</p>
<p>Finally, add a <code>button</code> to the page. Attach a click event handler to this using jQuery, and make this select and change one more style on the page.</p>
</section>
<footer>
<p>If you’ve finished everything, good job! Start playing with and modifying more HTML elements.</p>
</footer>