Lab 17: Introduction to jQuery

In this lab, you will use jQuery to work with HTML pages.

Objectives:

• To manipulate HTML pages using jQuery

Part 1: Getting Started with jQuery

Steps:

1. Use File - Close All to close all open editing windows.

2. In RAD, create a new Dynamic Web Project named Lab17Web associated with Lab17EAR.

3. Your first step is to import the jQuery script into your workspace. Follow this procedure to import it:

   1. Use Windows Explorer or My Computer to navigate to {Lab Installation Directory}/lib. If your computer has the standard lab setup on Windows 7 or later, this directory is:

      c:\Users\username\webclass\lib             
                   

      You should see the jquery-1.11.1.js file in that folder.

   2. Size and position Windows Explorer and RAD so you can see both of them at the same time.

   3. In Windows Explorer, right-click on jquery-1.11.1.js and choose Copy.

   4. In RAD, right-click on your project's WebContent folder and choose Paste to import the file.

4. Create a new HTML File named test-jquery.html, then complete it:

   1. Define a CSS style class named bold-red that sets CSS properties to red, bold text.

      Define another class named italic-green with appropriate CSS properties.

   2. Reference the jQuery JavaScript file you imported in the last step.

   3. In the body, define several paragraphs, each with some sample text:

      • A paragraph that uses the bold-red CSS class.
      • A paragraph that has an ID of styleMe.
      • A paragraph with no special ID or CSS class.
      • A paragraph that contains text that includes a "span" element with the bold-red CSS class.

5. Write another <script> element that uses the jQuery ready() method an an anonymous function. Complete the anonymous function so that it uses jQuery to do the following: (We recommend that you do these one at a time and test between each one.)

   • Changes the first paragraph's CSS class from bold-red to italic-green.
   • Changes the second paragraph so that its background color is yellow.
   • Changes all paragraphs so that they have a margin of 2 ems.
   • Append a new paragraph that's a copy of the last one.

6. Create a new HTML File named jquery-echo.html, and in it, write an HTML form with two input widgets: one that lets the user enter their name, the other, their age. The form should have a submit button.

   Use jQuery to:

   1. Install handlers for the focus and blur events so that when the user enters one of the text widgets, it draws a white background. The text widgets should have a light-gray background when not focused.

   2. Respond to the form submission, at which time, your script should query the text from both widgets and append new paragraphs to the page, echoing the user's input.

      Hint: You can get at the value of a form input widget using the jQuery val() method:

      var name = $("#name").val();  // assumes name widget has ID="name"             
                   

      Note: Your program should NOT keep appending paragraphs - in other words, if you hit the submit button twice, you should still see only two paragraphs.

Part 2: More Practice

Steps:

1. Copy the drawattention.html page from Lab16Web into this lab's project, then modify it to use jQuery.

2. Copy the showbrowserinfo.html page from Lab15Web into this project, then modify it to use jQuery.