jQuery - basic samples

Controlling visibility

First paragraph.

Second paragraph

List 1: List 2:

Sliding up and down

This text can be slided down and up

Reaction on mouse events

Change background color on mouse click (each click causes a new color change)

Change background color on mouse double click (each double click causes a new color change)

Change background color on mouse down, restore on mouse up

Change background color on mouse enter, restore on mouse leave

Change background color on hover (analogous to mouse enter + mouse leave)

Reaction on focus

The field with the focus has green background:
Some input: Other input: Last input:


By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute.

This is an animated text followed by an animated div

This is some non animated text

Read, change, add and remove HTML contents

This is some outer text.

This is some inner text.

AJAX = Asynchronous JavaScript and XML

AJAX allows exchanging of data with a server. It is possible to update only parts of a web page and avoid reloading of the whole page.

Usually data are received asynchronously. While waiting for the external answer the web page stays reactive and can execute other scripts. Finally the asynchronous answer is processed within a callback function given at the preceding request call to the server. Internally a XMLHttpRequestObject is used for asynchronous data requests, but those details are hidden behind the simple jQuery AJAX methods.

Example for dynamically supplied external contents:

AJAX allows more reactive web pages

If you enter any character in the following input field you will receive an immediate response from the server giving you a hint if there are matching entries within the server data base. (Words starting with one of the letters 'a', 'b', 'd' or 'e' will have multiple alternatives within data base.)

Enter a word:
Hint from server:

Other topics

Current window size: (is updated on resize event)