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!
