jQuery: The Write Less, Do More JavaScript Library

Error: Failed to load processor NavWiki
No macro or processor named 'NavWiki' found

Why doesn't $("#mydiv").firstChild return the right value?

Substitute 'firstChild' with any DOM element property such as .className or .nextSibling. jQuery's $() function returns a jQuery object--not a DOM element. Frameworks like prototype use $() as a shorthand for document.getElementById(). jQuery's $() is closer to a (hypothetical) getElementsByCssSelector(). To get the DOM properties of #mydiv you can use $("#mydiv")[0].firstChild, but often you can use chained method calls to process an element with much less code.

Why can't I use a colon or period in my ID or CLASS names, since they are valid XHTML?

The W3C CSS Selector spec, which jQuery uses for its selectors, does not allow colons or periods in these identifiers. If it did, selectors with pseudo-classes (:hover) and class names (.myclass) would be ambiguous.

I want to port some pretty large JS-file to jQuery to take advantage of the easy way of writing and understanding it. Problem is, I never did much JS before.. Could you guys give me some workflow for what the best way would be to start and finish such a job?

First, get set up with a good JavaScript debugger. This is the most important tool for understanding existing code and testing new code. For IE you can use Microsoft Visual Studio or Microsoft Script Editor. For Firefox you can use FireBug or Venkman, or the new JavaScript debugger in the Komodo 4.0 alpha.

A good syntax-highlighting-and-checking editor will also help a lot. I use Komodo 4.0, which checks my JS syntax as I write the code and puts those squiggly red underlines under errors. There's also the Antechinus JavaScript Editor or the free JSEclipse.

Then, find the smallest, easiest to understand piece of code in your file that would benefit from jQuery. Port it and test. Use that JS debugger to step through the code and see how it works. Do a small piece of code at a time and test as you go, so you never go very long without working code.

To start with, for better understanding, don't use the usual jQuery chains:

   $('#foo').show();

Instead, code it the hard way:

   var $foo = $('#foo');
   $foo.show();

Set a breakpoint on the second line and look at the $foo object in the debugger. See what is in it and get a better understanding of the jQuery object. Then you can go back to the shorter notation.

You'll find that trick helpful in debugging jQuery code - if something isn't working right, break it up into individual statements so you can step through them in the debugger and see what is going on.

Be sure to use the full, uncompressed jQuery for development, not the compressed (unreadable) version.

Is there an equivalent to moo.fx.[insert effect here] in jQuery?

If you are looking for something that is equivalent to something in script.aculio.us, or moo.fx, the first place you should try is Interface.