wyo schrieb:
As I understand $(document).ready() is more or less just an enclosure
to make sure the DOM is correcly available for use with jQuery. As it
seems this makes the use of any on... event handler obsolete since any
event can be bound in the $(document).ready() enclosure. Is that right
or is there more behind it?
Yes, the goal should be to separate behavior (JavaScript) and structure
(HTML), just like you (hopefully) already do with presentation (CSS) and
structure.
That said you should avoid inline event handlers ("on" HTML attributes)
and attach these handlers from an (external) script. These "on"
attributes are the equivalent to font tags and other presentational
attributes in HTML.
This will result in a much increased maintainability. Imagine you have a
bunch of external links, which should open in a new popup...
If you had something like
<a href="..." onclick="window.open(this.href, 'width=400,height=500');
return false;">
spread over 97 templates that gives you the maintenance hell if you need
to change the width of the popup or remove the popup.
It's would be much cleaner if you would have to change that in one
single place:
$('a.external').click(function() {
window.open(this.href, '', 'width=450,height=500');
return false;
});
Not to mention that your HTML will become smaller and better readable
and external js files will be cached by the browser.
Such separation is part of what is called Unobtrusive JavaScript.
There's more to it though, some keywords: accessibility, graceful
degradation, progressive enhancement.
What happens if I still use e.g. onclick somewhere in the page
possibly when this event is already bound to a function in the
enclosure? Should this be avoided? What are the implications?
I'm not sure. I think both handlers will be fired.
So far I assumed the DOM was ready when I used Javascript code
anywhere in a page. Was that wrong or why needs jQuery $
(document).ready()?
If you include external scripts in the head, the DOM is not ready,
because at that point it is simply not loaded. You could circumvent this
by including your scripts right before the closing body tag, but purists
will doom that as improper separation of structure and behavior ;-)
$(function() is mentioned as a shorthand for $(document).ready(), does
this mean I could use whatever syntax I like more?
Yes. The shorthand is less to type, which is convenient but less
readable in my opinion.
jQuery(function($) is mentioned as writing failsafe jQuery code yet I
don't understand what's the difference to the above choices. Does
anybody know?
There are other libraries that use the "$" as function name. To avoid a
clash, you can use "jQuery" instead of "$". "$" is just an alias for
"jQuery" which may not be available in case of usage with other libraries.
Plugin authors often use the following block scope simulation to avoid
that problem and still have the convenience of typing "$" only:
(function($) {
// use $ here safely
})(jQuery);
HTH
-- Klaus
