为什么我在jQuery中封装jQuery函数（function（$）{}）;

2018-06-05 09:01:13

我遇到了一段代码，如下所示：

jQuery(function($) {
  $('#saySomething').click(function() {
    alert('something');
  });
});

我不太明白。为什么我不能简单地这样做：

$('#saySomething').click(function() {
   alert('saySomething');
});

jQuery(function ($) {...});

是以下简写版本：

jQuery(document).ready(function ($) {...});

如果你不等待document准备就绪，那么你将绑定事件的元素将不会存在于dom中，事件也不会被绑定。

或者，您可以等待body完成加载，但这将包括等待图像，这会花费更长的时间加载。

真相被告知，你不必等待document.ready 。你可以继续使用$('#saySomething').click(...)如果你知道元素存在于DOM中， $('#saySomething').click(...) ：

<button id="saySomething>Say Something!</button>
<script>
    jQuery('#saySomething').click(...);
</script>

jQuery(function ($) {...});最后一个细微差别jQuery(function ($) {...}); 你应该知道的。函数中的$参数用于将jQuery别名为$ ，这将允许您在函数中使用$简写，而不必担心与其他库（如原型）的冲突。

如果您不是在等待document.ready那么通常会看到用于替换jQuery的IIFE：

(function ($) {
    $('#saySomething').click(...);
}(jQuery));

jQuery(function($) {

是一个捷径

jQuery(document).ready(function(){

这将一直等待，直到文档处于DOM就绪的“就绪”状态。然后，您可以使用完整的页面来处理jQuery脚本，而不会错过任何元素。

但是 - 你可以在没有它的情况下运行jQuery。如果脚本处于首位，则可能会选择尚未创建的元素。在我想要影响的元素之后，我立即在文档的正文中使用了jQuery，试图尽可能快地对它们进行操作。这是一个不寻常的案例，我通常不这样做。

使用ready函数的另一个原因是 - 您可以多次运行它。如果您包含多个脚本，或者您有条件包含的代码，则可以有多个ready（）函数。每个就绪块中的代码都保持到就绪状态，然后代码按照添加的顺序执行。

第一个示例在页面完全加载后得到执行。第二个例子直接执行（可能会失败）。

所以，第一个是速记：

$(document).ready(function(){
  // Do something after the page is loaded.
});

链接地址: http://www.djcxy.com/p/17065.html