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

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

<!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

Share Improve this question edited Mar 13, 2012 at 7:55 Shalom Craimer 21.5k10 gold badges73 silver badges108 bronze badges asked Jan 17, 2010 at 13:01 George2 45.8k113 gold badges323 silver badges465 bronze badges

Add a ment |

7 Answers 7

Sorted by: Reset to default 9

It es 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()

It will be called when the document is ready. It is equivalent to:

$(document).ready(function() {
    ...
});

Document.ready indicates that the page is fully loaded on the client. WebParts are serverside controls and will be processed first in order to produce the html document sent to the client. Thus webparts will be processed before the document.ready client-side event fires.

From the Gecko docs:

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

$(function(){

});

is jQuery (a Javascript library) shorthand for:

$(document).ready(function(){

});

It is what you use to do with <body onload="xxx"> but more sophisticated. You can get a fuller explanation here.

I'm not sure why you tagged your post "SharePoint" but note that this is not suported on SharePoint pages. You need to push scripts that run on page load on a stack and SharePoint will execute them. The syntax is:

_spBodyOnLoadFunctionNames.push("myOnloadFunction");

This will require the javascript fu:

function myOnloadFunction()
{
    $("#tabs").tabs();
}

to be available, which can execute your onload code.

That's a shorthand used in jQuery and one that is absolutely unclear and unnecessary in my opinion. Not too long ago, we used to write:

$(document).ready(function() {
    $("#tabs").tabs();
});

Now we can also write this to do the above:

$(function() {
    $("#tabs").tabs();
});

The function that is passed to $(document).ready is executed when the page is loaded and the DOM is ready, in other words the document has been loaded in memory. This code is written in jQuery, a Javascript library that makes DOM operations easier.

This is how the above code translates to plain Javascript:

window.onload = function() {
    $("#tabs").tabs();
};

where window is a global object that represents the page window, of course.

This is a jQuery call and it gets called when a document gets loaded.

more info at http://docs.jquery./Core/jQuery#callback

That syntax is an alias for

$(document).ready(function(){});

This event is used in jQuery to invoke a script as soon as the DOM is ready. It's like window.onload, but doesn't wait for all the images to fully load before firing.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

7 Answers 7

与本文相关的文章

评论列表(0)