jQuery Starter App

What is jQuery?

jQuery is a Javascript library that makes unsing Javascript easier. It's perfect for beginning coders to add some polish to a site, or experienced devs looking to build something quickly. The syntax is approachable, and feels like writing in plain English. jQuery has also been around for a long time, so there's lots of good learning and troubleshooting resources available if you get stuck.

How to use this starter app

  1. 🔄Remix it!
  2. Open the editor view, and take a peek at index.html. (That's this page!)
  3. Get a feel for how the markup is set up.
  4. Move to script.js to see how we use jQuery to listen for event, then find and modify dom elements in the HTML.

Use event handlers to add interactions to your site

jQuery has lots of ways that you can add interactions to the page. One of the most common ways is by using event handlers. This means that the script file waits for a user to complete an action, then fires the function.

Example #1: Mouseover

This box is listening for a mouseover. When you mouseover it, something fun happens....

✨ Mouse over this box ✨

Example #2: Click counter

This button is listening for a click. When you click it, the text next to it will tell you how many times its been clicked

Button has been clicked 0 times

There are lots more event handlers you should explore on your own! At the bottom of each page there are also demos where you can see how the code works

Next Steps

Add jQuery to an existing site!

To use jQuery you need to add it to your page. It's available in two different ways: as a CDN you link to, as well as a file that you can download.

This starter app has jQuery imported from a CDN.