Javascript 为什么可以'；当使用jQuery加载文档时，我是否直接调用函数？_Javascript_Jquery

Javascript 为什么可以'；当使用jQuery加载文档时，我是否直接调用函数？

javascript jquery

Javascript 为什么可以'；当使用jQuery加载文档时，我是否直接调用函数？,javascript,jquery,Javascript,Jquery,我使用jQuery中的$（document）.ready函数。似乎我不能用它直接调用函数。我不明白为什么。当我试图用getElementById查找画布时，它给出了一个错误这项工作： <!DOCTYPE html> <html> <head> <script language="javascript" src="http://code.jquery.com/jquery-1.4.2.js" ></script> <script

我使用jQuery中的$（document）.ready函数。似乎我不能用它直接调用函数。我不明白为什么。当我试图用getElementById查找画布时，它给出了一个错误

这项工作：

<!DOCTYPE html>
<html>
<head>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.js" ></script>
<script type="text/javascript">
var test="this is a test";
var canvas;
var ctx;

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

function init() {               
    console.log (test);
    canvas=document.getElementById('canvas');
    ctx = canvas.getContext('2d');      
}

</script>

</head>

<body>
<div>
<canvas id="canvas" width="300" height="300">
    No HTML5 support.
</canvas>       
</div>
</body>

</html>


var test=“这是一个测试”；
var帆布；
var-ctx；
$（文档）.ready（函数（）{
init（）；
}); 
函数init（）{
console.log（测试）；
canvas=document.getElementById（'canvas'）；
ctx=canvas.getContext（'2d'）；
}
不支持HTML5。

这也有效：

<!DOCTYPE html>
<html>
<head>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.js" ></script>
<script type="text/javascript">
var test="this is a test";
var canvas;
var ctx;

$(document).ready(function(){               
    console.log (test);
    canvas=document.getElementById('canvas');
    ctx = canvas.getContext('2d');      
}); 


</script>

</head>

<body>
<div>
<canvas id="canvas" width="300" height="300">
    No HTML5 support.
</canvas>       
</div>
</body>

</html>


var test=“这是一个测试”；
var帆布；
var-ctx；
$（文档）.ready（函数（）{
console.log（测试）；
canvas=document.getElementById（'canvas'）；
ctx=canvas.getContext（'2d'）；
}); 
不支持HTML5。

但这是一个错误

<!DOCTYPE html>
<html>
<head>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.js" ></script>
<script type="text/javascript">
var test="this is a test";
var canvas;
var ctx;

$(document).ready(init()); 

function init() {               
    console.log (test);
    canvas=document.getElementById('canvas'); // <= Error here!
    ctx = canvas.getContext('2d');      
}


</script>

</head>

<body>
<div>
<canvas id="canvas" width="300" height="300">
    No HTML5 support.
</canvas>       
</div>
</body>

</html>


var test=“这是一个测试”；
var帆布；
var-ctx；
$（document）.ready（init（））；
函数init（）{
console.log（测试）；
canvas=document.getElementById（'canvas'）；//在body标记的onload事件中调用init（）方法
<body onload="init()">

有关更多事件详细信息：
在body标记的onload事件中调用init（）方法
<body onload="init()">

有关更多活动详细信息：
在这一行：
$(document).ready(init()); 

实际上，您正在立即调用init函数，并将其结果作为参数传递给ready函数。
由于此行在DOM准备就绪之前执行，因此init函数失败
您想改为：
$(document).ready(init); 

也就是说，将实际的init函数传递给ready函数，而不是它的结果。
它在这一行：
$(document).ready(init()); 

实际上，您正在立即调用init函数，并将其结果作为参数传递给ready函数。
由于此行在DOM准备就绪之前执行，因此init函数失败
您想改为：
$(document).ready(init); 

也就是说，将实际的init函数传递给ready函数，而不是它的结果。
您应该在不使用（）
的情况下进行尝试，如$（document）.ready（init）；
您应该在不使用（）
的情况下进行尝试，如$（document）.ready（init）；
将此行更改为$（document）.ready（init（））；
$（文档）.ready（初始化）；

链接

将此行

$（document）.ready（init（））；

更改为

$（document）.ready（init）；

链接

解决方案取决于您希望如何使用

init（）

函数

$（document）.ready的语法是：$（document）.ready（callBackFunction）；


这意味着您必须提供一个回调，即：
一个函数对象，作为一个对象，它必须写而不带“（）”括号（如上面的定义），因为我们不是为了执行它而“调用”它！相反，我们提供了对.ready（）
函数的引用，因此JQuery的.ready（）
内部代码可以“查找”并自行调用该函数

或者一个匿名函数，形式为function（）{..somecode..}
，位于.ready（…）
内部
相反，您所做的是提供一个函数调用，这就是它不起作用的原因：您没有提供函数，但在某种意义上，函数的“结果”在大多数情况下不是一个函数对象（而是一个变量，如果return
语句不存在，则是未定义的）

因此，如果init（）
$(document).ready(init); // we're passing an object now not a "result" of
                         // a function, so no "()" needed

相反，如果您希望在以后添加除init（）
之外的其他操作，请在匿名函数中调用init（）
（请记住前面提到的调用->括号）：
$(document).ready(function() { // anonymous callback function
    init(); // we're calling init inside a function now,
            // so "()" are needed in order to execute it
    ... other stuff ...
});


对于好奇的人：$（document）.ready（init（））；
如果代码如下所示，那么它将实际工作：
function init2()
{
     ... real init function;
}

function init()
{
     return init2; // function "returns" a function object...
}

$(document).ready(init()); // init() is "substituted" by a function object
                           // reference to init2(), so it works

（这样做没有多大意义，但它可以更好地解释回调背后的理论）。
解决方案取决于您希望如何使用init（）
函数
$（document）.ready的语法是：$（document）.ready（callBackFunction）；


这意味着您必须提供一个回调，即：
一个函数对象，作为一个对象，它必须写而不带“（）”括号（如上面的定义），因为我们不是为了执行它而“调用”它！相反，我们提供了对.ready（）
函数的引用，因此JQuery的.ready（）
内部代码可以“查找”并自行调用该函数

或者一个匿名函数，形式为function（）{..somecode..}
，位于.ready（…）
内部
相反，您所做的是提供一个函数调用，这就是它不起作用的原因：您没有提供函数，但在某种意义上，函数的“结果”在大多数情况下不是一个函数对象（而是一个变量，如果return
语句不存在，则是未定义的）

因此，如果init（）
$(document).ready(init); // we're passing an object now not a "result" of
                         // a function, so no "()" needed

相反，如果您希望在以后添加除init（）
之外的其他操作，请在匿名函数中调用init（）
（请记住前面提到的调用->括号）：
$(document).ready(function() { // anonymous callback function
    init(); // we're calling init inside a function now,
            // so "()" are needed in order to execute it
    ... other stuff ...
});


对于好奇的人：$（document）.ready（init（））；
如果代码如下所示，那么它将实际工作：
function init2()
{
     ... real init function;
}

function init()
{
     return init2; // function "returns" a function object...
}

$(document).ready(init()); // init() is "substituted" by a function object
                           // reference to init2(), so it works

（这样做没有多大意义，但它可以更好地解释回调背后的理论）。
我添加了一个关于回调的非常广泛的解释，以尽可能详细地解释init（）为什么不起作用：）我添加了一个关于回调的非常广泛的解释