Question

我有关于jQuery和javascript代码的问题;当我在</head>和<body>

之间写下这个jQuery时

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

然后在body标签中编写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是自动创建一个canvas元素，然后在canvas中使用动画引发一些气泡。

部分代码如下：

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();
}

我想知道是否有人可以为此提出更智能的解决方案？谢谢。

Answer 1

如其他答案中所述，<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>

Answer 2

您可以在<body>...</body>内或<head> ... </head>内写下所有内容不适用于</body>和<head>标记之间（可能适用于某些不太正式的浏览器，如旧版IE）。

Answer 3

脚本标记应始终直接位于标记之前的页面底部，除非在此之前由于某种原因需要执行代码。

据我所知，只有在同一页面上使用两个使用美元符号（即jQuery和MooTools）的不同库时，才需要使用jQuery noConflict（）方法。你可以使用jQuery和vanilla javascript，而不必毫无问题地使用noConflict。

同一页面上的jQuery和javascript代码不起作用

3 个答案: