1

I am using the flot library for producing plots. The examples given on the website all have their javascript code written like this:

<script>
$(function() {
    ...
    ...
    ... plot ...
});
</script>

http://www.flotcharts.org/flot/examples/realtime/index.html

What does $(function() {}) bit mean?

LZOO
  • 125
  • 8
  • I've reopened this question because asking "What does X do?" is a very different question to "What is the difference between using X and Y to do Z?", so marking it as a duplicate is wrong. – Quentin Aug 01 '14 at 12:26
  • @Quentin: would you say that [this question](http://stackoverflow.com/questions/6587939/what-exactly-does-document-ready-guarantee) is asking the same question or not? – Qantas 94 Heavy Aug 01 '14 at 12:41
  • @Qantas94Heavy — It's closer, but I'd still say no, because this question is a lot broader. There's no sign that the OP managed to identify `$` as being a function, for instance. – Quentin Aug 01 '14 at 12:42
  • 1
    @LZOO you still not found your answer ?? – Rakesh Shetty Aug 01 '14 at 12:59
  • 1
    @RakeshShetty Yes I now understand this. Thank you very mcuh. – LZOO Aug 01 '14 at 14:24

4 Answers4

7

Its document-ready handler

Description: Specify a function to execute when the DOM is fully loaded.

Satpal
  • 126,885
  • 12
  • 146
  • 163
7

It is document ready handler 

$( document ).ready(function() {
  // Handler for .ready() called.
});

This is to prevent any jQuery code from running before the document is finished loading (is ready).

is equivalent to

$(function() {
  // Handler for .ready() called.
});

If .ready() is called after the DOM has been initialized, the new handler passed in will be executed immediately.

Here are some examples of actions that can fail if methods are run before the document is fully loaded:

1.Trying to hide an element that is not created yet

2.Trying to get the size of an image that is not loaded yet

The jQuery team has created an shorter method for the document ready event:

$(function(){

   // jQuery methods go here...

});

It is depend upon the developers which syntax is to be used but document ready event is easier to understand when reading the code

For more details : See

Rakesh Shetty
  • 4,228
  • 6
  • 35
  • 76
5

$() calls a function (one named $, which is a valid function name in JS even though it doesn't look like one or give you any clue as to what the function does).

function() {...} is a function expression, which defines a new function (in the same way that 3 defines a new number or [] a new array).

In this case, the function expression is the first argument to the $ function call.

The jQuery library defines a $ function (which is highly overloaded so it does very different things depending on what you pass to it).

If you pass a function to $, then it will call the passed function when the DOM ready event fires.

Quentin
  • 800,325
  • 104
  • 1,079
  • 1,205
-2

All of these mean the same:

  • $(document).ready(handler)
  • $().ready(handler) (not recommended)
  • $(handler)

Ussually you use an annonymous function in the place for handler:

$(function() {
  // Do this when .ready() called.
});
dstronczak
  • 2,226
  • 4
  • 23
  • 41