What is jQuery, anyway?

According to jQuery's website:

"jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript."

Their motto is "Write less, do more" and they definitely achieve that.  What it does is allow you to use jQuery's functions, events and properties merged with (or instead of) the standard javascript code to offer more powerful features which handle issues such as error-checking, cross-browser bugs and such for you.  Because of this, your code is easier and faster to write, more thoroughly tested, and more extensible, without the need to write your own library of tools.  jQuery sits on top of javascript, extending the features without replacing them.  You can use a mixture of standard javascript and jQuery in the same page seamlessly.

It also supports the technique of separating your HTML markup and the javascript code that supports it.  (Wikipedia: Unobtrusive JavaScript) This is a major advantage in writing and debugging your markup because the same effect can be accomplished with much more compact and streamlined code.

Picture this example, where you have a link that toggles a hidden div:

Example 1: Plain javascript

<a href="#" id="toggleSwitch_p" onMouseOver="displayBox();" onmouseout="hideBox();">Plain Javascript</a>
<div id="theBox_1" style="display: none;">Peek-a-boo!</div>

<script type="text/javascript">
  function displayBox() {
    var myHiddenBox= document.getElementById('theBox_1');
    myHiddenBox.style.display = "block";
 }
 function hideBox() {
    var myHiddenBox= document.getElementById('theBox_1');
    myHiddenBox.style.display = "none";
  }
</script>

Example 2: With jQuery

<a href="#" id="toggleSwitch_j">jQuery Hover</a>
<div id="theBox_2" style="display: none;">Peek-a-boo!</div>

<script type="text/javascript">
$(document).ready(function() {
$("#toggleSwitch_j").hover(
  function() {
    $("#theBox_2").show();
  },
  function() {
    $("#theBox_2").hide();
 });
});
</script>

As you can see, the HTML is much cleaner.  There is no javascript code mixed in with your markup.  The javascript has been replaced with functions from jQuery which simplify the task as well.  The point is that jQuery provides an extension to the javascript language, which simplifies and provides extra power to what javascript can normally offer.

To take this a step further... say you wanted to animate the show/hide so it appears to slide up and down like a window shade. Doing that in plain javascript would be a pain, but it's a simple tweak in jQuery! Change the hide() and show() functions to slideUp(500) and slideDown(500) for a 500 millisecond animation...

Example 3: jQuery slideUp/slideDown

<a href="#" id="toggleSwitch_3">jQuery Hover</a>
<div id="theBox_3" style="display: none;">Peek-a-boo!</div>

<script type="text/javascript">
$(document).ready(function() {
$("#toggleSwitch_3").hover(
  function() {
    $("#theBox_3").slideDown(500);
  },
  function() {
    $("#theBox_3").slideUp(500);
 });
});
</script>

Enough talk, you probably want to see it work! Well... here it is. Whenever I give an example, you can see it in action and click the link below to experiment with the code yourself. Hover over the link below to see the hidden content appear and disappear.

See it in action!

Experiment with this at http://jsfiddle.net/webdevem/4RgTS/