jQuery: CSS-style Javascripting

Before I started building my new Ajax file manager, I looked around at a number of drag and drop solutions. Eventually, I settled on jQuery's drag and drop implementation, from the Interface plugin.

Since then, I've been playing around a lot with other parts of jQuery. The Interface plugin is really neat--my new directories get a yellow fade, my deleted directories drop out, etc. I've discovered, though, that I really love jQuery itself, and if you're at all interested in web design, I think you will too. To give you an idea of how clear and powerful jQuery syntax is, I've thrown up a few examples. They execute the actual contents of their textarea, so feel free to play around with the code. If you want to dive right in, check out the Visual jQuery documentation; if you're more comfortable with standard Javascript, use get(0) to retrieve the DOM element returned from a jQuery search. (Those of you who read this with a feed reader will probably want to view this actual post.)

This will find every h3 (post title) and slowly hide it. You can also specify IDs and classes with # and ., just like in CSS, or even use XPath, if you're a total geek.

$('h3').hide('slow');

This will bring them back.

$('h3').show();

This will make every list item tiny.

$('li').css('fontSize', 'xx-small');

This will make every link open in a new window.

$('a').click(function() {window.open(this.href); return false;});

You can even chain several commands together. This will shrink every image to 20px and make its parent's font-style italic.

$('img').css('height', '20px').parent().css('fontStyle', 'italic')

By the way, I'm also using jQuery to create these examples. Here's the code, for any of you who are interested:

$(document).ready(function() {
 $('form.jqExample')
  .append('<input type="submit" value="Execute" />')
  .submit(function() {
   eval($(this).children('textarea').get(0).value);
  });
});

In other words, once the document is ready, find every form with a class of "jqExample", append a submit button, and, when the form is submitted, evaluate the contents of the first textarea you find inside it. It's a beautiful thing.