jquery基本的美元符号 - 命名与匿名

I have a couple of interview questions

我有几个面试问题

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

   $(function(){})之间有什么不同;和$(document).ready(function(){});

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

   $(function(){})之间有什么区别;和var func = function(){};他们每个人怎么称呼?

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?

   你怎么能添加一个可以在id上运行的onmouseout事件呢?

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.

   第一个是自动调用的,而第二个是通过命名引用调用的;例如,func.called()。

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?

但是我的教授说我三个都错了。她解释了我不确定但不敢问的事情,她对我很生气。什么是正确的答案,为什么我错了?

3 个解决方案

#1

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.

这些是jQuery(aka jQuery DOM Ready)中常用的不同类型的Document Ready函数。许多开发人员似乎在不知道原因的情况下使用它们。因此,我将尝试解释为什么您可能选择一个版本而不是另一个版本。将文档就绪功能视为一个自动执行的功能,在页面元素加载后触发。

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

有关如何使用文档就绪函数的更多信息,请参见在何处声明您的jQuery函数。

Document Ready Example 1

文档就绪示例1

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

Document Ready Example 2

文档就绪示例2

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

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

这相当于例1 ......它们的字面意思相同。

Document Ready Example 3

文档就绪示例3

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

Document Ready Example 4

文档就绪示例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

文档就绪示例5

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

Here is the link for you to refer.

这是您可以参考的链接。

#2

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

1.它们是相同的,两者都是在页面文档完成加载时运行

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).

这是对的一半。它们是相同的,第一种只是写第二种的快捷方式,但它们在文档完成加载时不运行,它们在DOM准备就绪时运行(此时某些资源,如图像可能仍在加载) 。

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

2.第一个被自动调用,而第二个将通过命名引用调用;例如,func.called()。

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).

再来一半。在第一个中,当DOM准备就绪时,将根据问题1自动调用匿名函数。可以使用func()调用第二个示例。你不会在那里有.called部分。或者您可以将func作为参数传递,例如,$(document).ready(func)。

Q3 var id=$("cssID");

Q3 var id = $(“cssID”);

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

你怎么能添加一个可以在id上运行的onmouseout事件呢?

$("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:

$(“cssID”)创建一个jQuery对象,该对象将包含零个或多个元素,具体取决于与“cssID”选择器匹配的数量。 id变量引用jQuery对象。如果问题是如何为这些匹配元素分配事件处理程序,您可以这样做:

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".

使用jQuery处理事件时,不要在事件名称中使用“on”,因此它的“mouseout”不是“onmouseout”。

So your answer to 3 was nearly right.

所以你对3的答案几乎是正确的。

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

(注意,“cssID”是一个选择器,它实际上不会匹配任何元素,除非你的文档中有 标签...)

#3

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.

所以你的教授错了。第二个例子完全不同。其中一个在文档就绪上运行并需要jQuery;另一个只是一个分配给JavaScript变量的函数文字。

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.

至于第三个,你可能会用它来做。 onmouseover是正确的,如果你使用get,但不是真正的最好的方式来做事情,你绝对不会称之为你在那里做 - 这是完全错误的。

id.on('mouseout', yourHandler);

or

id.mouseout(yourHandler);