Question

下面显示的两个jQuery函数有什么区别？

(function($){console.log("Hello");})(jQuery);

$(function(){console.log("Hello");});

Answer 1

第一个只是一个自动执行的函数，指定$是全局jQuery的别名。后者实际上是绑定到$(document).ready(function(){ ... });的替代方法。

// First variation (firing on DOM ready)
$(document).ready(function(){
  console.log('Hello');
});
// Which the functional equivalent to:
$(function(){
  console.log('Hello');
});

首先是您在保留$.noConflict快捷方式时通常如何克服$。

$.noConflict();
(function($){
  // $ is, within this scope, still a reference to jQuery
  // despite $.noConflict
  $('<p>').text('Hello').appendTo('body');
})(jQuery);

Answer 2

下面显示的两个jQuery函数有什么区别？

您的第一个代码段：

(function($){console.log("Hello");})(jQuery);

这是一个匿名自执行功能，它不会等待dom加载它只是在请求进入浏览器时就会发生。

另一件事是你可以看到params中的$它只是保护$别名以引用jQuery。

注意：

您遇到的代码片段可能看不出任何差异，但您可以看到在处理dom节点时的差异。见下面的例子：

您可以看到undefined的警报，因为它不会等待加载DOM。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  (function($) {
    alert($('#mybtn').val());
  })(jQuery);
</script>
<input type='text' id='mybtn' value='123'>

另一方面，您的第二个代码段是不同的。这是$(document).ready(fn)的缩短版本：

$(function(){console.log("Hello");});

无论在doc ready块中写入什么，总是在DOM准备好时运行。您可以在相同的代码示例中看到差异：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  (function($) {
    $(function() { // this waits for dom to get ready.
      alert($('#mybtn').val());
    });
  })(jQuery);
</script>
<input type='text' id='mybtn' value='123'>

Answer 3

第一个(function($){console.log("Hello");})(jQuery);只是一个自执行功能。

第二个$(function(){console.log("Hello");});是$(document).ready(function(){});的快捷方式，在DOM准备就绪时执行。

jquery自执行函数之间的区别

3 个答案:

注意：