DOM manipulation through Event Handling in jQuery

The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML, and XML documents. The nodes of every document are organized in a tree structure, called the DOM tree. Objects in the DOM tree may be addressed and manipulated by using methods on the objects. The public interface of a DOM is specified in its application programming interface (API).(from Wikipedia)

jQuery is a JavaScript library that allows you to work with the DOM in a browser in an independent and efficient way.

We have the ability to create dynamic web pages by using events. Events are actions that can be detected by your web application.

Following are examples of events:

  • A mouse click
  • A web page loading
  • Taking mouse over an element
  • Submitting an HTML form
  • A keystroke on your keyboard

When these events are triggered you can then use a custom function to do pretty much whatever you want with the event. These custom functions are called Event Handlers.

The Code School introduction to jQuery course really helped me to understand the basics. The exercises after each topic helped to reinforce the understanding of each topic. The course was easy to follow and the refactoring of the code was super helpful.