JQuery

What is it?

JQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML.

  • Also called a JavaScript Framework
  • Free and open source
  • Makes it easier to create feature-rich JavaScript-enabled Web pages
  • The library functions as an external script that you reference in your document

Why should I learn it?

JQuery helps to simplify some of the things you have learned in JavaScript and it adds additional functionality.

What can I do with it?

There are a range of features that all you to traverse the DOM, manipulate CSS, work with events and add effects.

How long will it take?

These exercises will take a few hours, but you will need to spend some time implementing them in your own projects.

Getting Started

You will apply JQuery similarly to JavaScript, within an HTML file. You need to include reference to the JQuery Library in the head of the document.

You can do this in two ways, either downloading the files and creating a local reference or including a reference to the library online.

  • Go to JQuery.com, download the JQuery Library and put it in the folder where you would like to use it. Reference it via the external script method. Make sure you include the proper filename. <script type="text/javascript" src="jquery.js"></script>
  • You can also do an external reference to a JQuery library that you can access from a reliable source, like Google. Find the current version at https://developers.google.com/speed/libraries/#jquery.  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  • Note that the script tag is not self-closing, even if you don’t have anything to put within it.

    The jQuery library actually comes in 2 forms:

    • The uncompressed .js file is easy to read and modify, but it's around 160kb in size
    • The compressed .js file has all comments, whitespace, and other unnecessary characters removed from the file, squeezing the whole library into a mere 23kb. Although you can't easily read the code, this is the version you'll want to place on your site, as it's much quicker for visitors to download. JQuery lines begin with $ to indicate the use of a function. This is called shorthand notation.
    • You can use the compressed version for these exercise.

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.

$(document).ready(function() { $(thingToClick).event(function() { $(thingToAffect).effect(); }); });

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.

Try it!

Name:

Code Sample - Basic Syntax

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.

Try it!

Name:

Hello

Code Sample - Append

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:

$(".new").css({ 'font-size' : '30px', 'color' : 'red', 'font-family': 'Helvetica' });

Try it!

Name:

Sign In

Code Sample - Modifying CSS

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.

Try it!

Name:

Hello

Welcome to the Site

Thank you for visiting.

Code Sample - Modify a Class

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.

Try it!

Name:

Hello

Code Sample - Adding a Class

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.

Try it!

Name:

Your Name Below

Code Sample - Adding Content After

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.

Try it!

Name:

Hello

Code Sample - Show/Hide

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.

Try it!

Name:

Hello

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

Try it!

Name:

Sign In

Hello

Code Sample - FadeIn

Code Sample - FadeOut

If you don't like the way that fadeOut() completely removes the element, try $("#greeting").fadeTo( 1000, 0 ). The first parameter is duration in milliseconds and the second is opacity. Or $("#greeting").animate({ opacity: 0 } ). Both will fade out to 0 opacity retaining the position of the original element.

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.

Try it!

How old are you?

under 18
19-34
34+

What is your favorite color?

Age:

This gets text color:

This gets value of color:

Code Sample - Radio Buttons and Dropdowns

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.

Try it!

Your date:

Code Sample - Date Picker

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.

Code Sample - Date Picker

Congratulations!

You've reached the end of these coding exercises. I hope you have found them beneficial. Implement these techniques in your own projects. Keep practicing and learning! You can now move on to the Advanced Topics.

© 2017 CodeActually · cindy@codeactually.com