-1
    $(function() {
    var Shape = Backbone.Model.extend({
        defaults : {
            x : 100,
            y : 100,
            width : 100,
            height : 100,
            color : 'green'
        },
        setTopLeft : function(x, y) {
            this.set({
                x : x,
                y : y
            });
        },
        setDim : function(w, h) {
            this.set({
                width : w,
                height : h
            });
        }
    });  ... });

In this JS example I used $(function()...). If I remove this outer function line from the code, my program doesn't work. Why do I have to use it? Is this problem related with the "document ready"?

Also I have a code which works well without "$(function()...)".

        var AppView = Backbone.View.extend({
    el : '#container',

        initialize : function() {
            this.render();
        },

        render : function() {
            this.$el.html("Hello World");
        }
    });

    var appView = new AppView();

What's the difference between two codes? I hava no idea at all...

plz help this poor student... ;(

Jinny Song
  • 125
  • 1
  • 10
  • https://learn.jquery.com/using-jquery-core/document-ready/ – freedomn-m Nov 19 '15 at 08:18
  • Tip for the poor student: please do some research by yourself before asking questions here. This questions have been asked lots and a simple google search will give you the results. Also please read [ask] – T J Nov 19 '15 at 14:31
  • Possible duplicate of [What does (function($) {})(jQuery); mean?](http://stackoverflow.com/questions/2937227/what-does-function-jquery-mean) – T J Nov 19 '15 at 14:32
  • Thanks all of you~ :). I know what the tag means now! But..... I don't know the reason why the second one is working :-(. There is no outter function and It means it doesn't wait for the DOM ready...I think the second one should not work because it doesn't wait for the DOM ready...little bit confusing to this poor student – Jinny Song Nov 20 '15 at 02:08

1 Answers1

2
$(function(){
   // DOM is completely loaded. 
});

or bigger form

$(document).ready(function(){
   // DOM is completely loaded. 
});

or 

jQuery(function(){
   // DOM ready
});

This is basically the DOMReady event. The function with your code is the code to be executed when the DOM is ready, but before all resources are loaded.

This ensures that all the HTML elements in your source code would be ready for manipulation in JS. Otherwise you may miss elements that are otherwise in your source code when trying to select them.

void
  • 33,471
  • 8
  • 45
  • 91
  • Thanks all of you~ :). I know what the tag means now! But..... I don't know the reason why the second one is working :-(. There is no outter function and It means it doesn't wait for the DOM ready...I think the second one should not work because it doesn't wait for the DOM ready...little bit confusing to this poor student... Is there anyone who can help me? – Jinny Song Nov 20 '15 at 01:39