This post will demonstrate how to manipulate the DOM (Document Model Object) by using some basic jQuery event examples.
First of all the ‘$(document).ready()’ function. This function will only run the code once jQuery detects the document is in state of readiness for the DOM to be manipulated!

See the Pen onReadyEvent by Daniel (@Parsons) on CodePen.

This next basic jQuery event example adds a class named ‘lighten’ to the ‘h1’ when a hover event is detected. The class is removed when the event is no longer detected.

See the Pen hoverEvent by Daniel (@Parsons) on CodePen.

This next example is very similar to the previous example however instead of using ‘hover()’ the ‘mouseenter()’ and ‘mouseleave()’ functions are used.

See the Pen mouse over and out by Daniel (@Parsons) on CodePen.

To create an event when the browser registers a keypress the jQuery ‘keypress’ event can be used. Here is an example:

See the Pen keypressExample by Daniel (@Parsons) on CodePen.


In addition to ‘keypress’ jQuery has a ‘keydown’ and ‘keyup’ event. Here are two further examples demonstrating ‘keydown’ and ‘keyup’.

See the Pen keydown example by Daniel (@Parsons) on CodePen.

See the Pen keyup example by Daniel (@Parsons) on CodePen.

One caveat with using the ‘keypress’, ‘keydown’ and ‘keyup’ jQuery events is that most but not all browsers support them so be careful!

Basic jQuery Event Examples.

jQuery Change Event

See the Pen changeevcentjquery by Daniel (@Parsons) on CodePen.

Notice that the above example is not wrapped in a ‘(document).ready()’ function. Sometimes it will be necessary to wrap jQuery code in the ‘(document).ready()’ function and sometimes it is not necessary. The code will work in the ‘(document).ready()’ ready function as well. To prove it here is the identical example wrapped in a ‘(document).ready()’ function.

See the Pen documentReadyChange by Daniel (@Parsons) on CodePen.

See the Pen focusEventjQuery by Daniel (@Parsons) on CodePen.

Basic jQuery Event Examples

Basic jQuery event examples include the blur() event. The ‘blur()’ event can be viewed as the opposite to the ‘focus()’ event as is shown in the example below.

See the Pen blurEventjQuery by Daniel (@Parsons) on CodePen.

Another jQuery event worth knowing about is the ‘scroll(); event.

See the Pen scrollEventjQuery by Daniel (@Parsons) on CodePen.


More on jQuery

jQuery JSON Introductory Examples.

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *