Question

我是使用jQuery创建应用程序的新手，但我对javascript非常熟悉。好吧，我想要做的是使用javascript getElementById以便在html5画布中绘制图像。我的代码是：

包含jQuery和JQuery mobile：

    <link rel="stylesheet" type="text/css" href="lib/jquery.mobile-1.0b1.min.css" />
    <script type="text/javascript" src="lib/jquery-1.6.1.js"></script>  
    <script type="text/javascript" src="lib/jquery.mobile-1.0b1.min.js"></script>

有问题的代码：

     <div data-role="content">
      <!--//TO DO canvas drawing-->
      <canvas id="draw_area" width="295px" height = "390px"></canvas>
      ...

      <script type="text/javascript">
      var canvas = getElementById("draw_area");
      var context = canvas.getContext('2d');
      var map = new Image();

      map.src = "./imgs/home_screen1.png";
      map.onload = function (){
          context.drawImage (map, 0, 0);
      };
 </script>

我也注意到我无法使用

<body onload = "aFunction();">

没有任何其他javascript事件，例如＆＃34; onclick＆＃34;。

我做错了吗？

Answer 1

应该是：

var canvas = document.getElementById("draw_area");

您的脚本在加载后会立即运行getElementById行，这会失败（由于缺少document.）并阻止其他页面上的脚本执行。

Here's a quick demo向您展示脚本错误将如何阻止后续行执行。

一旦修复了，正如@swalk所说，你应该封装该脚本，使其在document.ready上运行以保持整洁。

Answer 2

我怀疑是因为你没有使用jQuery的dom ready功能。操作/访问DOM的任何JavaScript都应该在DOM准备好之后完成。即使这不是问题，当人们不熟悉JavaScript或jQuery时，这也是一个常见的问题。

大多数jQuery代码通常都在这个就绪函数中找到：http://api.jquery.com/ready/。

例如，您的代码应为：

<script type="text/javascript">
$(document).ready(function() {
  var canvas = getElementById("draw_area");
  var context = canvas.getContext('2d');
  var map = new Image();

  map.src = "./imgs/home_screen1.png";
  map.onload = function (){
    context.drawImage (map, 0, 0);
  };
});
</script>

如果我使用jQuery，javaScript事件是否有效？

2 个答案: