This is a listing of basic jQuery examples. To keep things simple, each page does only one or two things. Each page has its own standalone JavaScript file in addition to the standard jQuery library (which is called from googleapis.com), so you should be able to figure out what the page does, and how, by comparing the HTML file and the JS file. All the pages here use the same two stylesheets: reset.css and style.css.
- Write new text on the page; hide and show text
- > See the example. This example opens a prompt where you can type your own name. It will then write your name onto the page. This page also has two paragraphs of text that are hidden. Each one has a heading above it, which is visible. Click either heading to show the paragraph below it. Click the heading again to hide the paragraph.
- Change an image by clicking it
- > See the example. This example uses an extremely simple script to: (1) make a list of image files; (2) view all the images by clicking. When you're on the last image, click and the first image appears again. If you've had trouble understanding how jQuery slideshow viewers work, this might help. Note: Users without JavaScript will see only the first photo.
- Click through a set of images with captions
- > See the example. This example uses a very different method (in comparison with the previous example) to change what you see on the page dynamically with JavaScript. In this case, there are four DIVs on the page, but three are hidden by JavaScript. You will see each one in turn by clicking. Again, if you've had trouble understanding how jQuery slideshow viewers work, this might help. This one is actually better because people without JavaScript can still see all the content.
- Make CSS styles change when you hover
- > See the example. This example demonstrates how JavaScript can overwrite the CSS on the page, making any kind of element (in this case, paragraphs) change color, font-size, etc.
- Display a photo as an overlay
- > See the example. Commonly called “lightbox,” this effect is everywhere online. The full screen is shaded over, scrolling is disabled, and a big photo appears in the center of the browser window. This example demonstrates, in stages, how a lightbox effect is constructed.
- Animate!
- > See the example. These animation effects are pure jQuery. Here you'll see a circle gradually become larger and smaller. You'll also see a square slide across the page.
Feel free to download and modify any of these pages and their JavaScript. They are free to use.