Week 8 - Bringing it all together - Complete functional application

Date: 2025-03-12

Overview

Scripting with jQuery

This class is not meant to be an advanced Javascript scripting course. Other classes including Scripting For The Web cover scripting in much more detail.

We are using the jQuery library as a simpler interface to work with Javascript in the browser. This lets us quickly create usable scripts to trigger events and actions in our interfaces.

jQuery is a library. It can access and alter the DOM.

jQuery provides a beginner-friendly simplified approach to scripting, including a CSS-like selector system. Our scripts can respond to events such as button presses.

Getting started with jQuery

2 options:

  1. Download the latest jQuery script and add it to your project.
  2. Use an online CDN (Content Delivery Network) by linking to a copy of jQuery on a CDN online (at a url).

Use the first option especially for offline apps. Use the second option for speed. A user may have visited a previous site that uses jQuery, so their browser will have cached the site, allowing it to run faster. Additionally, jQuery is hosted on servers around the world, so it should load quickly everywhere.

jQuery Syntax

$(selector).action();

Let’s break this down

$ is the jQuery sign. It tells the browser we are using jQuery to access/alter the page.

selector is a reference to the html object we want to alter. We can reference html tags, classes, IDs.

action() here is a reference to a jQuery action. These are builtin actions you can trigger.

Examples:

$("p").hide() will hide all paragraphs on the page.

$(".header").hide() will hide any element on the page with a .header class.

Best practices - document.ready()

It is best practice to wait to have our jQuery scripts run after all HTML content (such as text, images) has loaded.

To do this, we put our script inside a nested ready() event. This means that our pages waits until it’s ready (all content is loaded) before it triggers the rest of our jQuery code to run.

$(document).ready(function(){
  // this is a comment in Javascript/jQuery
  // jQuery methods go here...
});
jQuery selector examples
$("p.intro");

Selects all <p> elements with class=“intro”

$("a[target='_blank']")

Selects all <a> elements with a target attribute value equal to “_blank”

more jQuery selector examples

jQuery Events

Any action a user can do on the page is called an “event.” Our script responds to these user events.

Mouse Events:

Key Events:

Form Events:

Window Events:

Syntax for jQuery events

$('p').click(function(){
  //action here occurs when you click on a paragraph
});
$("#button1").mouseenter(function(){
  alert("You entered id button1!");
});
$("input").focus(function(){
  $(this).css("background-color", "#cccccc");
});

focus() is used when the user clicks on a form field.

jQuery Resources

jQuery UI

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.

Link

Just like jQuery library you will need to make sure you link to jQuery UI library before your own jQuery script.

Examples for all of the widgets, including

Read