Question

为什么这在加载标题内容时不起作用...

(function ($) {
    var mheaderwrapper = '<div id="header"></div><div class="header-menu"></div>';
    var mheadercontent = '/shop/Pages/global_header.html';
    var mmenucontent = '/shop/Pages/global_megamenu.html';
    var mjqueryhover = 'js/jquery.hoverIntent.minified.js';
    var mjquerymenu = 'js/jquery.custom-menu.js';
    $('#wrapper').prepend(mheaderwrapper);
    $('#header').load(mheadercontent);
    $('.header-menu').load(mmenucontent, function(){
       $.getScript(mjqueryhover);
       $.getScript(mjquerymenu);
    });
})(jQuery);

但这确实......

  $.mheader = function() {
    var mheaderwrapper = '<div id="header"></div><div class="header-menu"></div>';
    var mheadercontent = '/shop/Pages/global_header.html';
    var mmenucontent = '/shop/Pages/global_megamenu.html';
    var mjqueryhover = 'js/jquery.hoverIntent.minified.js';
    var mjquerymenu = 'js/jquery.custom-menu.js';
    $('#wrapper').prepend(mheaderwrapper);
    $('#header').load(mheadercontent);
    $('.header-menu').load(mmenucontent, function(){
       $.getScript(mjqueryhover);
       $.getScript(mjquerymenu);
    });
   }

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

Answer 1

这：

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

立即执行，并且只将jQuery映射到$以确保美元符号在自执行函数中确实是“jQuery”。它是不“DOM就绪”功能。

此：

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

将在任何代码执行之前等待DOM准备就绪。

您可以在第一个内使用第二个：

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

做两件事！

Answer 2

当你在<head>部分中有一个函数时，它会立即执行，并且在HTML元素开始加载之前就这样做了。您的代码执行时，您的元素#wrapper，#header以及.header-menu类的任何内容都不存在，这就是失败的原因。

在第二个示例中，使用domready事件会延迟代码触发，直到DOM准备就绪（并且您的HTML元素存在），因此代码可以正常工作。

顺便说一下，

$(function() {
    // executes when DOM is ready
});

只是一个快捷方式：

$(document).ready(function() {
    // executes when DOM is ready
});

以上示例是jQuery提供的特定功能。不要将前者与立即执行的函数结构混淆，后者是纯JavaScript：

(function() {
    // executes NOW
})();

请参阅adeneo's answer了解如何正确组合两者。

Answer 3

$(document).ready实际上在创建DOM后运行。

如果在构造DOM之前插入<head>部分，则自动调用函数会立即运行。

使用自调用函数和文档就绪之间的区别

3 个答案: