同一頁面上的jQuery和javascript代碼不起作用

我有一個關於jQuery和javascript代碼的問題;當我寫這篇文章的jQuery下面</head>和<body>同一頁面上的jQuery和javascript代碼不起作用

之間

<script type="text/javascript"> 
    var $j = jQuery.noConflict(); 
    $j(document).ready(function(){ 
     $j('#page_effect').fadeIn(3000); 
    }); 
</script>

然後寫在身體標記的JavaScript代碼

<script src="bubbles.js"></script> 
<script type="text/javascript"> 
    bubblesMain(new Object({ 
     type : 'linear', 
     minSpeed : 100, 
     maxSpeed : 400, 
     minSize : 30, 
     maxSize : 55, 
     num : 100, 
     colors : new Array('#FF0000','#FFFFFF','#FFCC99', '#FF33CC') 
    })); 
</script>

然後jQuery代碼可以工作，但JavaScript代碼無法正常工作。最後我發現，當我在第一次加載後調整瀏覽器的大小時，可以運行。

bubble.js是自動創建一個畫布元素，然後在畫布內部引入一些帶有動畫的氣泡。

的部分代碼是下面：

function bubblesMain(obj){ 
    bubbleResize(); 
    bubbles = new bubbleObject(obj); 
    bubbles.createBubbles(); 
    setInterval(start,1000/60); 
}; 

//WHEN WINDOW HEIGHT IS CHANGED, REMAKE THE CANVAS ELEMENT 
window.onresize = function(event) { 
    bubbleResize(); 
} 

function bubbleResize(){ 
    var height = parseInt(document.getElementById("canvasBubbles").clientHeight); 
    var width = parseInt(document.getElementById("canvasBubbles").clientWidth); 
    document.getElementById("canvasBubbles").innerHTML = '<canvas id="canvas" width="'+width+'px" height="'+height+'px"></canvas>'; 
} 

function start(){ 

    var canvas = document.getElementById("canvas"); 
    canvas.width = canvas.width; 
    bubbles.move(); 
    bubbles.draw(); 
};

，我有一個<div id="canvasBubbles"></div> indise HTML。

然後，我將下面的代碼添加到bubbles.js之後，就可以運行了。

window.onload = function(event) { 
    bubbleResize(); 
}

我不知道是否有人可以建議一個更聰明的解決方案呢？謝謝。

來源

2012-11-16 巫佳雯

你的''

腳本標籤應該總是在頁面的底部直接放在標籤之前，除非代碼因爲某種原因需要在那之前執行。

據我所知，只有當您在同一頁面上使用兩個不同的庫，都使用美元符號，即jQuery和MooTools時，才需要jQuery noConflict（）方法。你可以使用jQuery和香草JavaScript而不必使用noConflict而沒有任何問題。

來源

2012-12-06 00:48:08

正如其他答案中所述，<script>標籤應該是</body>標籤之前的最後一件事。 See this question.

您放置標記的位置的問題在於HTML頁面的主體尚未加載，因此無法進行操作。 window.onload和window.onresize的工作原因是因爲稍後調用它們，當文檔的主體可用於使用JS進行操作時。

鑑於您提問中提供的詳細信息，您不需要jQuery.noConflict()聲明。

這是您的代碼的替代版本應該做同樣的事情，但效率更高一點。將其放置在body元素的末尾，即</body>標記的前面。我沒有測試它，因爲我沒有所有需要的腳本（氣泡等）。

<!-- this goes at the end of your body element, just before the closing tag --> 
<script type="text/javascript" src="bubbles.js"></script> 
<script type="text/javascript"> 

    $.ready(function(){ 

     var canvasWrap, 
      canvasElm, 
      bubbles; 

     init(); 

     setInterval(update, 1000/60); 

     window.onresize = resize; 

     $('#page_effect').fadeIn(3000); 

     function init(){ 

      canvasWrap = document.getElementById("canvasBubbles"); 
      canvasElm = document.createElement('canvas'); 
      canvasElm.setAttribute('id', 'canvas'); 
      canvasElm.setAttribute('width', canvasWrap.clientWidth); 
      canvasElm.setAttribute('height', canvasWrap.clientHeight); 
      canvasWrap.appendChild(canvasElm); 

      bubbles = new bubbleObject({ 
       type: 'linear', 
       minSpeed: 100, 
       maxSpeed: 400, 
       minSize: 30, 
       maxSize: 55, 
       num: 100, 
       colors: ['#FF0000','#FFFFFF','#FFCC99', '#FF33CC'] 
      }); 
      bubbles.createBubbles(); 
      update(); // you might not need this 
     } 

     function resize() { 
      canvasElm.setAttribute('width', canvasWrap.clientWidth); 
      canvasElm.setAttribute('height', canvasWrap.clientHeight); 
     } 

     function update(){ 
      // canvasElm.width = canvasElm.width; // is this a hack for something? 
      bubbles.move(); 
      bubbles.draw(); 
     }; 

    }); 
</script>

來源

2012-12-10 04:22:41 tiffon

相關問題