CODEWITHSUNDEEP
javascriptjquery
US-Samurai
US-Samurai

Reputation: 127

jquery basic of dollar sign - named vs anonymous

I have a couple of interview questions

  1. What is the different between $(function(){}); and $(document).ready(function(){});

  2. What is the difference between $(function(){}); and var func=function(){}; How are each of them called?

  3. Given the following script

    <script language="javascript">
$(function()
{
   var id=$("cssID");
   //do something with your id
   //your event to be added here
});
</script>

    How can you add an event, say, onmouseout that will work on the id?

Here are my answers:

  1. They are the same, both are meant to run when the page document finishes loading

  2. The first one is called automatically while the second one will be called via named reference; that is func.called(), for example.

  3. Something like this: 

    $(function()
{
    var id=$("cssID");
    //do something with your id
    //Oki
    id.onmouseout
    (function(){
      //do something
    });
});

However my professor says I was wrong in all three. she explained things I am unsure and didn't dare to ask, she was mad about me. What are the correct answers and why are mine wrong?

Upvotes: 2

Views: 197

Answers (3)

Ry-
Ry-

Reputation: 224942

There is no difference between:

$(functionValue);

And:

$(document).ready(functionValue);

So your professor is wrong there. The second example is completely different. One of them runs on document ready and requires jQuery; the other one is just a function literal assigned to a JavaScript variable.

As for the third one, you'd probably do it with on. onmouseover is correct if you use get, but not really the best way of going about things, and you definitely wouldn't call it like you're doing there - that's completely incorrect.

id.on('mouseout', yourHandler);

or

id.mouseout(yourHandler);

Upvotes: 0

nnnnnn
nnnnnn

Reputation: 150040

1. They are the same, both are meant to run when the page document finishes loading

This is half right. They are the same, the first is just a shortcut way to write the second, but they don't run when the document finishes loading, they run when the DOM is ready (at which time some resources such as images might still be loading).

2. The first one is called automatically while the second one will be called via named reference; that is func.called(), for example.

Again half right. In the first one the anonymous function will be called automatically when the DOM is ready as per question 1. The second example can be called with func(). You wouldn't have the .called part in there. Or you can pass func as a parameter, e.g., as $(document).ready(func).

Q3 var id=$("cssID");

How can you add an event, say, onmouseout that will work on the id?

$("cssID") creates a jQuery object that will contain zero or more elements depending on how many matched the "cssID" selector. The id variable references that jQuery object. If the question is how to assign an event handler to those matching elements you'd do this:

id.mouseout(function() { /* some code */. });
// OR
id.on("mouseout", function() { /* some code */ });

When processing events with jQuery you don't use "on" in the event names, so it's "mouseout" not "onmouseout".

So your answer to 3 was nearly right.

(Note though that "cssID" is a selector that won't actually match any elements unless you have <cssID> tags in your document...)

Upvotes: 0

Alfred
Alfred

Reputation: 21396

These are the different types of Document Ready functions typically used in jQuery (aka jQuery DOM Ready). A lot of developers seem to use them without really knowing why. So I will try to explain why you might choose one version over another. Think of the document ready function as a self-executing function which fires after the page elements have loaded.

See Where to Declare Your jQuery Functions for more information on how to use the Document Ready Functions.

Document Ready Example 1

$(document).ready(function() {
    //do jQuery stuff when DOM is ready
});

Document Ready Example 2

$(function(){ 
    //jQuery code here 
});

This is equivalent to example 1… they literally mean the same thing.

Document Ready Example 3

jQuery(document).ready(function($) {
    //do jQuery stuff when DOM is ready
});

Document Ready Example 4

(function($) { 
    // code using $ as alias to jQuery
  $(function() {
    // more code using $ as alias to jQuery
  });
})(jQuery);
// other code using $ as an alias to the other library

Document Ready Example 5

$(window).load(function(){  
     //initialize after images are loaded  
});

Here is the link for you to refer.

Upvotes: 1

Related Questions