Question

我在这里有一个由朋友提供的jQuery代码，我不知道如何让它工作。我被告知我可以将其保存为html，因为代码有一个引用作为外部但是当我这样做时它没有用。

以下是代码：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<title>tyu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"> 
#tintin
{
    position:relative;
color:white;
font-size:18pt;
font-style:bold;
font-family:Calibri;
width:800px;
height:500px;
}
#text 
{
    top:0px;
    position:absolute;
filter:alpha(opacity=100);
opacity:100;
left:600px;
}
</style>
<script type="text/javascript"> 

//var txt=['text 1','text 2', 'text 3', 'text 4', 'text 5', 'text 6', 'text 7', 'text 8', 'text 9', 'text 10'], init=0,i=0,k=0,speed=40,el;
//var loopCount=1000;
//var j=0;
//var padd = 50; //set this to an approriate increment
//function fade(){
//init==0?i++:i--;
//el.filters?el.style.filter='alpha(opacity='+i+')':el.style.opacity=i/100;
//el.firstChild.nodeValue=txt[k];
//if(i==100)init=1;
//if(i==0) {init=0;k++;j++;
//el.style.paddingLeft=50*k;
//} 
//if(k==txt.length)k=0;
//if (j<loopCount) setTimeout('fade()',speed);
//}
//window.onload=function(){
//el=document.getElementById('tintin');
//fade();
    //}
    $(document).ready(function () {

        var txt = ['text 1', 'text 2', 'text 3', 'text 4', 'text 5', 'text 6', 'text 7', 'text 8', 'text 9', 'text 10'];
        var k = -1;
        fade();
        function fade() {
            k++;
            if (k == 9) {
                k = 0;
            }
            $("#text").text(txt[k]);
            $("#text").css("left", (600 - k * 100) + "px");
            $("#text").fadeTo(1, 100);
            console.log((600 - k * 100) + "px");
            console.log($("#text").css("left"));
            $("#text").css("top", (k * 100) + "px");

            var nl = "-=" + (k*100) + "px";
            console.log(nl);

            var nt = "-=" + (300 - k*100) + "px";
            var op = Math.floor((-($("#text").css("left").replace("px", "") - 600 - k * 100)) / 600) + .3;
            $("#text").animate({
                left: "300px", //
                opacity: op,
                top: "300px"
            }, 1000);

            $("#text").animate({
                left: nl, //
                opacity: 0,
                top: nt
            }, 1000);
            setTimeout(fade, 2000);


        }
    });
</script>
</head>
<body>
<div id="tintin" style="color:#fff !important; background-color:blue;">
<div id="text">

</div>
</div>

</body>
</html>

Answer 1

在 general 中，jQuery代码（即使用jQuery库的JavaScript代码）在Web浏览器上运行。您可以使用script标记在Web浏览器中运行JavaScript代码，代码实际位于代码中：

<script>
alert("I'm some JavaScript code");
</script>

...或代码在单独的文件中，标签引用文件：

<script src="myfile.js"></script>

（请注意，结束标记是必需的，而您不能将其写为<script src="myfile.js"/>等自结尾标记。）

由于您使用的是jQuery，因此必须在使用它之前包含jQuery库文件：

<script src="jquery.min.js"></script>

或者，如果您使用的是像Google这样的CDN：

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

当页面“准备就绪”时你想要运行的代码你可以放入一个jQuery在页面“准备好”时会调用的函数：

<script> jQuery(function() { jQuery("<p>This paragraph added via jQuery</p>").appendTo(document.body); }); </script>

或者，您可以将script标记放在页面的最底部，就在结束</body>标记之前;如果你这样做，最好将你的代码包装在一个函数中，这样你就不会不必要地创建全局符号：

<script> // This creates a function to contain any symbols that you create, then // immediately calls it. As written, it assumes it's at the very bottom of // the page and so things are basically ready. (function() { jQuery("<p>This paragraph added via jQuery</p>").appendTo(document.body); })(); </script>

jQuery的主要功能jQuery可以jQuery或$使用，所以上面的内容可能是：

<script> $(function() { $("<p>This paragraph added via jQuery</p>").appendTo(document.body); }); </script>

...但是当其他库使用$时，有一种方法可以使jQuery不使用$符号。我提到了这一点，因此您可以理解为什么在某些代码中看到jQuery，但在其他代码中看到$。

以下是使用jQuery的完整示例：

<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <meta charset=utf-8 /> <title>Test Page</title> <style> body { font-family: sans-serif; } </style> </head> <body> <input type='button' id='theButton' value='Click Me'> <script> jQuery(function() { // Hook the button click jQuery("#theButton").click(function() { jQuery("<p>This paragraph was added via jQuery.</p>").appendTo(document.body); }); }); </script> </body> </html>

Live copy

Answer 2

如果您可以提供更多我们可以帮助解决这些问题的示例，您可以创建一个HTML页面来测试Jquery功能。我发现Cloud 9在开发Javascript应用程序时很有用，你可以尝试一下。

如何执行jQuery代码

2 个答案: