3

我有以下有效的代码 - 

$(function(){
    $('#testbutton').click(function(){
        var checkedValue = $('[name="someRadioGroup"]:radio:checked').val();
        $('#result').html('The radio element with value <tt>' + checkedValue + '</tt> is checked');
    });
});

我知道 $('#testbutton') 获取带有 id testbutton 的 HTML 元素并为其分配一个事件处理程序。

但我不明白为什么我需要将该代码放在函数文字中？

如果我删除$(function(){（和相应的});）它不起作用。

但是，其他代码可以在不包含在函数文字中的情况下工作。例子 - alert('Hi there')

有什么不同？为什么 alert 有效但事件赋值语句无效？

4

3 回答 3

6

$(function(){...});是 的简写$(document).ready(function(){...});。它的目的是在您打算使用的元素存在于 DOM 中之前（通常是在文档准备好之后）才运行您的代码。

于 2012-08-30T17:30:26.653 回答
2

这不是一个要求。

您将代码放入事件处理程序中，当 DOM 准备好时调用该事件处理程序。

如果您没有将代码放入 DOM 就绪处理程序中，并且如果您的代码执行 DOM 选择，则需要找到其他方法来确保 DOM 在运行之前准备好。

如果您的代码不执行 DOM 选择，则不需要。这就是你alert()工作的原因，因为它不需要获取任何元素。

另一种选择是这样。

<body>
   <button id="testbutton">click</button>
   <div id="result"></div>

   <script type="text/javascript" src="/your/script.js"></script>
</body>

这会将您的代码置于页面上所有元素的下方，因此它们在您的代码运行时肯定是可用的。

另一种选择是使用window.onload处理程序。

window.onload = function() {
    // your code
};

或使用 jQuery。

$(window).on("load", function() {
    // your code
});

这类似于 DOM 就绪处理程序，不同之处在于它等待所有资源（如图像）被加载。

于 2012-08-30T17:30:56.013 回答
0

在最基本的层面上，某种形式(function(){...})()是立即执行的函数字面量。这意味着您已经定义了一个函数并且您正在立即调用它。

这种形式对于信息隐藏和封装很有用，因为您在该函数中定义的任何内容都保留在该函数的本地，并且无法从外部世界访问（除非您专门公开它 - 通常通过返回的对象文字）。

这种基本形式的一种变体是您在 jQuery 插件（或通常在此模块模式中）中看到的。由于您正在定义函数文字，因此除非您明确传递信息，否则它无法访问外部世界的任何内容。因此：

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

这意味着您正在传递对实际 jQuery 对象的引用，但它在函数字面量的范围内称为 $。

于 2012-08-30T17:32:53.673 回答