If you’re using manual Javascript to manipulate the DOM elements in your webpage, well you’re just…DOM.  What can I say?  JQuery makes life so easy it’s insane.

JQuery is browser-safe and has an incredibly simple interface for accessing elements by id, name, or through a filtered search.

Suppose you wanted to show an alert box that says “Under Construction” whenever somebody hits a button.  An incredibly impractical feature, I know, but the old way was to do the following:

<input id=button type=button onclick=”alert(‘Under Construction’)” >

This is fine on one element, but soon it becomes a real maintenance nightmare.  You’ve got markup and scripts colliding all over the place.  Let’s extend the concept, let’s say I want to change the content of my header to say “Under Construction” when somebody presses my magic button.

The old way:

<h1 id=title>Here is my great website</h1>

<input id=button type=button onclick="document.getElementById('title').innerHTML = 'Under Construction" >

As you can see, this is starting to get messy.

Now enter JQuery.  Take the example above, I’ll separate my JavaScript behavior from the layout.

<h1 id=title>Here is my great website</h1>

<input type=button id='button'>

and I’ll add a separate <script> tag to process the button click…

$('#button').click( function() {// Adds a click listener event
  // here is my logic once the button is pressed
  $('#title').val( "Under Construction" );
});

And there you have it!