What is a $(function() { ... }) function and when is it called in the following example?

javascript, jquery

Solution

It comes from the jQuery library you're including:

<script type="text/javascript" src="tabcontrol/jquery-1.3.2.js"></script>

`$` is an alias for the `jQuery` function.

See jQuery(callback) reference documentation:

A shorthand for `$(document).ready()`.

Allows you to bind a function to be executed when the DOM document has finished loading. This function behaves just like `$(document).ready()`, in that it should be used to wrap other $() operations on your page that depend on the DOM being ready to be operated on. While this function is, technically, chainable - there really isn't much use for chaining against it.

For more information, have a look at Tutorials:Introducing $(document).ready()

Problem

I am using SharePoint Server 2007 Enterprise with Windows Server 2008 Enterprise. I am developing using VSTS 2008 + C# + .Net 3.5 + ASP.Net. I am learning the following code dealing with javascript, my confusion is for $(function(){...} part of code, when it will be called and what is its function? I did not see any code invokes this function. ``` <!doctype html> <html lang="en"> <head> <title>Test</title> <link type="text/css" href="tabcontrol/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="tabcontrol/jquery-1.3.2.js"></script> <script type="text/javascript"> $(function() { $("#tabs").tabs(); }); </script> </head> <body> <div class="demo"> <div id="tabs"> <ul> <li><a href="#tabs-1">tab1</a></li> <li><a href="#tabs-2">tab2</a></li> </ul> <div id="tabs-1"> <p>tab1 info</p> </div> <div id="tabs-2"> <p>tab2 info</p> </div> </div> </div> </body> </html> ``` thanks in advance, George

Original source