使用jQuery插入鼠標點擊圈

-2

今天剛開始學習這種語言（我很抱歉，如果這是一個愚蠢的問題），但我想弄清楚如何將圓圈插入到網頁上。我在這裏找到了一個示例代碼：http://jsfiddle.net/7xQZ2/ 但是，當我嘗試從單個文件運行它時，由於某種原因，腳本部分未運行。我試着改變<body>和<script>。它只是顯示一個座標爲（0,0）的框。它保持靜態，當我移動鼠標時它不會改變。使用jQuery插入鼠標點擊圈

<!DOCTYPE html> 

<html> 
<head> 
    <h2 id="status2">0, 0</h2> 
    <canvas width="500px" height="500px" style="width: 500px; height: 500px; border:1px ridge green;" id="special"> 
    </canvas> 
</head> 

<body> 
    <script> 
     jQuery(document).ready(function(){ 
      $("#special").click(function(e){ 

       var x = e.pageX - this.offsetLeft; 
       var y = e.pageY - this.offsetTop; 

       /* var c=document.getElementById("special"); */ 
       var ctx= this.getContext("2d"); /*c.getContext("2d");*/ 
       ctx.beginPath(); 
       ctx.arc(x, y, 10,0, 2*Math.PI); 
       ctx.stroke(); 
       $('#status2').html(x +', '+ y); 
      }); 
     }) 
    </script> 
</body> 

</html>

來源

2014-07-02 user3085290

HTML位於body標籤和腳本之間的head標籤之間。 – j08691

wh-爲什麼你的身體內容在你的''標籤中？ – Jnatalzia

首先，你依賴於jQuery庫，並沒有包含它。其次，你有無效的HTML，因爲你有中的元素。把它們弄清楚，它可能會起作用。 –

您需要包含jQuery。請將這條線在head部分：

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

也動你有什麼地方在head至body，反之亦然。

來源

2014-07-02 20:57:47

請設置一個答案爲已接受。 –

您的代碼使用jQuery庫。在使用你的代碼之前一定要包含它。

而且，這將是在你的頁面中的所有HTML元素必須在身體標籤，而不是頭之一。

<!DOCTYPE html> 
<html> 
<body> 
    <h2 id="status2">0, 0</h2> 
    <canvas width="500px" height="500px" style="width: 500px; height: 500px; border:1px ridge green;" id="special"> 
    </canvas> 
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script> 
     jQuery(document).ready(function(){ 
      $("#special").click(function(e){ 

       var x = e.pageX - this.offsetLeft; 
       var y = e.pageY - this.offsetTop; 

       /* var c=document.getElementById("special"); */ 
       var ctx= this.getContext("2d"); /*c.getContext("2d");*/ 
       ctx.beginPath(); 
       ctx.arc(x, y, 10,0, 2*Math.PI); 
       ctx.stroke(); 
       $('#status2').html(x +', '+ y); 
      }); 
     }) 
    </script> 
</body> 
</html>

來源

2014-07-02 20:59:48 blex

如果你只這讓作爲你的HTML

<!DOCTYPE html> 

<html> 
<head> 
    <h2 id="status2">0, 0</h2> 
    <canvas width="500px" height="500px" style="width: 500px; height: 500px; border:1px ridge green;" id="special"> 
    </canvas> 
</head> 

<body> 
    <script> 
     jQuery(document).ready(function(){ 
      $("#special").click(function(e){ 

       var x = e.pageX - this.offsetLeft; 
       var y = e.pageY - this.offsetTop; 

       /* var c=document.getElementById("special"); */ 
       var ctx= this.getContext("2d"); /*c.getContext("2d");*/ 
       ctx.beginPath(); 
       ctx.arc(x, y, 10,0, 2*Math.PI); 
       ctx.stroke(); 
       $('#status2').html(x +', '+ y); 
      }); 
     }) 
    </script> 
</body> 

</html>

然後是的，這是行不通的。因爲你使用的代碼屬於JavaScript的jQuery庫。這需要你在你的代碼中包含jQuery。它不是內置在每個瀏覽器中。

使用此代碼來添加它。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

來源

2014-07-02 21:00:28

使用jQuery插入鼠標點擊圈

回答

相關問題