What does $(function() { ....}) do in JQuery?

Question

I was looking through some source code and saw this:

$(function() {
    $('li.link').css('cursor', 'pointer')
    .click(function() {
        window.open ($('a', this).attr('href'));
        return false;
    });
});

Can someone explain what that does, selecting an anonymous function? I don't care about the body of the function; I'm just interested what $(function() { ...}) does.

http://stackoverflow.com/questions/2662778/what-is-the-difference-between-these-jquery-ready-functions — j08691, Oct 17 '14 at 15:50
@Quentin A better duplicate would be: http://stackoverflow.com/questions/7642442/what-does-function-do — Barmar, Oct 17 '14 at 15:50

score 2 · Answer 1 · answered Oct 17 '14 at 15:48

It is a short notation for the ready() function in jQuery.

It is documented on that functions doc-entry: http://api.jquery.com/ready/

All three of the following syntaxes are equivalent:

$( document ).ready( handler ) 
$().ready( handler ) (this is not recommended)
$( handler )

There is also $(document).on( "ready", handler ), deprecated as of jQuery 1.8…

score 1 · Answer 2 · answered Oct 17 '14 at 15:49

If you look at jQuery source code you will see these lines:

// HANDLE: $(function)
// Shortcut for document ready
} else if (jQuery.isFunction(selector)) {
    return typeof rootjQuery.ready !== "undefined" ? rootjQuery.ready(selector) :
    // Execute immediately if ready is not present
    selector(jQuery);
}

So this is Shortcut for document ready.

What does $(function() { ....}) do in JQuery?

2 Answers2