Week 4

Scripting For The Web
Sep 23, 2020

Warm-up Claridryl website

jQuery Basics

- note: there are slides

We’ve learned a ton so far. We now understand the basics of Javascript values, variables and functions. We understand the concept of the DOM and know that Javascript lets us modify the DOM.

With that knowledge we’re going to add one other tool. This is the Javascript library jQuery.

Broadly stated, a programming library is a package of code with pre-written functions (and possibly variables, classes, etc) to simplify working in a specific area or category. jQuery is a Javascript library that makes programming in Javascript easier and it is quick to learn.

To use jQuery you first must pull it into your index file on the page where you want to use it. You can add your own jQuery code inside the <script></script> tags or link to an external script.


<!DOCTYPE html>
<title>Minimal example - working with jquery</title>
    <script src="jquery.js">
    <script src="script.js">

jQuery is the most famous Javascript library and at one point could be found on over 60% of websites. There are 2 options to use it:

Download jQuery and save it in your site’s directory

Download it. Choose the compressed, production version 3.3.1. Then add a link to it in your html index document. Then add a link to your own external script file after that, normally before the closing </body> tag.

or use a CDN

A CDN means Content Delivery Network. Since so much of the web uses jQuery, there are companies and foundations that provide free links to jQuery online. Rather than having folks download jQuery from each website that uses it, a website developer can instead link to one of these centrally provided copies of jQuery online. That way, when someone visits your webpage, they will already have a copy of jQuery cached in their browser, and so your page will load faster.

Example - exactly same as above except for the jquery link

<!DOCTYPE html>
<title>Minimal example - working with jquery</title>
    <script src=""></script>
    <script src="script.js">

What’s it for?

Same things as Javascript

Where to place it

jQuery basics

If you understand how CSS works you can understand how jQuery works!

With jQuery, our basic syntax is:


$ –> tells the browser we’re using jQuery

('selector') –> is a tag, class or id we are selecting on the webpage. Don’t forget the # or . for IDs and classes.

action() –> is what action should be taken on what we’ve selected

Example minimal jQuery call

  alert("The paragraph was clicked.");

Document Ready

It’s best practices to wrap all of your jQuery code inside a ready event. In other words, we want all of our webpage’s HTML and CSS code to load first BEFORE we start running our jQuery code so that if our script needs content from our webpage it’s already loaded first.


  //our jQuery code goes here


jQuery selectors

Examples of things you can select:


Example: When you click a button, all paragraphs are hidden

$("*")  //select everything on page
$(this) //select current element, whatever it is
$("p.main") //select <p> elements with class "main"
$("p:first")//select first <p> on page
$("p:even") //select all even-numbered paragraphs
$("a[target='/'"]//select all <a> that link to home ("/")
$("[href]") //select anything with a href attribute

Many more example selectors

jQuery events

Events are “things that can happen” on a webpage including:

There are more events. You can find a listing of jQuery events here.

Common events


  alert("You entered main!");


Hiding effect

Fading effect



more on fading in and out options

Other effects



Callbacks (functions that you want to have triggered when an effect finishes running)

jQuery chaining

Use multiple jQuery calls at once by chaining them together.

$("#p1").css("color", "red").slideUp(2000).slideDown(2000); 

To make it easier to read, you can break your code over multiple lines:

$("#p1").css("color", "red")

jQuery Actions: GET content

Easy to do!

let myText = $('#main');

jQuery Actions: SET content


  $('body').html("<p>Changing all your content!</p>");

jQuery Actions: ADD content

$(‘p’).prepend(“I believe the opposite of this:”);

Remove an element



### jQuery to alter CSS

- addClass() - Adds one or more classes to the selected elements
- removeClass() - Removes one or more classes from the selected elements
- toggleClass() - Toggles between adding/removing classes from the selected elements
- css() - Sets or returns the style attribute


$(“button”).click(function(){ $(“h1, h2, h2, p”).toggleClass(“bg-Blue”); });

##### Get and Set CSS

Get example:

let bg = $(‘body’).css(‘background-color’);

Set example:

$(“p”).css({“background-color”: “purple”, “font-size”: “4em”});

#### change Dimensions

- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
#### An aside: anonymous functions and passing functions

When we run ```$(document).ready(function(){})``` we are passing an anonymous function as an argument to ```$(document.ready()```

There are two things of note here: anonymous functions, and passing functions as arguments.

### Anonymous Functions

1. Anonymous functions are created at *runtime*
2. They don't have a name

Example of a named (not anonymous function):

function flyToTheMoon(){ alert(“Zoom! Zoom! Zoom!”); }



function() { alert(“Zoom! Zoom! Zoom!”); } ```

So we have an anonymous function stored as flyToTheMoon now.

Going back to our previous jQuery starter code, we are passing an anonymous function to the function ready(), which runs only once our page has loaded.

jQuery resources


Finish your project!

Grading Rubric:

25% Concept Idea

25% Design

25% Functionality

25% Completeness