how works $(function(){}); in jquery

Question

Hi everyone, I like to know how works or what means(?) when you define a function in the selector in jquery like this.

$(function(){code,code})

because with jquery-ui you can (or must.. I'm really new with this library) set accordion with this code

$(function(){
    // Accordion
    $("#accordion").accordion({ header: "h3" });

    //hover states on the static widgets
    $('#dialog_link, ul#icons li').hover(
        function(){$(this).addClass('ui-state-hover');},
        function(){$(this).removeClass('ui-state-hover');
    });

});

Source: http://jqueryui.com/demos/accordion/

And I have a problem setting accodions inside tabs(also with jquery-ui), but I cann't find why works buggy, and I think that maybe can I fix the problem understanding this behavior.

And pretty sure that I doesn't undestood quiet right the selector in jquery, hope you can help me. Thanks in advance, by the way sorry about my poorly english.

Answer 1

$(function(){ /*...*/ });

Is the same as:

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

Basically, it just holds off code-execution until the document is ready. It's just an anonymous function. You see the same thing in your $.hover() call, which takes two anonymous functions - one to determine the "enter" logic, and the other to determine the "exit" logic.

$(".foo").hover(
  function(){ alert("You entered!"); },
  function(){ alert("You exited!!"); }
);

Sometimes these function bring with them different localized variables you can use. For instance, if you were to iterate through many elements using jQuery's $.each() method:

$(".foo").each(function(i,o){
  alert("Currently on " + i); // Currently on 0, Currently on 1...
});

You can see that we've got two variables i and o, available to us here. i is the index of the current element being iterated, and o is a reference to the element itself.

Answer 2

They've just written it out in a way you've probably not seen before. The hover method takes two possible functions, one for entering and one for exiting. Sometimes written:

$('#dialog_link, ul#icons li').hover(function(){
  //stuff to do on mouseenter
  $(this).addClass('ui-state-hover');
}, function(){
  //stuff to do on mouseleave
  $(this).removeClass('ui-state-hover');
});

Documentation: http://api.jquery.com/hover/#hover1

Answer 3

$(somefunction) is a shorthand for $(document).ready(somefunction). So what you're doing with $(function{}) is defining an anonymous function that will run once the document loads.

Answer 4

$(function () {}) is short-hand for jQuery(function () {}), which is short-hand for $(document).ready(function () {}). I.e. it binds a function to the Document's Ready event, i.e. this code will get executed when the document finished loading. It's what you should always do.

http://api.jquery.com/jQuery/#jQuery3