JQuery

Basic Syntax

We'll start with a basic form that asks for a name. You'll see how each of these JQuery functions works within that form. Then you should be able to apply them to your own projects when you need these effects.

The $() is a function that turns whatever is inside it into a JQuery object. You always start with $(document).ready(function() { }); to affect the document. JQuery works with your html and CSS to make interactive changes.

The code to the right submits the form and manipulates the DOM element #greeting with the information from the form. It creates a variable to contain the form element. Then it modifies the html with that variable to the #greeting div. This is similar to using the innerHTML property with getElementById in JavaScript.

Append

With JQuery, you can also append to a DOM element. Maybe you already have something in the element and you just want to add to it. The code to the right has the word "Hello" and a space already in the #greeting div. The script appends the information from the variable, rather than replacing it. This is similar to using the innerHTML property with the += operator.

Modify CSS

The script to the right modifies the HTML of the #greeting div from "Sign In" to include the appropriate greeting for the user. It also changes the CSS of the color for #greeting to red. You can manipulate other CSS commands with this technique. Try it with font-size, font-family, background-color, etc.

You can add multiple styles by separating with a comma, for example:

Modify a Class

You modify a class in the same way as you would an id. But remember that you can use a class on more than one element on a page. So, this is a good option when you want to apply a change to multiple elements on a page. In the code to the right, you will see a class added to the two paragraphs below the greeting. The script changes the color of the .new class elements.

Adding a Class

The script to the right adds a class to an element. When the file is first opened, the "bigred" class is not associated with an element. But executing the script makes the "bigred" class apply, increasing both the font size and changing the color.

Adding Content After an Element

You can add content after an element, creating a new block for it. The code to the right leaves the #greeting element, but creates a new element below it with the content.

Show/Hide an Element

You can show and hide elements with JQuery. Initially, the #greeting div is not displayed via the CSS. When the script executes, it shows the div and appends the name.

FadeIn/FadeOut

JQuery offers a range of effects that you can try. The code to the right initially hides the greeting with the CSS. Then when the script executes, it fades in, instead of simply appearing.

There are others show(), fadeIn(), slideUp(), slideDown(). You have to know the arguments of these functions to use them. JQuery.com has full documentation. Give each of these a try in the script to see how they work. Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used.

The second script uses a fadeOut on one element and a fadeIn on another.

Using Radio Buttons and Dropdowns

So far, we have used text inputs from forms and put them in variables. The code to the right demonstrates how to get the content from radio buttons and dropdowns into a variable.

Date Picker

There are lots of cool interface features in the JQuery UI library. Here is one, but visit JQueryUI.com for more of these features. The code to the right creates a calendar as a date picker. You must have the correct references to the JQuery UI stylesheet and script library, as well as the reference to JQuery. Then you attach the datepicker feature to an element.

This code relies on a JQuery theme, in this case one called Dot Luv, to control the look of the calendar. You can find other JQuery UI themes and features on their site. See the Gallery for the theme options. You can link to the JQuery UI themes by downloading them or by linking at a reliable source, like Google API.

Now You Try

Now it's your turn. Complete the following activities in one page, using only JQuery functions. The code to the right will get you started.

1. Create a text input to get the user's name. Have it append to a DOM element with a greeting, but use the show/hide method so the greeting doesn't show until the form is submitted.
2. Have the Welcome message fade in.
3. Create a dropdown to allow the user to select a color. Make the first selection an empty value with a Choose One option.
4. Based on the user's selection, have it change the color of the greeting to the color the user selected. And have it make the text a 36px font-size.
5. Using JQuery UI, find a theme and modify the code for the UI stylesheet link. Add a date picker, so the user can pick a date for an appointment, and have that return to a DOM element.
6. Make sure to handle the situation if the user submits the form again without refreshing the page. Reset anything that needs to be reset, especially appended items.
7. Create some type of a validation method, if the user doesn't fill out something on this form before submitting.