Javascript 为什么我需要将JQuery代码包装在函数文本中？_Javascript_Jquery

Javascript 为什么我需要将JQuery代码包装在函数文本中？

javascript jquery

Javascript 为什么我需要将JQuery代码包装在函数文本中？,javascript,jquery,Javascript,Jquery,我有以下有效的代码- $(function(){ $('#testbutton').click(function(){ var checkedValue = $('[name="someRadioGroup"]:radio:checked').val(); $('#result').html('The radio element with value <tt>' + checkedValue + '</tt> is checked'

我有以下有效的代码-

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

$（函数（）{
$（“#测试按钮”）。单击（函数（）{
var checkedValue=$（'[name=“someRadioGroup”]：radio:checked'）.val（）；
$（'#result'）.html（'值为'+checkedValue+'的单选元素已选中'）；
});
});

我知道$（'#testbutton'）获取id为testbutton的HTML元素，并为其分配一个事件处理程序

但我不明白为什么我需要把代码放在函数文本中

如果删除

$（function（）{

（以及相应的

}）；

）它将不起作用

但是，其他代码可以在不使用函数文本包装的情况下工作。范例-

alert（'Hi there'）

有什么区别？为什么警报工作，但事件分配语句不工作？

$（function（）{…}）

是

$（document.ready）（function（）{…}）的缩写。它的目的是在DOM中存在要使用的元素之前（通常在文档准备好之后）不运行代码。
这不是一项要求
您将代码放入事件处理程序中，该事件处理程序在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>

或者使用jQuery
$(window).on("load", function() {
    // your code
});

这与DOM就绪处理程序类似，只是它等待所有资源（如图像）加载。
在最基本的级别上，某种形式的（function（）{…}）（
是一个立即执行的函数文本。这意味着您已经定义了一个函数，并且正在立即调用它
此表单对于信息隐藏和封装非常有用，因为您在该函数中定义的任何内容对于该函数来说都是本地的，并且从外部世界无法访问（除非您专门公开它-通常通过返回的对象文本）
这个基本形式的一个变体是您在jQuery插件（或者通常在这个模块模式中）中看到的。因为您正在定义一个函数文本，所以除非您显式地传递信息，否则它无法从外部世界访问任何内容。因此：
(function($) {
  ...
})(jQuery);

这意味着您要传入一个对实际jQuery对象的引用，但在函数literal的范围内它被称为$
(function($) {
  ...
})(jQuery);